【vue】创建响应式数据ref和reactive的区别

目录

1、所谓响应式数据

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

3、reactive创建对象类型响应式数据

4、ref定义对象类型响应式数据

5、总结：ref和reactive对比

6、补充：toRefs与toRef

---

1、所谓响应式数据

        所谓响应式数据就是，在vue页面中，template标签内的数据是渲染在页面的数据，一般需要和script标签内的数据进行绑定，也就是说在script标签内会进行一些逻辑计算改变一些数据的值。那么如果不使用响应式数据，script标签内更改了数据的值，template渲染在页面的值是不会发生改变的。

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

注意这里是基本类型

---

看看数据的内容发生了什么变化：

---

---

3、reactive创建对象类型响应式数据

---

输出对象到控制台：

---

4、ref定义对象类型响应式数据

展现数据不变：

---

---

ref底层创建响应式数据时，底层还是使用reactive来创建的

---

5、总结：ref和reactive对比

（1）插件自动补充.value

（2） reactive重新分配对象，会失去响应式

给变量car重写分配一个对象：

解决办法：

修改后：

总结：

（3）如果是ref定义的响应式对象，要重写赋值对象的内容

使用建议：

---

6、补充：toRefs与toRef

 

---

如何变成响应式的解构：

结果：

对于toRefs取多个(对象)，toRef是取单个

效果