Vue 数据响应式

什么是数据响应式

当你修改数据模型时，视图会进行更新。

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

getter/setter 能够让 Vue 追踪依赖，在 property 被访问和修改时通知变更。

• 每个组件实例都对应一个 watcher 实例，
• 它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。
• 当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

无法检测对象和数组

对象

例子：

var vm = new Vue({
    data:{ 
      a:1
   } 
}) 
// vm.b 无法被检测
vm.b = 2 

上面代码中， 必须在 data 对象上存在才能让 Vue 将它转换为响应式 ，vm.b 后声明 Vue 并不知道，vm.b 没有被 Vue 监听，所以视图不会更新。

解决办法：

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

上面方法，会我们在 data 上面创建一个 key ，并创建代理和监听。

数组

数组我们一般都需要 增删改 操作，Vue 也无法检测。

例子：

var vm = new Vue({
    data: { 
      array: ['a', 'b', 'c'] 
   } 
}) 
vm.array[1] = 'x' 
vm.array[3] = 'd'

解决方法：

1. Vue.set() / vm.$set() 也可以解决。
2. 我们可以使用 push() 方法新增， 也可以触发视图更新，因为 Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。

var vm = new Vue({
    data: { 
      array: ['a', 'b', 'c'] 
   } 
}) 
vm.array.push("d")

七个覆盖方法：

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

参考资料

1. Vue 官方文档
2. Vue 官方文档-变更方法