JAVA高级面试进阶训练营视频教程

admin

由于JavaScript的限制，Vue不能检测对象属性的添加或删除。

vue实现数据双向绑定有这么一个过程：当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty() 把这些属性全部转为getter/setter。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。实现数据data变化更新视图view。

因为若一个对象的属性没有在data中声明，则他就不是响应式的。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，这样的话这个对象属性就是响应式的。而执行这个过程必须在data中声明才会有。

var vm = new Vue({
    data:{
        a:1// vm.a 是响应的

    }
})
vm.b = 2;// vm.b 是非响应的

要解决这个问题需要用Vue.set(object, key, value)或者vm.$set方法(全局 Vue.set 方法的别名)

Vue.set(vm.someObject, 'b', 2);
//或者
this.$set(this.someObject,'b',2);

由于 JavaScript 的限制， Vue 不能检测以下变动的数组： 
* 当使用索引直接设置一个项时，例如： 

vm.items[indexOfItem] = newValue; 

解决---->
Vue.set(vm.items,indexOfItem,newValue) / vm.items.splice(indexOfItem, 1 , newValue)

 

* 当你修改数组的长度时，例如： 

vm.items.length = newLength;

解决---->
vm.items.splice(newLength)