Vue-set解决数组变化不触发视图更新问题
Vue是通过Object.defineProperty()来实现双向数据绑定的。把一个普通 JavaScript 对象传给 Vue 实例的data选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为 getter/setter。每个组件实例都有相应的watcher实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的...
Vue是通过Object.defineProperty()来实现双向数据绑定的。把一个普通 JavaScript 对象传给 Vue 实例的 data
选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter
被调用时,会通知 watcher
重新计算,从而致使它关联的组件得以更新。
所以,当对象下的访问器属性值发生了改变之后, 那么就会调用set函数,这时vue就可以通过这个set函数来追踪变化,调用相关函数来实现view视图的更新。
有时候在代码中能够看到数据变化,但视图不更新。
点击之后数字并没有在view层更新,而通过console打印发现数据确实更新了。
这是因为点击时,对数组进行了属性添加。使用Vue.set()可以解决这个问题。使用 Vue.set(object, key, value)
方法将响应属性添加到嵌套的对象上。 还可以使用 vm.$set
实例方法,这也是全局 Vue.set
方法的别名。就可以实现想要的效果。
更多推荐
所有评论(0)