美文网首页
Vue实例挂载过程($mount)

Vue实例挂载过程($mount)

作者: JLong | 来源:发表于2022-02-17 20:53 被阅读0次

    Vue中我们通过$mount实例方法挂载vm,$mount方法在多个地方有定义,因为vue可以跨平台例如weex进行开发;主要了解在web这边的vue.js,compiler解析版本的$mount实现。

    src/platform/web/entry-runtime-with-compiler.js

    主要流程:

    1. 缓存原型上的$mount方法,再重新定义该方法
    2. 对el做限制,Vue不能挂载在body、html这样的根节点
    3. 关键步骤:如果没有render方法,则会把el或者template都转成render方法,最终无论.vue文件开发组件或者el、template属性,都会转成render方法。这个过程叫做“在线编译”,通过调用compilerToFunctions方法实现。
    4. 最后调用原先缓存的$mount挂载

    Vue.prototype.$mount位于src/platform/web/runtime/index.js

    这样设计为了通用,在runtime only的时候能够使用

    $mount方法实际上调用了mountComponent方法,这个方法定义在src/core/instance/lifecycle.js文件中

    核心流程

    1. 实例化一个渲染Watcher
    2. 在Watcher回调函数中调用updateComponent()方法
    3. 在updateComponent()方法中调用vm._render方法生成虚拟Node,最终调用vm._update更新DOM

    Watcher的作用

    当初始化或者vm实例中监测数据发生变化时候都会执行回调函数updateComponent()更新DOM

    判断是否挂载的依据

    函数最后根据根节点上vm._isMounted是否为true,判断实例是否挂载
    根节点:vm.$vnode表示vm实例的父虚拟节点,为null即为根节点。

    相关文章

      网友评论

          本文标题:Vue实例挂载过程($mount)

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