VUE3响应式数据（ref和reactive)

“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。

vue实现响应式主要做了这么几件事：

1. 数据劫持：new Vue的时候遍历data对象，用Object.defineProperty给所有属性加上了getter和setter
2. 依赖的收集：render的过程(执行render()时)，会触发数据的getter，在getter的时候把当前的watcher对象收集起来
3. 派发更新：setter的时候，遍历这个数据的依赖对象（watcher对象），进行更新

举个例子

基本类型数据

当我想在页面中用以下的代码改变姓名和年龄，是否能做到呢

直接看结果

1

是不行的，让我们打印一下点击后数据是否改变

显然，数据改变了，但是并没有在页面中呈现，原因就是此时定义的数据并不是响应式的

那就要把数据变成响应式的，使用的是ref

- 作用：定义响应式变量。

- 语法：`let xxx = ref(初始值)`。

- 返回值：一个`RefImpl`的实例对象，简称`ref对象`或`ref`，`ref`对象的`value`属性是响应式的。

- 注意点：

   - `JS`中操作数据需要：`xxx.value`，但模板中不需要`.value`，直接使用即可。

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

修改代码

查看运行结果

2

发现数据已经是响应式数据

对象类型数据

同样的当我们想定义响应式对象时，可以使用reactive

- 作用：定义一个**响应式对象**（基本类型不要用它，要用`ref`，否则报错）

- 语法：`let 响应式对象= reactive(源对象)`。

- 返回值：一个`Proxy`的实例对象，简称：响应式对象。

- 注意点：`reactive`定义的响应式数据是“深层次”的。

直接看结果

修改整个对象

reactive将普通对象数据改成了Proxy对象

 Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

我们不仅可以用reactive定义响应式对象，还可以用ref定义响应式对象

查看结果

可以看到用ref修改的对象其实是响应式数据，该数据的value仍然是Proxy对象

修改是能够实现的。

ref 对比 reactive

宏观角度看：

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

 2. `reactive`用来定义：对象类型数据。

区别：

1. `ref`创建的变量必须使用`.value`（可以使用`volar`插件自动添加`.value`）。

2. `reactive`重新分配一个新对象，会**失去**响应式（可以使用`Object.assign`去整体替换）。

使用原则：

1. 若需要一个基本类型的响应式数据，必须使用`ref`。

2. 若需要一个响应式对象，层级不深，`ref`、`reactive`都可以。

3. 若需要一个响应式对象，且层级较深，推荐使用`reactive`。