• 贵州省社科规划办与贵州日报社合作推出“文化贵州”专栏 2019-03-20
  • 就算不为了世界杯,俄罗斯也有那么多时髦好去处值得你飞去 2019-03-20
  • 排三排五开奖结果:每天学点Vue源码之vm.$mount挂载函数

    山西体彩11选5直选遗漏 www.caxru.com  更新时间:2019年03月11日 08:34:55   作者:小诺哥   我要评论

    这篇文章主要介绍了vm.$mount挂载函数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    在vue实例中,通过$mount()实现实例的挂载,下面来分析一下$mount()函数都实现了什么功能。

    $mount函数执行位置

    _init这个私有方法是在执行initMixin时候绑定到Vue原型上的。

     

    $mount函数是如如何把组件挂在到指定元素

    $mount函数定义位置

    $mount函数定义位置有两个:

    第一个是在src/platforms/web/runtime/index.js

    这里的$mount是一个public mount method。之所以这么说是因为Vue有很多构建版本, 有些版本会依赖此方法进行有些功能定制, 后续会解释。

    // public mount method
    // el: 可以是一个字符串或者Dom元素
    // hydrating 是Virtual DOM 的补丁算法参数
    Vue.prototype.$mount = function (
     el?: string | Element,
     hydrating?: boolean
    ): Component {
     // 判断el, 以及宿主环境, 然后通过工具函数query重写el。
     el = el && inBrowser ? query(el) : undefined
     // 执行真正的挂载并返回
     return mountComponent(this, el, hydrating)
    }

    src/platforms/web/runtime/index.js 文件是运行时版 Vue 的入口文件,所以这个方法是运行时版本Vue执行的$mount。

    关于Vue不同构建版本可以看 Vue对不同构建版本的解释 。

    关于这个作者封装的工具函数query也可以学习下:

    /**
     * Query an element selector if it's not an element already.
     */
    export function query (el: string | Element): Element {
     if (typeof el === 'string') {
      const selected = document.querySelector(el)
      if (!selected) {
       // 开发环境下给出错误提示
       process.env.NODE_ENV !== 'production' && warn(
        'Cannot find element: ' + el
       )
       // 没有找到的情况下容错处理
       return document.createElement('div')
      }
      return selected
     } else {
      return el
     }
    }

    第二个定义 $mount 函数的地方是src/platforms/web/entry-runtime-with-compiler.js 文件,这个文件是完整版Vue(运行时+编译器)的入口文件。

    关于运行时与编译器不清楚的童鞋可以看官网 运行时 + 编译器 vs. 只包含运行时 。

    // 缓存运行时候定义的公共$mount方法
    const mount = Vue.prototype.$mount
    Vue.prototype.$mount = function (
     el?: string | Element,
     hydrating?: boolean
    ): Component {
     // 通过query方法重写el(挂载点: 组件挂载的占位符)
     el = el && query(el)
    
     /* istanbul ignore if */
     // 提示不能把body/html作为挂载点, 开发环境下给出错误提示
     // 因为挂载点是会被组件模板自身替换点, 显然body/html不能被替换
     if (el === document.body || el === document.documentElement) {
      process.env.NODE_ENV !== 'production' && warn(
       `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
      )
      return this
     }
     // $options是在new Vue(options)时候_init方法内执行.
     // $options可以访问到options的所有属性如data, filter, components, directives等
     const options = this.$options
     // resolve template/el and convert to render function
     
     // 如果包含render函数则执行跳出,直接执行运行时版本的$mount方法
     if (!options.render) {
      // 没有render函数时候优先考虑template属性
      let template = options.template
      if (template) {
       // template存在且template的类型是字符串
       if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
         // template是ID
         template = idToTemplate(template)
         /* istanbul ignore if */
         if (process.env.NODE_ENV !== 'production' && !template) {
          warn(
           `Template element not found or is empty: ${options.template}`,
           this
          )
         }
        }
       } else if (template.nodeType) {
        // template 的类型是元素节点,则使用该元素的 innerHTML 作为模板
        template = template.innerHTML
       } else {
        // 若 template既不是字符串又不是元素节点,那么在开发环境会提示开发者传递的 template 选项无效
        if (process.env.NODE_ENV !== 'production') {
         warn('invalid template option:' + template, this)
        }
        return this
       }
      } else if (el) {
       // 如果template选项不存在,那么使用el元素的outerHTML 作为模板内容
       template = getOuterHTML(el)
      }
      // template: 存储着最终用来生成渲染函数的字符串
      if (template) {
       /* istanbul ignore if */
       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
       }
       // 获取转换后的render函数与staticRenderFns,并挂在$options上
       const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
       }, this)
       options.render = render
       options.staticRenderFns = staticRenderFns
    
       /* istanbul ignore if */
       // 用来统计编译器性能, config是全局配置对象
       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
       }
      }
     }
     // 调用之前说的公共mount方法
     // 重写$mount方法是为了添加模板编译的功能
     return mount.call(this, el, hydrating)
    }

    关于idToTemplate方法: 通过query获取该ID获取DOM并把该元素的innerHTML 作为模板

    const idToTemplate = cached(id => {
     const el = query(id)
     return el && el.innerHTML
    })
    

    getOuterHTML方法:

    /**
     * Get outerHTML of elements, taking care
     * of SVG elements in IE as well.
     */
    function getOuterHTML (el: Element): string {
     if (el.outerHTML) {
      return el.outerHTML
     } else {
      // fix IE9-11 中 SVG 标签元素是没有 innerHTML 和 outerHTML 这两个属性
      const container = document.createElement('div')
      container.appendChild(el.cloneNode(true))
      return container.innerHTML
     }
    }

    关于compileToFunctions函数, 在src/platforms/web/entry-runtime-with-compiler.js中可以看到会挂载到Vue上作为一个全局方法。

     

    mountComponent方法: 真正执行绑定组件

    mountComponent函数中是出现在src/core/instance/lifecycle.js。

    export function mountComponent (
     vm: Component, // 组件实例vm
     el: ?Element, // 挂载点
     hydrating?: boolean
    ): Component {
     // 在组件实例对象上添加$el属性
     // $el的值是组件模板根元素的引用
     vm.$el = el
     if (!vm.$options.render) {
      // 渲染函数不存在, 这时将会创建一个空的vnode对象
      vm.$options.render = createEmptyVNode
      if (process.env.NODE_ENV !== 'production') {
       /* istanbul ignore if */
       if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
        vm.$options.el || el) {
        warn(
         'You are using the runtime-only build of Vue where the template ' +
         'compiler is not available. Either pre-compile the templates into ' +
         'render functions, or use the compiler-included build.',
         vm
        )
       } else {
        warn(
         'Failed to mount component: template or render function not defined.',
         vm
        )
       }
      }
     }
     // 触发 beforeMount 生命周期钩子
     callHook(vm, 'beforeMount')
    
     // vm._render 函数的作用是调用 vm.$options.render 函数并返回生成的虚拟节点(vnode)。template => render => vnode
     
     // vm._update 函数的作用是把 vm._render 函数生成的虚拟节点渲染成真正的 DOM。 vnode => real dom node
     
     let updateComponent // 把渲染函数生成的虚拟DOM渲染成真正的DOM
     /* istanbul ignore if */
     if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      updateComponent = () => {
       const name = vm._name
       const id = vm._uid
       const startTag = `vue-perf-start:${id}`
       const endTag = `vue-perf-end:${id}`
    
       mark(startTag)
       const vnode = vm._render()
       mark(endTag)
       measure(`vue ${name} render`, startTag, endTag)
    
       mark(startTag)
       vm._update(vnode, hydrating)
       mark(endTag)
       measure(`vue ${name} patch`, startTag, endTag)
      }
     } else {
      updateComponent = () => {
       vm._update(vm._render(), hydrating)
      }
     }
    
     // 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
     // 创建一个Render函数的观察者, 关于watcher后续再讲述.
     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
    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    相关文章

    • Vue 中批量下载文件并打包的示例代码

      Vue 中批量下载文件并打包的示例代码

      本篇文章主要介绍了Vue 中批量下载文件并打包的示例代码,用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件,有兴趣的可以了解一下
      2017-11-11
    • Vue shopCart 组件开发详解

      Vue shopCart 组件开发详解

      这篇文章主要介绍了Vue shopCart 组件开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2018-01-01
    • vue自定义移动端touch事件之点击、滑动、长按事件

      vue自定义移动端touch事件之点击、滑动、长按事件

      这篇文章主要介绍了vue自定义移动端touch事件之点击、滑动、长按事件的实例代码,需要的朋友可以参考下
      2018-07-07
    • vue开发环境配置跨域的方法步骤

      vue开发环境配置跨域的方法步骤

      本文介绍了使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2019-01-01
    • 详解Vue2.0之去掉组件click事件的native修饰

      详解Vue2.0之去掉组件click事件的native修饰

      这篇文章主要介绍了详解Vue2.0之去掉组件click事件的native修饰,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2017-04-04
    • vue插件draggable实现拖拽移动图片顺序

      vue插件draggable实现拖拽移动图片顺序

      这篇文章主要为大家详细介绍了vue插件draggable实现拖拽移动图片顺序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
      2018-12-12
    • Vue.js 2.0中select级联下拉框实例

      Vue.js 2.0中select级联下拉框实例

      在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用,需要的朋友可以参考下
      2017-03-03
    • 详解vue2.0+axios+mock+axios-mock+adapter实现登陆

      详解vue2.0+axios+mock+axios-mock+adapter实现登陆

      这篇文章主要介绍了详解vue2.0+axios+mock+axios-mock+adapter实现登陆,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2018-07-07
    • vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀

      vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀

      这篇文章主要介绍了vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀的相关知识,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
      2018-06-06
    • vue基于mint-ui的城市选择3级联动的示例

      vue基于mint-ui的城市选择3级联动的示例

      本篇文章主要介绍了vue基于mint-ui的城市选择3级联动的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2017-10-10

    最新评论

  • 贵州省社科规划办与贵州日报社合作推出“文化贵州”专栏 2019-03-20
  • 就算不为了世界杯,俄罗斯也有那么多时髦好去处值得你飞去 2019-03-20