vue 渲染原理是什么？

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 3455 days ago, the information mentioned may be changed or developed.

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

Vue

渲染

destroyed

页面

5 replies • 2017-06-01 08:51:23 +08:00

meepo3927

May 31, 2017

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

copperusher

May 31, 2017

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

abcbuzhiming

May 31, 2017

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

Miy4mori

May 31, 2017 via iPhone

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

funnyecho

Jun 1, 2017

门道也不复杂。

我简单的理解是：

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

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