vue 渲染原理是什么？

[yantianqi]

从 new Vue 到最后 destroyed 页面
是怎么运行的，页面是怎么进行渲染的？
谢谢大神了

[meepo3927]

官方文档：
https://cn.vuejs.org/v2/guide/reactivity.html

[copperusher]

用最简单的话来描述，就是用 MutationObserver 监控整个 DOM 树。在增加 DOM 结点时，创建对应的 Vue 组件；有事件发生时，调用 Vue 更新函数；在删除 DOM 结点时，销毁对应的 VUE 组件。

[abcbuzhiming]

@copperusher 根据这个论点，有一个问题是想不通的，就是当 vue 完成挂载后，你不能使用其他方式去直接操作 Dom 树，哪怕你删掉一个 dom 节点，然后增加一个完全一模一样的 Dom 节点，这个 Dom 节点原本可以由 Vue 控制的联动行为就回不来了，所以我觉得 Vue 的虚拟 Dom 似乎有些其它门道，应该不是单单在监控真实的 Dom 树本身，否则的话，我删掉一个 Dom 节点，又加一个一模一样的上去，为啥这个 Dom 节点，Vue 就失去控制了

[Miy4mori]

@abcbuzhiming vue 是 mvvm 框架，真实 dom 肯定是通过虚拟 dom 渲染的，你操作了真实 dom 应该就改变了 hash，影响了 diff 算法，所以会失去控制，以上都是我瞎猜的。

[funnyecho]

门道也不复杂。

我简单的理解是：

Vue 做 diff 是基于 vnode tree 而不是真是的 dom 节点，diff 结果再 patch 到 dom 节点上。

而每个节点在 mount 到 document 前都已经被 vnode.elm 引用了，所以，即使你删掉 dom 节点，该对象还是在 js 内存中，所以，往后的 diff patch 都会作用到这个只存在与内存中的 node 对象而不会反映到真实的 dom tree 中了。