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：