前言

vue3 前端代码开发过程中，必然会涉及变量声明，会用到：ref、reactive 。本章节 进行讲解说明。

演示的项目，经处理后的结构如下：

ref

用途：ref 声明变量时，使用。常用于 声明 基本类型（此外，也可声明对象）

具体更多细节，参考官网：
（1）https://cn.vuejs.org/api/reactivity-core.html#ref
（2）https://cn.vuejs.org/glossary/#ref

功能讲解，演示如下：

1. 开发代码如下：
   

<template><div>前端开发：{{ name }}</div><button @click="changeName">改变名称</button>
</template><script lang="ts" setup>
let name = 'Vue3'
function changeName() {console.log('name 变量修改之前：', name)name = '一起学习吧~'console.log('name 变量修改之后：', name)
}
</script><style lang="scss" scoped></style>

2. 运行后，页面效果如下：
   说明 浏览器控制台区域，是需手动按F12调出来的，默认不展示。
   
3. 期望实现的需求功能：
   当点击 “改变名称” 这个按钮时，页面上内容 Vue3 变成 一起学习吧~

？思考：实际上，当点击按钮时，
(1) 代码层面上的 变量 name 值，能否被修改 ？
(2) 页面内容 Vue3 能否 变成 一起学习吧~ ?

点击 “改变名称” 按钮，进行验证：

从验证结果上来看，变量值修改成功，但页面内容没有展示。
此时，若想实现页面内容 “联动” 效果，可使用 ref 进行变量声明，将其改为响应式方式。

什么是响应式？

• 参考官网：https://cn.vuejs.org/glossary/#reactive-effect

更改为响应式方式后，
打开浏览器，控制台有输出内容：变量为一个RefImpl对象，期内有一个value属性（如下）

再次尝试点击 “改变名称” 按钮，修改 页面上的内容，
但是，仍然没有发生变化，如下：

变量已经改为响应式的了，但页面还是没有变化

原因：代码中，操作变量的方式不对，需调用 .value ，原来的代码（如下）并未使用.value

调整后的代码如下：

代码调整完成后（使用 .value 修改变量值），
最后，再次进行功能验证，已可正常同步联动，效果如下：

reactive

用途：ref 声明变量时，使用。只可用于 声明 对象类型（不可用于基本类型）

具体更多细节，参考官网：https://cn.vuejs.org/api/reactivity-core.html#reactive

功能讲解，演示如下：

1. 创建如下对象，当在页面上，点击“改变名称”按钮，验证是否可同步修改变量、以及页面是否会同步显示？
   

<template><div>客户姓名：{{ client.name }}</div><button @click="changeName">改变名称</button>
</template><script lang="ts" setup>
let client = { name: '张三', age: 10 }console.log('声明的变量是：', client)function changeName() {console.log('变量修改之前，属性值：', client.name)client.name = '诸葛亮'console.log('变量修改之后，属性值：', client.name)
}
</script><style lang="scss" scoped></style>

2. 经验证，变量参数值会同步修改，但是页面内容不会同步显示。
   
3. 若想实现，变量值发生改变时，页面同步显示，可使用 reactive 声明变量，此时将变为响应式。
   
4. 打开浏览器页面，查看控制台输出：此时变量对象已经发生改变 为 Proxy
   
5. 点击 “改变名称” 按钮，验证可知：控制台中显示变量值发生改变，且页面内容同步显示。
   

说明：
（1）使用 ref 声明的变量，修改参数值时，需使用 .value
（2）此处，使用 reactive 声明的变量，修改参数值时，无需使用 .value

若有转载，请注明出处：https://blog.csdn.net/CharlesYuangc/article/details/149105167