美文网首页
Vue 深入响应式原理

Vue 深入响应式原理

作者: kimcastle | 来源:发表于2022-01-06 15:29 被阅读0次

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

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)

数组解决

相关文章

网友评论

      本文标题:Vue 深入响应式原理

      本文链接:https://www.haomeiwen.com/subject/jjnlcrtx.html