Vue监听对象属性失效原因分析及dom渲染问题出现分析

首先得明确，数据监听是vue在创建实例时通过Object.defineproperty方法进行监听。当vue实例创建以后，自己手动通过obj.b = 10的方式新增对象属性是不会通过defineproperty方法定义监听，因此是不会被监听到的，就不会引起视图重新渲染

接下来我们对一段有趣的代码进行分析：
Html:

Data数据：

Test方法：

执行点击后结果：

既然this.obj.flag定义属性方法会失效，为什么这里的flag属性会被渲染到dom上呢？
其实通过this.obj.flag虽然并不会引起视图的重新渲染，但是这个属性其实是被添加上去了。而通过this.$set方法去定义属性时是可以被监听到的，就会引起视图的重新渲染，此时就会顺便把之前改变了数据但是没有被渲染的flag属性一起渲染上。
那么我们把两句代码的位置换一下结果会不会符合我们的预期呢？

然而结果还是和之前一样。
结果分析： dom渲染是异步渲染，它会等待同步任务执行完之后再执行，所以等视图进行更新的时候flag属性已经被添加上了，就会被一起渲染上。实际上视图更新会等待同步任务之后，宏任务执行，微任务执行队列被执行清空之后再进行渲染。而这样做是因为vue的虚拟dom机制。