Vue响应式原理隐式响应

87次阅读

共计 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：

正文完