共计 458 个字符,预计需要花费 2 分钟才能阅读完成。
在 Vue 开发的时候,data 初始化一个对象没有定义任何属性,经过变量赋值的之后,不需要 $set 方法,该对象下面的属性就也能变成响应式属性
问题
替换方式新增属性:
能够看到赋值的方式的两个属性被 Vue 处理成响应式,都有了 get,set 修饰符
赋值方式新增属性:
可以 test3, test4 没有 get,set 修饰符
这就导致了修改 test1,test2 的属性可以触发视图的更新,而修改 test3, test4 的属性没有触发视图的更新
接下来看看 Vue 的内部是怎么处理的:
<script>
let vm = new Vue({
el: '#app',
data: {form: {},
},
mounted() {
this.form = {
test1: 1,
test2: 2
}
this.form.test3 = 3
this.form.test4 = 4
console.log(this.form)
}
})
</script>
以上代码为例:
1:vue 在初始化的时候,对 data 定义的属性就行递归响应式处理,由于只定义 form, 所以 form 就有了 get,set 修饰符(这一点很重要)
2:
正文完
发表至: javascript
2020-06-19