从 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 中了。 |