• 三狮军团首秀 只有两千多球迷观战 2019-05-19
  • 人民网2017呼和浩特徒步迎新活动--内蒙古频道--人民网 2019-05-19
  • 【品牌资讯】环球网斩获“全国行业新闻网站传播力2017年6月榜”多项冠军 2019-05-15
  • 深化对经济工作主线的认识 从供需关系看供给侧结构性改革 2019-05-15
  • 格拉斯哥艺术学院起火 4年前曾遭火灾仍在整修 2019-05-14
  • 回复@地瓜干17世:猪临死才会嚎叫呢~ 2019-05-14
  • 婺源古村溪中发现鹰嘴龟 2019-05-08
  • 编辑评测:高夫净源控油平衡露 极速补水长效控油 2019-05-08
  • 四部门发文规范特色小镇建设防止“新瓶装旧酒” 2019-05-02
  • 【地球的盛会文明的聚会艺术的盛宴四海一家足球为人类和平幸福而荣耀!!!普京是当今人类世界最优秀的一代伟人俄罗斯赢啦!!!】 2019-04-29
  • 学习新思想,千万师生同上一堂课 2019-04-28
  • 你这种个体户都干不了的老蚕也配谈计划?真是笑死人不偿命哦? 2019-04-23
  • 感人!的哥带着患病父亲出车 孝心感动乘客 2019-04-23
  • 图解:习近平在纪念马克思诞辰200周年大会上讲话的16个金句 2019-04-16
  • 感触名家笔下的端午文化 吃香粽原来可以这样"文艺" 2019-04-16
  • 与其不如造句大全:每天学点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
    }

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

    相关文章

    最新评论

    常用在线小工具

  • 三狮军团首秀 只有两千多球迷观战 2019-05-19
  • 人民网2017呼和浩特徒步迎新活动--内蒙古频道--人民网 2019-05-19
  • 【品牌资讯】环球网斩获“全国行业新闻网站传播力2017年6月榜”多项冠军 2019-05-15
  • 深化对经济工作主线的认识 从供需关系看供给侧结构性改革 2019-05-15
  • 格拉斯哥艺术学院起火 4年前曾遭火灾仍在整修 2019-05-14
  • 回复@地瓜干17世:猪临死才会嚎叫呢~ 2019-05-14
  • 婺源古村溪中发现鹰嘴龟 2019-05-08
  • 编辑评测:高夫净源控油平衡露 极速补水长效控油 2019-05-08
  • 四部门发文规范特色小镇建设防止“新瓶装旧酒” 2019-05-02
  • 【地球的盛会文明的聚会艺术的盛宴四海一家足球为人类和平幸福而荣耀!!!普京是当今人类世界最优秀的一代伟人俄罗斯赢啦!!!】 2019-04-29
  • 学习新思想,千万师生同上一堂课 2019-04-28
  • 你这种个体户都干不了的老蚕也配谈计划?真是笑死人不偿命哦? 2019-04-23
  • 感人!的哥带着患病父亲出车 孝心感动乘客 2019-04-23
  • 图解:习近平在纪念马克思诞辰200周年大会上讲话的16个金句 2019-04-16
  • 感触名家笔下的端午文化 吃香粽原来可以这样"文艺" 2019-04-16
  • 麻将怎么玩 七乐彩走势图大星彩票走势图百度百度百度 北京pk10保罗软件计划 重庆欢乐生肖开奖时间 重庆时时彩可以发财吗 上海时时乐在线计划 人民币炸金花游戏 新疆时时彩开奖结果全部 十一运夺金最大遗漏数据 自己做彩票网站吗 北京pc28开奖结果 360老时时彩开奖号码走势图 幸运赛车玩法奖金表 郑州福彩幸运武林 北京赛车官网直播 中国竟彩首页胜平负