Vue.js运行机制全局概览

作者: 李友胜 | 来源:发表于2019-10-23 21:12 被阅读0次
    先上一张vue内部流程图,然后我们来逐个分析里面的具体模块和流程:
    vue内部流程图.png

    初始化及挂载

    1.png
    new Vue() 之后,Vue会调用_init函数进行初始化,也就是图中的init过程,它会初始化生命周期、事件、props、methods、data、computed与watch等。其中最重要的就是通过Object.defineProperty设置settergetter函数,用来实现响应式以及收集依赖。
    初始化之后调用$mount会挂载组件,如果是运行时编译,即不存在render function但是存在template的情况,需要进行编译步骤。

    编译

    2.png
    compile编译可以分成parseoptimizegenerate三个阶段,最终需要得到render function。

    parse 会用正则等干事解析template模板中的指令、class、style等数据,形成AST。

    optimize的主要作用是标记static静态节点,这是Vue在编译过程中的一处优化,后面当update更新界面时,会有一个patch的过程,diff算法会直接跳过静态节点,从而减少了比较的过程,优化了patch的性能。

    generate 是将AST转化为render function字符串的过程,得到的结果是render的字符串以及staticRenderFns字符串。

    在经历过parseoptimizegenerate三个阶段后,组件就会存在渲染VNode所需的render function了。

    响应式

    接下来就是Vue.js响应式的核心部分。

    3.png
    这里的settergetter之前就介绍了,在init的时候通过Object.defineProperty进行绑定,他使得当被设置的对象被读取的时候回执行getter函数,在被赋值的对象修改的时候回执行setter函数。
    当render function被渲染的时候,因为会读取所需对象的值,所以会触发getter函数进行依赖收集,依赖收集的目的是将观察者Watcher对象放到当前闭包中的订阅者Dep的subs中,形成如下所示的一个关系。 5.png
    在修改对象的值得时候,会触发对应得settersetter通知之前依赖收集得到的Dep中的每一个Watcher,告诉它们自己的值改变了,需要重新渲染视图,这时候这些Watcher就会调用update来更新视图,当然这中间还有一个patch的过程以及使用队列来异步更新的策略。

    Virtual DOM

    render function会别转化为VNode节点。Virtural DOM其实就是一个普通的JavaScript对象(VNode节点)作为基础的树,用对象属性来描述节点,实际上他只是一层对真实DOM的抽象。最终可以通过一系列操作来使这棵树映射到真实的环境上。由于Virtual DOM是以JavaScript对象为基础而不依赖真实的平台环境,所以使他有了跨平台的能力,比如说浏览器、Weex、Node等。
    比如下面这个例子:

    {
        tag: 'div'
        children: [
            {
                tag: 'a',
                text: 'click me'
            }
        ]
    }
    

    渲染后可以得到:

    <div>
        <a>click me</a>
    </div>
    

    这只是一个简单的例子,实际上节点有更多的属性来标记节点,比如isStatic(代表是否为静态节点)、isComment(代表是否为注释节点)等。

    更新视图

    4.png
    前面我们说到,在修改一个对象的值时候,会通过setter => Watcher => update的流程来修改对应视图,那么最终是如何更新视图的呢?
    当数据变化时,执行render function就可以得到一个新的VNode节点,我们如果想得到新的视图,简单的变化时直接解析这个新的VNode,然后全部渲染到真实DOM中,但是如果只对其中一小部分内容作了修改,未免真个代价太大。
    这时候我们就需要用到patch ,通过比较只修改这些有差异的DOM即可,为什么不直接对比DOM而是对弈Virtual DOM,因为DOM的对应性能远远大于直接对比JS对象。

    相关文章

      网友评论

        本文标题:Vue.js运行机制全局概览

        本文链接:https://www.haomeiwen.com/subject/zotlvctx.html