V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yantianqi
V2EX  ›  程序员

vue 渲染原理是什么?

  •  
  •   yantianqi · 2017-05-31 13:58:27 +08:00 · 5570 次点击
    这是一个创建于 2712 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    5 条回复    2017-06-01 08:51:23 +08:00
    meepo3927
        1
    meepo3927  
       2017-05-31 15:58:26 +08:00
    copperusher
        2
    copperusher  
       2017-05-31 17:25:32 +08:00
    用最简单的话来描述,就是用 MutationObserver 监控整个 DOM 树。在增加 DOM 结点时,创建对应的 Vue 组件;有事件发生时,调用 Vue 更新函数;在删除 DOM 结点时,销毁对应的 VUE 组件。
    abcbuzhiming
        3
    abcbuzhiming  
       2017-05-31 19:45:22 +08:00
    @copperusher 根据这个论点,有一个问题是想不通的,就是当 vue 完成挂载后,你不能使用其他方式去直接操作 Dom 树,哪怕你删掉一个 dom 节点,然后增加一个完全一模一样的 Dom 节点,这个 Dom 节点原本可以由 Vue 控制的联动行为就回不来了,所以我觉得 Vue 的虚拟 Dom 似乎有些其它门道,应该不是单单在监控真实的 Dom 树本身,否则的话,我删掉一个 Dom 节点,又加一个一模一样的上去,为啥这个 Dom 节点,Vue 就失去控制了
    Miy4mori
        4
    Miy4mori  
       2017-05-31 19:54:12 +08:00 via iPhone
    @abcbuzhiming vue 是 mvvm 框架,真实 dom 肯定是通过虚拟 dom 渲染的,你操作了真实 dom 应该就改变了 hash,影响了 diff 算法,所以会失去控制,以上都是我瞎猜的。
    funnyecho
        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 中了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   998 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 20:11 · PVG 04:11 · LAX 13:11 · JFK 16:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.