这是一个创建于 2760 天前的主题，其中的信息可能已经有所发展或是发生改变。
从 new Vue 到最后 destroyed 页面
是怎么运行的，页面是怎么进行渲染的？
谢谢大神了
 |
1
meepo3927 2017-05-31 15:58:26 +08:00
|
 |
2
copperusher 2017-05-31 17:25:32 +08:00
用最简单的话来描述，就是用 MutationObserver 监控整个 DOM 树。在增加 DOM 结点时，创建对应的 Vue 组件；有事件发生时，调用 Vue 更新函数；在删除 DOM 结点时，销毁对应的 VUE 组件。
|
 |
3
abcbuzhiming 2017-05-31 19:45:22 +08:00
@copperusher 根据这个论点，有一个问题是想不通的，就是当 vue 完成挂载后，你不能使用其他方式去直接操作 Dom 树，哪怕你删掉一个 dom 节点，然后增加一个完全一模一样的 Dom 节点，这个 Dom 节点原本可以由 Vue 控制的联动行为就回不来了，所以我觉得 Vue 的虚拟 Dom 似乎有些其它门道，应该不是单单在监控真实的 Dom 树本身，否则的话，我删掉一个 Dom 节点，又加一个一模一样的上去，为啥这个 Dom 节点，Vue 就失去控制了
|
 |
4
Miy4mori 2017-05-31 19:54:12 +08:00 via iPhone
@abcbuzhiming vue 是 mvvm 框架，真实 dom 肯定是通过虚拟 dom 渲染的，你操作了真实 dom 应该就改变了 hash，影响了 diff 算法，所以会失去控制，以上都是我瞎猜的。
|
 |
5
funnyecho 2017-06-01 08:51:23 +08:00
门道也不复杂。
我简单的理解是： Vue 做 diff 是基于 vnode tree 而不是真是的 dom 节点，diff 结果再 patch 到 dom 节点上。 而每个节点在 mount 到 document 前都已经被 vnode.elm 引用了，所以，即使你删掉 dom 节点，该对象还是在 js 内存中，所以，往后的 diff patch 都会作用到这个只存在与内存中的 node 对象而不会反映到真实的 dom tree 中了。 |
Select Language