vue深刻响应式式原理——对象 数组

vue深刻响应式式原理

1.在vue初始化实例的时候，data选项的理解

1.1 把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象全部的属性，并使用 Object.defineProperty 把这些属性所有转为 getter/setter。Object.defineProperty 是仅 ES5 支持，且没法 shim 的特性，这也就是为何 Vue 不支持 IE8 以及更低版本浏览器的缘由。

1.2 用户看不到 getter/setter，可是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里须要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不一样，因此你可能须要安装 vue-devtools 来获取更加友好的检查接口。

1.3 每一个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程当中把属性记录为依赖，以后当依赖项的 setter 被调用时，会通知 watcher 从新计算，从而导致它关联的组件得以更新。

2.对象

2.1 因为 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，因此属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的：

var vm = new Vue({
  data:{
  a:1
  }
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的

2.2 Vue 不容许在已经建立的实例上
动态添加新的根级响应式属性(root-level reactive property)。
然而它能够使用 Vue.set(object, key, value) 方法将
响应属性
添加到嵌套的对象上：

Vue.set(vm.someObject, 'b', 2)

您还能够使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.someObject,'b',2)

2.3 有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。可是，添加到对象上的新属性不会触发更新。在这种状况下能够建立一个新的对象，让它包含原对象的属性和新的属性：

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

3.数组

3.1 能够实现动态响应的变异方法
变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组

Vue 包含一组观察数组的变异方法，因此它们也将会
触发视图更新
这些方法以下：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

3.2 重塑数组
filter(), concat(), slice() 。这些不会改变原始数组，但老是返回一个新数组。当使用非变异方法时，能够用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

3.3 因为 JavaScript 的限制， Vue 不能检测如下变更的数组：

3.3.1 当你利用索引直接设置一个项时，
例如： vm.items[indexOfItem] = newValue
如下两种方式均可以实现和 vm.items[indexOfItem] = newValue 相同的效果， 
同时也将触发状态更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)

3.3.2  当你修改数组的长度时，例如： vm.items.length = newLength

example1.items.splice(newLength)

3.4 显示过滤/排序结果

有时，咱们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种状况下，能够建立返回过滤或排序数组的计算属性。

<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

你也能够在计算属性不适用的状况下 (例如，在嵌套 v-for 循环中) 使用 method 方法：

<li v-for="n in even(numbers)">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}