vue数组和对象的响应式

vue数组和对象的响应式

Vue 无法探测普通的新增 property(官方文档中说明)

vue2无法检测到通过下标改变数组对应的索引值的变化。但是可以检测到对象数组中对象元素（即某一索引值）的原有属性值的变化。同时原有属性的删除，以及新属性的添加都无法检测到。独立对象中的属性亦如此。

对数组本身的操作可以检测到，比如：push，pop等

• 原有属性值的删除可通过Vue.delete( target, propertyName/index ) 来触发响应式
• 添加新属性或改变基本类型数组的值需通过Vue.set( target, propertyName/index, value ) 来添加响应式

例：

data(){
    return{
        list1:[1,2,3,4,5,6,...],
        list2:[{name:'kitty'},{name:'hobo'},...],
        obj:{name:'hobo'}
    }
}
method:{
    change1(index){
        this.list1[index]=999;//非响应式
        Vue.set(this.list1,index,999);//响应式

        this.list2[index]={name:'eddie'};//非响应式
        this.list2[index].name='eddie';//响应式

        delete this.list2[index].name;//非响应式
        Vue.delete(this.list2[index],'name');//响应式

        this.list2[index].age=18;//非响应式
        Vue.set(this.list2[index],'age',18);//响应式

        obj={name:'eddie'};//响应式
        obj.name='eddie';//响应式
        obj.age='18';//非响应式
        delete obj.name;//非响应式
        
    }
}