一,前言
1.由于 JavaScript
的限制,Vue
不能检测某些情况下数组和对象的变化。
2.在这些情况下,我们需要特殊处理
二,对象变化不能检测的情况
1.vue
不能检测对象的键的删除和新增,只有对象的键在初始化时就声明才是响应式的。
data:{a:{c:2}}
this.a.b=1 //视图不会响应
this.a.c=3 //具有响应性
三,数组变化不能检测的情况
1.vue
不支持检测数组根据索引赋值,和直接改变数组的length
属性。
data:{a:[]}
this.a[0]=1 //视图不会响应
2.对于数组常用的方法:push
,pop
,splice
等直接改变原数组的方法,视图是响应的。
四,正确方式
1.在vue
中我们需要使用vm.$set()
或Vue.set()
来解决对象和数组改变视图不响应的情况。
2.this.$set(target,props,value)
接受三个参数
第一个参数是要改变的数组或对象,
第二个参数是要添加的对象的键,或者数组的索引
第三个参数是要改变的值
this.$set(this.a,0,'lin')
五,vue3
变化
1.vue3
响应式数据原理使用的proxy
,对应的是reactive
和ref
, 废除了$set