Vue3前端 响应式数据 知识点

一、ref(基本类型数据，也可以定义对象类型的响应式数据。此时底层用的还是reactive)

ref 创建基本类型的响应式数据

作用:定义响应式变量
语法: let xxx = ref(初始值)
返回值: 一个 RefImp1 的实例对象，简称 ref对象或ref，ref 对象的 value 属性是响应式的.

注意点:
Js 中操作数据需要:xxx.value .但模板中不需要 value，直接使用即可（有一种情况例外，如下:

,此时，ref包裹的值，在js中不需要加.value ，可以理解为reactive会自动帮我们拆包解包。

）
对于 let name = ref(张三') 来说    name 不是响应式的    name.value 是响应式的

二、reactive（只能定义:对象类型的响应式数据）

作用:定义一个响应式对象 (基本类型不要用它，要用 ref，否则报错)

语法: let 响应式对象= reactive(源对象)。

返回值:一个 Proxy 的实例对象，

简称: 响应式对象注意点: reactive 定义的响应式数据是“深层次”的

注意点！！！

reactive定义的数据不能直接修改整个reactive对象，想要修改的话，得通过Object.assign

三、ref对比 reactive

宏观角度看:

1. ref 用来定义:基本类型数据、对象类型数据

2. reactive 用来定义:对象类型数据

区别:

1.ref 创建的变量必须使用 .value (可以使用 volar 插件自动添加.value)
2.reactive 重新分配一个新对象，会失去响应式 (可以使用 object.assign 去整体替换)。

使用原则：

1.若需要一个基本类型的响应式数据，必须使用 ref
2.若需要一个响应式对象，层级不深， ref、reactive 都可以。
3.若需要一个响应式对象，且层级较深，推荐使用 reactive。