Vue實例要怎麼掛載？聊聊實例掛載的過程-Vue.js-PHP中文網

一、思考

二、分析

三、结论

首頁

web前端

Vue.js

Vue實例要怎麼掛載？聊聊實例掛載的過程

青灯夜游

Jan 07, 2022 pm 07:33 PM

Vue實例要怎麼掛載？以下這篇文章帶大家了解一下Vue實例掛載的過程，希望對大家有幫助。

Vue實例要怎麼掛載？聊聊實例掛載的過程

Vue2目前已經出現在大眾視野中非常久了，甚至Vue3都已經開始投入使用，所有大家對於Vue2的掌握程度要逐步加深，即使不想面對大廠，也要試著到達源碼級的。 Vue實例的掛載過程是一個面試中高頻出現的考點，今天帶著大家根據原始碼一步步探析！（學習影片分享：vuejs教學）

一、思考

我們都聽過知其然知其所以然這句話。

那麼不知道大家是否有思考過new Vue()這個過程中究竟做了些什麼？

過程中是如何完成資料的綁定，又是如何將資料渲染到視圖的等等。

二、分析

首先找到Vue的建構子

原始碼位置: src/core/instance /index.js

function Vue (options) {
  if (process.env.NODE_ENV !== &#39;production&#39; &&
    !(this instanceof Vue)
  ) {
    warn(&#39;Vue is a constructor and should be called with the `new` keyword&#39;)
  }
  this._init(options)
}

登入後複製

options是使用者傳遞過來的設定項，如data、methods等常用的方法。

Vue建構函式呼叫_init方法，但我們發現本檔案中並沒有此方法，但仔細可以看到檔案下方定義了許多初始化方法。

initMixin(Vue);     // 定义 _init
stateMixin(Vue);    // 定义 $set $get $delete $watch 等
eventsMixin(Vue);   // 定义事件  $on  $once $off $emit
lifecycleMixin(Vue);// 定义 _update  $forceUpdate  $destroy
renderMixin(Vue);   // 定义 _render 返回虚拟dom

登入後複製

首先可以看到initMixin方法，發現該方法在Vue原型上定義了_init方法。

原始碼位置： src/core/instance/init.js

Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++
    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== &#39;production&#39; && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    // a flag to avoid this being observed
    vm._isVue = true
    // merge options
    // 合并属性，判断初始化的是否是组件，这里合并主要是 mixins 或 extends 的方法
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else { // 合并vue属性
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== &#39;production&#39;) {
      // 初始化proxy拦截器
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    // 初始化组件生命周期标志位
    initLifecycle(vm)
    // 初始化组件事件侦听
    initEvents(vm)
    // 初始化渲染方法
    initRender(vm)
    callHook(vm, &#39;beforeCreate&#39;)
    // 初始化依赖注入内容，在初始化data、props之前
    initInjections(vm) // resolve injections before data/props
    // 初始化props/data/method/watch/methods
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, &#39;created&#39;)

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== &#39;production&#39; && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }
    // 挂载元素
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }

登入後複製

仔細閱讀上面的程式碼，我們得到以下的結論：

#在呼叫beforeCreate之前，資料初始化並未完成，像data、props這些屬性無法存取到
到了 created的時候，資料已經初始化完成，能夠存取到data、props這些屬性，但那時並未完成dom的掛載，因此無法存取到dom元素。
掛載方法是呼叫vm.$mount方法

#initState#方法是完成props/data/method/ watch/methods的初始化。

原始碼位置：src/core/instance/state.js

export function initState (vm: Component) {
  // 初始化组件的watcher列表
  vm._watchers = []
  const opts = vm.$options
  // 初始化props
  if (opts.props) initProps(vm, opts.props)
  // 初始化methods方法
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    // 初始化data  
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

登入後複製

我們在這裡主要看初始化data#的方法為 initData，它與initState在同一文件上

function initData (vm: Component) {
  let data = vm.$options.data
  // 获取到组件上的data
  data = vm._data = typeof data === &#39;function&#39;
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== &#39;production&#39; && warn(
      &#39;data functions should return an object:\n&#39; +
      &#39;https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function&#39;,
      vm
    )
  }
  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== &#39;production&#39;) {
      // 属性名不能与方法名重复
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    // 属性名不能与state名称重复
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== &#39;production&#39; && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) { // 验证key值的合法性
      // 将_data中的数据挂载到组件vm上,这样就可以通过this.xxx访问到组件上的数据
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  // 响应式监听data是数据的变化
  observe(data, true /* asRootData */)
}

登入後複製

仔細閱讀上面的程式碼，我們可以得到以下結論：

初始化順序：props、methods、data
data定義的時候可選擇函數形式或物件形式(元件只能為函數形式)

關於資料響應式在這裡就不展示詳細說明了上文提到掛載方法是呼叫vm.$mount方法

原始碼：

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  // 获取或查询元素
  el = el && query(el)

  /* istanbul ignore if */
  // vue 不允许直接挂载到body或页面文档上
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== &#39;production&#39; && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    let template = options.template
    // 存在template模板，解析vue模板文件
    if (template) {
      if (typeof template === &#39;string&#39;) {
        if (template.charAt(0) === &#39;#&#39;) {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== &#39;production&#39; && !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 !== &#39;production&#39;) {
          warn(&#39;invalid template option:&#39; + template, this)
        }
        return this
      }
    } else if (el) {
      // 通过选择器获取元素内容
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== &#39;production&#39; && config.performance && mark) {
        mark(&#39;compile&#39;)
      }
      /**
       *  1.将temmplate解析ast tree
       *  2.将ast tree转换成render语法字符串
       *  3.生成render方法
       */
      const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== &#39;production&#39;,
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== &#39;production&#39; && config.performance && mark) {
        mark(&#39;compile end&#39;)
        measure(`vue ${this._name} compile`, &#39;compile&#39;, &#39;compile end&#39;)
      }
    }
  }
  return mount.call(this, el, hydrating)
}

登入後複製

閱讀上面程式碼，我們可以得到以下結論：

不要將根元素放到body或html上
#可以在物件中定義template/render或直接使用template、el表示元素選擇器
最終都會解析成render函數，呼叫compileToFunctions，會將template解析成render函數

對template的解析步驟大致分為以下幾個步驟：

將html文件片段解析成ast描述子
將ast描述子解析成字串
render函數

產生

render函數，掛載到vm上後，會再呼叫mount方法

原始碼位置：

src/platforms/web/runtime/index.js

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

登入後複製

呼叫

mountComponent渲染元件

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  // 如果没有获取解析的render函数，则会抛出警告
  // render是解析模板文件生成的
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
    if (process.env.NODE_ENV !== &#39;production&#39;) {
      /* istanbul ignore if */
      if ((vm.$options.template && vm.$options.template.charAt(0) !== &#39;#&#39;) ||
        vm.$options.el || el) {
        warn(
          &#39;You are using the runtime-only build of Vue where the template &#39; +
          &#39;compiler is not available. Either pre-compile the templates into &#39; +
          &#39;render functions, or use the compiler-included build.&#39;,
          vm
        )
      } else {
        // 没有获取到vue的模板文件
        warn(
          &#39;Failed to mount component: template or render function not defined.&#39;,
          vm
        )
      }
    }
  }
  // 执行beforeMount钩子
  callHook(vm, &#39;beforeMount&#39;)

  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== &#39;production&#39; && 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 = () => {
      // 实际调⽤是在lifeCycleMixin中定义的_update和renderMixin中定义的_render
      vm._update(vm._render(), hydrating)
    }
  }
  // we set this to vm._watcher inside the watcher&#39;s constructor
  // since the watcher&#39;s initial patch may call $forceUpdate (e.g. inside child
  // component&#39;s mounted hook), which relies on vm._watcher being already defined
  // 监听当前组件状态，当有数据变化时，更新组件
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        // 数据更新引发的组件更新
        callHook(vm, &#39;beforeUpdate&#39;)
      }
    }
  }, 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, &#39;mounted&#39;)
  }
  return vm
}

登入後複製

閱讀上面程式碼，我們得到以下結論：

beforeCreate鉤子
updateComponent渲染頁面檢視的方法
beforeUpdate生命鉤子

updateComponent方法主要執行在vue初始化時宣告的render, update方法

render的作用主要是產生vnode##源碼位置：

src/core/instance/render.js

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// 定义vue 原型上的render方法 Vue.prototype._render = function (): VNode { const vm: Component = this // render函数来自于组件的option const { render, _parentVnode } = vm.$options if (_parentVnode) { vm.$scopedSlots = normalizeScopedSlots( _parentVnode.data.scopedSlots, vm.$slots, vm.$scopedSlots ) } // set parent vnode. this allows render functions to have access // to the data on the placeholder node. vm.$vnode = _parentVnode // render self let vnode try { // There&#39;s no need to maintain a stack because all render fns are called // separately from one another. Nested component&#39;s render fns are called // when parent component is patched. currentRenderingInstance = vm // 调用render方法，自己的独特的render方法，传入createElement参数，生成vNode vnode = render.call(vm._renderProxy, vm.$createElement) } catch (e) { handleError(e, vm, `render`) // return error render result, // or previous vnode to prevent render error causing blank component /* istanbul ignore else */ if (process.env.NODE_ENV !== &#39;production&#39; && vm.$options.renderError) { try { vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e) } catch (e) { handleError(e, vm, `renderError`) vnode = vm._vnode } } else { vnode = vm._vnode } } finally { currentRenderingInstance = null } // if the returned array contains only a single node, allow it if (Array.isArray(vnode) && vnode.length === 1) { vnode = vnode[0] } // return empty vnode in case the render function errored out if (!(vnode instanceof VNode)) { if (process.env.NODE_ENV !== &#39;production&#39; && Array.isArray(vnode)) { warn( &#39;Multiple root nodes returned from render function. Render function &#39; + &#39;should return a single root node.&#39;, vm ) } vnode = createEmptyVNode() } // set parent vnode.parent = _parentVnode return vnode }</pre><div class="contentsignin">登入後複製</div></div>

#_update

主要功能是呼叫patch，將vnode轉成為真實DOM，並且更新到頁面中#原始碼位置：

src/core/instance/lifecycle.js

#<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) { const vm: Component = this const prevEl = vm.$el const prevVnode = vm._vnode // 设置当前激活的作用域 const restoreActiveInstance = setActiveInstance(vm) vm._vnode = vnode // Vue.prototype.__patch__ is injected in entry points // based on the rendering backend used. if (!prevVnode) { // initial render // 执行具体的挂载逻辑 vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */) } else { // updates vm.$el = vm.__patch__(prevVnode, vnode) } restoreActiveInstance() // update __vue__ reference if (prevEl) { prevEl.__vue__ = null } if (vm.$el) { vm.$el.__vue__ = vm } // if parent is an HOC, update its $el as well if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) { vm.$parent.$el = vm.$el } // updated hook is called by the scheduler to ensure that children are // updated in a parent&#39;s updated hook. }</pre><div class="contentsignin">登入後複製</div></div><h2 id="strong-三-结论-strong"><strong>三、结论</strong></h2> <ul> <li> <code>new Vue的时候会调用_init方法