Vue响应式原理隐式响应

在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：