最近又遇到了一个问题，其实也不是什么太难的技术，就是在业务中开发中遇到的简单的数据处理问题，由而想起来一些知识点，所以就记录下来吧，也有助于以后的知识回顾。
前些日子的时候，我在处理接口数据绘制页面的时候，给在data中声明的一个Object动态增加了一个属性，并给属性赋值，然后发现这个新属性对应的DOM怎么也出不来，后来突然想到动态属性在Vue2和Vue3的不同，才顺利解决了。
想解决动态给Object增加某个属性，但是DOM不会显示相关组件这个问题，首先我们需要了解Vue渲染的底层原理。
Vue 渲染组件的底层原理是什么？
Vue先通过Object.defineProperty 的set/get进行信息拦截，然后通过setter触发通知watcher；watcher保存着该property相关联的所有组件信息，在接收到通知后，watcher会通知所有相关联的组件进行重新渲染；渲染的时候先创建新的虚拟DOM Tree即虚拟节点，然后再与旧的虚拟DOM进行对比，通过对比后将改变作为一个补丁，以最小的代价更新到真实DOM上，实现DOM的复用和最高效率的更新。
DOM不能更新的原因是什么？
明白了DOM更新的底层原理，那我们也就能猜测到为什么动态给Object增加某个属性，DOM没更新的原因了。在Vue2中，如果这个Object的属性没有在data中声明过，那么这个属性不会有get/set方法，也就没法进行信息拦截，拦截不到信息的更改，也就没办法通知watcher来进行组件渲染，所以相关联组件也就渲染不出来。那有什么办法可以解决这个问题呢，可以采用Vue.set(对象，属性，true)的方法来解决。
在Vue3中我们不需要做额外处理，因为Vue3本身就处理了这种动态增加属性的情况，支持这种动态增加属性的信息拦截。
一切问题的解决都需要理论的支持
由这种小问题也能引发我们一些思考，很多的小问题的解决都是需要坚实的基础原理来支持的，只有真正的了解底层的原理，才能迅速排查出所出现问题的原因是什么，也才能更好的找到解决方法。
