vue 渲染原理是什么？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2731 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

Vue

渲染

destroyed

页面

5 条回复 • 2017-06-01 08:51:23 +08:00

meepo3927

2017-05-31 15:58:26 +08:00

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

copperusher

2017-05-31 17:25:32 +08:00

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

abcbuzhiming

2017-05-31 19:45:22 +08:00

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

Miy4mori

2017-05-31 19:54:12 +08:00 via iPhone

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

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