检测变化的注意事项
受现代JavaScript的限制(以及 废弃Object.observe), Vue不能检测到对象属性的添加或删除。 由于vue会在初始化实例时对属性执行getter/setter转化过程,所以属性必须在data对象上存在才能让vue转换它,这样才能让它是响应的。例如:
var vm = new Vue({
data:{
num:1
}
})
vm.num
Vue不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用Vue.set(object, key,value)方法将响应属性添加到嵌套的对象上:
Vue.set(vm.someObject,'b',2)
还可以用vm.$set实例方法,这也是全局Vue.set方法的别名:
this.$set(this.someObject,'b',2)
有时候想向已有对象上添加一些属性,例如使用Object.assign()或_.extend()方法来添加属性。但是添加到新对象上的属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:
this.someObject = Object.assign({},this.someObject,{a:1,b:2})
由于javaScript的限制,Vue不能检测一下变动的数组:
当你利用索引直接设置一个项时,例如:
vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:
vm.items.length = newLength
举个例子:
var vm = new Vue({
data:{
items:['a','b','c']
}
})
vm.item[1] = 'x' //不是响应性的
vm.items.length = 2 //不是响应性的
如何解决:修改数组,触发更新状态
//Vue.set
Vue.set(vm.items,indexOfItem,newValue)
//Array.prototype.splice
Vue.items.splice(indexOfItem,1,newValue)
也可以使用vm.$set实例方法,该方法是全局方法vm.set的一个别名
vm.$set(vm.items,indexOfItem,newValue)
vm.items.splice(newLength)
声明响应式属性
由于Vue不允许动态添加根级响应式属性,所以你必须在初始化实例前声明根级响应式属性,哪怕是个空值。