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 方法的别名。就可以实现想要的效果。

Logo

前往低代码交流专区

更多推荐