1.v2中哪些情况操作数据不是响应式的?

常见的有以下三种情况

1.给对象后续新增的key进行赋值

data() {

    return {

         obj:{ }

     }

}

this.obj.age = 18

2.删除对象中的某一项

data(){

    return {

        obj:{

           age:18

        }

     }

}

delete this.obj.age

3.通过索引去修改数组的元素

data() {

    return {

       arr: ['a','b','c']

     }

}

this.arr[0] = 'd'

2.为什么这些情况不是响应式的?

1.给对象后续新增的key进行赋值

原因:

因为Object.defineProperty是递归劫持的对象中的每一个属性,如果这个属性是后续被添加的,当然就没有劫持到

2.删除对象中的某一项

原因

Object.defineProperty不支持对删除操作的劫持

3.通过索引去修改数组的元素

原因

并不是Object.defineProperty不支持对数组的劫持,而是作者处于性能的原因没有这样做

3.怎么解决?

1.给对象后续新增的key进行赋值

解决:Vue.set() 或this.$set()

Vue.set(this.obj,'age',18)

2.删除对象中的某一项

解决:Vue.delete() 或this.$delete()

Vue.delete(this.obj,'age')

3.通过索引去修改数组的元素

解决: Vue.set() 或 this.$set() 或 arr.splice()

Vue.set(this.arr,0,'d')

arr.splice(0,1,'d')

4.Vue3呢? 

Vue3不存在上述问题

1.给对象后续新增的key进行赋值

Vue3响应式的原理换成了Proxy,可以直接代理整个对象,就无所谓这个属性是不是后续添加的了

2.删除对象中的某一项

Proxy支持对删除操作的拦截

3.通过索引去修改数组的元素

Proxy对数组的操作不存在性能问题