【vue】创建响应式数据ref和reactive的区别
·
目录
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是取单个
效果
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
12
0- 0
已为社区贡献2条内容
所有评论(0)