十四、Vue监测数据的原理

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

（一）监测对象中的数据

• 通过 setter 实现监视，且要在 new Vue 时就传入要监测的数据
• 对象中后追加的属性，Vue 默认不做响应式处理
• 如需给后添加的属性做响应式，请使用如下 API：
  • Vue.set(target, propertyName / index, value)
  • vm.$set(target, propertyName / index, value)

（二）监测数组中的数据

• 通过包裹数组更新元素的方法实现，本质就是做了两件事：
  • 调用原生对应的方法对数组进行更新
  • 重新解析模板，进而更新页面

（三）特别注意

• 在 Vue 修改数组中的某个元素一定要用如下方法：

1.使用这些 API

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

2.对于不能修改原数组的 API

• 如：filter()
• Vue 监测不到数组数据的更改
• 这类 API 则直接替换原数组即可

重要

Vue.set() 或 vm.$set() 不能给 vm 或 vm 的根数据对象 添加属性

（四）数据劫持

• Vue 中把 data 数据处理成 vm._data 的过程
• 数据劫持和数据代理都离不开 Object.defineProperty()

重要

数据劫持才是响应式的根基