景风

Appearance

监视数据原理 ​

Vue会监视data中所有层次的数据

监视对象 ​

通过setter实现监视, 且要在new Vue时就传入要监视的数据

  • 通过obj.xxx添加的属性, Vue默认不做响应式处理
  • 如需给后添加的属性做响应式, 需要使用如下API:
js
Vue.set(target, key, value)
vm.$set(target, key, value)

监视数组 ​

通过包裹数组更新元素的方法实现, 本质就是做了如下两件事:

  • 调用原生对应的方法对数组进行处理更新
  • 重新解析模板, 进而更新页面

在 Vue 中修改数组 ​

相关API:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
  • Vue.set(target, key, value)或vm.$set(target, key, value)

特别注意

  • Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性
  • 将Vue实例中的data改为_data中的数据及getter和setter的形式叫做数据劫持