VUE源码学习第六篇--new Vue都干了啥(挂载)

一、总述

  如果说前面的几部分都是准备工作,那么从挂载开始,就进入了正式的渲染工作,直到页面呈现出来。在开始分析代码前,我们可以思考下应该要做哪些工作。

1、将template中的各变量,表达式等替换成实际的值。比如:

 
  • {{item.id}}
.. var vm = new Vue({ el:"#app", data:{ items:[ {id:1}, {id:2}, {id:3} ] } })

替换后,形成实际的dom,并渲染出来

  • 1
  • 2
  • 3

2、建立一种更新机制,当数据更新后,dom也重新渲染。比如items数组更新后,dome也随之更新。

实际上,vue也是围绕这两点展开的,下面是mount的过程的示意图。

(1)html字符串提取,无论是el还是template,最后都提取html的字符串。

(2)编译,将html得字符串编译成AST抽象数,再拼接成render表达式。

(3)形成真实的dom,render转化为vnode,最终生成实际的dom,并增加更新的监听。

下面我们就从源码分析,这部分涉及到的内容和知识点较多,有些内容我们会放到后面作为专门的章节进行介绍。

二、编译时的$mount

    Vue中$mount定义出现在两个文件中,分别是src/platform/web/entry-runtime-with-compiler.js、src/platform/web/runtime/index.js,前一个文件中,会将普通的template字符串转化成render语法,然后再调用后一个文件中的mount,完成dom的呈现。也就是在entry-runtime-with-compiler.js实现了编译的过程,如果我们采用的render语法编写的,那么只需要调用运行时的mount,这样可以节省编译的时间。但是实际开发中,vue是推荐用template模式的,毕竟可读性会更好。

我们看下entry-runtime-with-compiler.js的$mount

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  //根据id获取dom元素
  el = el && query(el)

  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to  or  - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
  //1、根据template/el,获取html的字符串
  if (!options.render) {
    //获取template
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          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 = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
     //2、编译,生成render
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }
      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  //3、调用runtime的mount
  return mount.call(this, el, hydrating)
}

这个方法主要实现了

1、根据el或者template,获取到html的字符串,比如上面的例子,获取到的内容:

"


 

       

  •       {{item.id}}
       

  •  

"

2、将字符串转成render函数表达式,render的表达式我们前面也介绍过,熟悉react的同学对这个应该不陌生。这个过程涉及到编译,我们接下来有专门的章节去分析。最终转化后的render函数:

f() {
with(this){return _c('div',{attrs:{"id":"app"}},[_c('ul',_l((items),function(item){return _c('li',[_v("\n      "+_s(item.id)+"\n    ")])}))])}
}

3、调用runtime/index.js中的mount定义,继续后面的流程。

四、运行时的mount

将template(或者el指向的外部HTML)编译完成,转化成render函数后,运行时的moun负责真正的挂载过程。它将render表达式转化成vnode,最终创建真实的dom节点。

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

   mount的入参有两个, 第一个是 el,它表示挂载的元素,可以是字符串,也可以是 DOM 对象,如果是字符串在浏览器环境下会调用 query 方法转换成 DOM 对象的。第二个参数是和服务端渲染相关,在浏览器环境下我们不需要传第二个参数。

返回了mountComponent方法。

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') {
      /* 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
        )
      }
    }
  }
  //1、挂载前,执行beforMount
  callHook(vm, 'beforeMount')

  let updateComponent
  /* 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 {
    //2、定义updateComponent,vm._render将render表达式转化为vnode,vm._update将vnode渲染成实际的dom节点
    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
  //3、首次渲染,并监听数据变化,并实现dom的更新
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        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
  //4、挂载完成,回调mount函数
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

这里展示了完整的挂载过程。

1、执行beforeMount回调方法。此时el已经赋值给vm.$el。以VUE源码学习第三篇--new Vue都干了啥(概述)的样例为例,el已经有值了。

 beforeMount(){
    console.log("beforeMount");
     console.log("this el:"+this.$el);//[object HTMLDivElement]
     console.log("this data:"+this.$data);//[object Object]
     console.log("this msg:"+this.msg);//tttt
   }

2、定义updateComponent方法,vm._render,实现将render表达式转化成vnode,vm._update将vnode渲染成实际的dom。

3、构建watcher实例,它有两个作用,

(1)执行updateComponent方法,实现dom的渲染,并完成表达式对属性变量的依赖收集。

  (2)一旦包含的表达式中的属性变量有变化,将重新执行update。

关于watcher部分,将在后续的响应式原理中分析,当前阶段仅做了解。

4、判断是否是根节点,执行挂载完成的回调方法。

接下来我们重点讲下render和update过程。

五、vm._render

该方法是将render表达式转化为vnode,首先我们看看什么是vnode,vnode位于core/vdom/vnode.js中,定义如下:

export default class VNode {
  tag: string | void;
  data: VNodeData | void;
  children: ?Array;
  text: string | void;
  elm: Node | void;
  ns: string | void;
  context: Component | void; // rendered in this component's scope
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void; // component instance
  parent: VNode | void; // component placeholder node

  // strictly internal
  raw: boolean; // contains raw HTML? (server only)
  isStatic: boolean; // hoisted static node
  isRootInsert: boolean; // necessary for enter transition check
  isComment: boolean; // empty comment placeholder?
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?
  asyncFactory: Function | void; // async component factory function
  asyncMeta: Object | void;
  isAsyncPlaceholder: boolean;
  ssrContext: Object | void;
  fnContext: Component | void; // real context vm for functional nodes
  fnOptions: ?ComponentOptions; // for SSR caching
  fnScopeId: ?string; // functional scope id support

  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    /*当前节点的标签名*/
    this.tag = tag
    /*当前节点对应的对象,包含了具体的一些数据信息,是一个VNodeData类型,可以参考VNodeData类型中的数据信息*/
    this.data = data
    /*当前节点的子节点,是一个数组*/
    this.children = children
    /*当前节点的文本*/
    this.text = text
     /*当前虚拟节点对应的真实dom节点*/
    this.elm = elm
    /*当前节点的名字空间*/
    this.ns = undefined
    /*编译作用域*/
    this.context = context
    /*函数化组件作用域*/
    this.fnContext = undefined
    this.fnOptions = undefined
    this.fnScopeId = undefined
    /*节点的key属性,被当作节点的标志,用以优化*/
    this.key = data && data.key
    /*组件的option选项*/
    this.componentOptions = componentOptions
    /*当前节点对应的组件的实例*/
    this.componentInstance = undefined
     /*当前节点的父节点*/
    this.parent = undefined
    /*简而言之就是是否为原生HTML或只是普通文本,innerHTML的时候为true,textContent的时候为false*/
    this.raw = false
    /*静态节点标志*/
    this.isStatic = false
    /*是否作为跟节点插入*/
    this.isRootInsert = true
    /*是否为注释节点*/
    this.isComment = false
    /*是否为克隆节点*/
    this.isCloned = false
    /*是否有v-once指令*/
    this.isOnce = false
    /*异步组件的工厂方法*/
    this.asyncFactory = asyncFactory
    /*异步源*/
    this.asyncMeta = undefined
     /*是否异步的预赋值*/
    this.isAsyncPlaceholder = false
  }

  // DEPRECATED: alias for componentInstance for backwards compat.
  /* istanbul ignore next */
  get child (): Component | void {
    return this.componentInstance
  }
}

vnode就是一系列dom属性的集合,可以认为是简化了的dom。

vm._render位于src/core/instance/render.js,

  Vue.prototype._render = function (): VNode {
   ...
    try {
      //核心代码,生成vnode
      vnode = render.call(vm._renderProxy, vm.$createElement)
    } catch (e) {
      ...
    }
    // set parent
    vnode.parent = _parentVnode
    return vnode
  }

我们直接看核心代码,vm._renderProxy是执行的上下文,我们前面讲过,在生产环境中就是vm,如果对call函数不了解的,翻译成vm.render(vm.$createElement),可能更加易于理解。

参见本例中的render函数,调用的是vm._c创建各级的vnode,那么这个函数在哪定义的呢,前一章节讲到的initRender方法中

//定义._c方法,对template进行render处理的方法
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)

createElement位于src/core/vdom/create-element.js中

export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array {
   //处理data的入参,当没有data属性的情况下,这个参数表示的是children
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children
    children = data
    data = undefined
  }
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE
  }
  return _createElement(context, tag, data, children, normalizationType)
}

我们看到createElement是对_createElement的封装,处理不同的入参写法。继续看_createElement这个方法的代码

export function _createElement (
  context: Component,
  tag?: string | Class | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array {
  if (isDef(data) && isDef((data: any).__ob__)) {
    process.env.NODE_ENV !== 'production' && warn(
      `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
      'Always create fresh vnode data objects in each render!',
      context
    )
    return createEmptyVNode()
  }
  // object syntax in v-bind
  if (isDef(data) && isDef(data.is)) {
    tag = data.is
  }
  if (!tag) {
    // in case of component :is set to falsy value
    return createEmptyVNode()
  }
  // warn against non-primitive key
  if (process.env.NODE_ENV !== 'production' &&
    isDef(data) && isDef(data.key) && !isPrimitive(data.key)
  ) {
    if (!__WEEX__ || !('@binding' in data.key)) {
      warn(
        'Avoid using non-primitive value as key, ' +
        'use string/number value instead.',
        context
      )
    }
  }
  // support single function children as default scoped slot
  if (Array.isArray(children) &&
    typeof children[0] === 'function'
  ) {
    data = data || {}
    data.scopedSlots = { default: children[0] }
    children.length = 0
  }

  //1、规整childern子节点
  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }
  let vnode, ns
  //2、创建vnode
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      // unknown or unlisted namespaced elements
      // check at runtime because it may get assigned a namespace when its
      // parent normalizes children
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    // direct component options / constructor
    vnode = createComponent(tag, data, context, children)
  }
  if (Array.isArray(vnode)) {
    return vnode
  } else if (isDef(vnode)) {
    if (isDef(ns)) applyNS(vnode, ns)
    if (isDef(data)) registerDeepBindings(data)
    return vnode
  } else {
    return createEmptyVNode()
  }
}

    有5个入参,context表示上下文,即当前的组件对象,tag表示node的标签,data表示是组件的data数据,VNode类型,children表示当前的子节点,normalizationType表示子节点的规范类型,对于手写的render方法需要进行规整。

  该方法主要的包含两个功能,对children进行规整,以及创建vnode。

1、children规整

// 1. When the children contains components - because a functional component
// may return an Array instead of a single root. In this case, just a simple
// normalization is needed - if any child is an Array, we flatten the whole
// thing with Array.prototype.concat. It is guaranteed to be only 1-level deep
// because functional components already normalize their own children.
export function simpleNormalizeChildren (children: any) {
  for (let i = 0; i < children.length; i++) {
    if (Array.isArray(children[i])) {
      return Array.prototype.concat.apply([], children)
    }
  }
  return children
}

// 2. When the children contains constructs that always generated nested Arrays,
// e.g.