Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。也就是说创建过后,data中不允许添加根数据
1. 对对象处理
Vue可以检测到对象属性的修改,不能检测到对象属性的添加和删除,也就是说这种方式处理后,vue不能检察到数据变化,不能进行渲染更新,Vue可以使用Vue.set 和 Vue.delete实现
Vue.set
Vue.set 方法用于设置对象的属性,它可以解决 Vue 无法检测添加属性的限制,语法格式如下:
Vue.set( target, key, value )
Vue.delete
Vue.delete 用于删除动态添加的属性 语法格式:
Vue.delete( target, key )
2. 对数组的处理
vue中的被包装的观察数组能够触发视图更新
有push(),pop(),shift(),unshift(),splice(),sort(),reverse()
不能检测到下面数组变化:
1)直接用索引设置属性,如 vm.item[0] = { }
2)修改数组长度,如vm.items.length = 0
用$set
Vue 包含一组观察数组的变异方法,它们将会触发视图更新,包含以下方法:
push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度
pop() 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项
shift() 移除数组中的第一个项并返回该项,同时数组的长度减1