先来看看一个“新手”可能犯的错误:
![](https://img.haomeiwen.com/i13851645/d28b7ad555a493e7.png)
当把一个 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)
![](https://img.haomeiwen.com/i13851645/69f82dc2b495949a.png)
当对象需要添加多个属性时,可以采用 Object.assign() 方法:
![](https://img.haomeiwen.com/i13851645/4d9b054c8275985f.png)
Vue 不能检测以下数组的变动:
当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
![](https://img.haomeiwen.com/i13851645/69b2c701425d79ad.png)
解决方案:
第一个是 Vue 全局处理方法:Vue.set(this.array, index, Value),另一个是实例对象方法: this.$set(this.array, index, Value)
![](https://img.haomeiwen.com/i13851645/0d52a9af3d3fca10.png)
网友评论