vue基础笔记四

检测变化的注意事项
受现代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不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕是个空值。