• Vue2.0 瞧一下vm.$mount()


    vm.$mount()不经常用,因为在我们实例化Vue的时候我们可以传入属性el: "#app",目的在于将实例挂载到DOM元素下,但如果不传el选项,就需要手动挂载,这个时候唯一的方法就是调用$mount()方法。

    就像在vue项目的main.js里我们经常会写到这样一句话:

    new Vue({

        xxxx

    }).$mount("#app");

    $mount()函数的表现在完整版和只包含运行时版本之间有差异,差异在于编译过程,也就是完整版会首先检查template或者el选项提供的模板是否已经转换为渲染函数,如果没有,就要先编译为渲染函数,再进入挂载流程。所以两个版本之间是包含关系。

    通过函数劫持方法,来拓展核心功能来实现完整版,首先判断$options上是否有render,如果没有,再取template选项,如果仍没有,再取el选项中的模板。之后通过compileToFunctions函数生成渲染函数赋值给options.render。这部分就是差异之处具体在做的事情。

    那么只包含运行时版本就涵盖了$mount方法的核心功能:

    Vue.prototype.$mount = function (

      el?: string | Element,

      hydrating?: boolean

    ): Component {

      el = el && inBrowser ? query(el) : undefined

      return mountComponent(this, el, hydrating)

    }

    mountComponent()首先还是会校验render,如果没有则会返回一个注释类型的VNode节点。

    export function mountComponent (

      vm: Component,

      el: ?Element,

      hydrating?: boolean

    ): Component {

      vm.$el = el

      if (!vm.$options.render) {

        vm.$options.render = createEmptyVNode

        if (process.env.NODE_ENV !== 'production') {

         // 一些警告

        }

      }

      callHook(vm, 'beforeMount')

      ......

      // we set this to vm._watcher inside the watcher's constructor

      // since the watcher's initial patch may call $forceUpdate (e.g. inside child

      // component's mounted hook), which relies on vm._watcher being already defined

      new Watcher(vm, updateComponent, noop, {

        before () {

          if (vm._isMounted && !vm._isDestroyed) {

            callHook(vm, 'beforeUpdate')

          }

        }

      }, true /* isRenderWatcher */)

      hydrating = false

      // manually mounted instance, call mounted on self

      // mounted is called for render-created child components in its inserted hook

      if (vm.$vnode == null) {

        vm._isMounted = true

        callHook(vm, 'mounted')

      }

      return vm

    }

    然后触发beforeMount钩子。这之后执行真正的挂载操作。vm._update(vm._render())就是调用渲染函数得到最新的虚拟树节点,然后通过_update方法和上一次的旧的VNode对比并更新DOM。new Watcher可以实现挂载的持续性,在这个过程中,每次有新的数据渲染更新,会触发beforeUpdate钩子。整个挂载完成之后,就会触发mounted钩子。

  • 相关阅读:
    C++ vector使用数组进行初始化
    python爬虫(3)
    SpringBoot打war包Tomcat部署——打jar包命令运行
    电脑msvcp140.dll丢失问题的三种解决方法分享,快速修复dll问题
    利用WebShell拿Shell技巧
    超简单 轮播图片 html css
    【lua】tolua(Luajit) require 重复加载了的问题(路径混用斜杠/和点.造成的问题)
    sam_out 应用到时序分类
    C++Primer第五版 第十四章习题答案(1~5)
    .NET开发工作效率提升利器 - CodeGeeX AI编程助手
  • 原文地址:https://blog.csdn.net/denglouhen/article/details/125524926