Vue 深入响应式原理

先来看看一个“新手”可能犯的错误：

Vue 实例数据模型中的 obj 对象，age 没先声明，无法将它转换为响应式

当把一个 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象中的各个属性，并使用 Object.defineProposer 把这些 Proposer 全部转化为 getter/setter. 这就是为什么 obj 的属性没先声明的时候，无法让 Vue 进行跟踪修改。 "property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的"。

针对这个问题，我们该如何处理？

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用以下两个方法处理：

第一个是 Vue 全局处理方法：Vue.set(this.object, ProposerName, Value),另一个是实例对象方法： this.$set(this.object, ProposerName, Value)

解决方案

当对象需要添加多个属性时,可以采用 Object.assign() 方法:

当对象需要添加多个属性时

Vue 不能检测以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

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

Vue 数组修改

解决方案：

第一个是 Vue 全局处理方法：Vue.set(this.array, index, Value),另一个是实例对象方法： this.$set(this.array, index, Value)

数组解决