前言

前面我們簡單的了解了 vue 初始化時的一些大概的流程，這里我們詳細的了解下具體的內容;

內容

這一塊主要圍繞init.ts中的vm.$mount進行剖析，

vm.$mount

vm.$mount是全域的公共方法方法，但是這是我們要找的話就要向上查找了，代碼位于scr/platforms/web/runtime/index.ts中；

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  // 瀏覽器環境下如果存在el，則呼叫query方法進查詢
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

query

query位于src/platforms/web/util/index.ts中；

/**
 * Query an element selector if it's not an element already.
 * 如果元素選擇器還不是元素，就查找下
 */
export function query(el: string | Element): Element {
  // 如果元素是字串通過元素選擇器進行查找，查找到就回傳
  // 未找到的話開發環境會發出警告并創建div元素回傳
  if (typeof el === 'string') {
    const selected = document.querySelector(el)
    if (!selected) {
      __DEV__ && warn('Cannot find element: ' + el)
      return document.createElement('div')
    }
    return selected
  } else {
    return el
  }
}

mountComponent

mountComponent位于src/core/instance/lifecycle.ts;

export function mountComponent(
  vm: Component,
  el: Element | null | undefined,
  hydrating?: boolean
): Component {
  // 掛載點賦值給實體上的$el
  vm.$el = el
  // 如果$options不存在render就創建一個空的虛擬的dom賦予render
  if (!vm.$options.render) {
    // @ts-expect-error invalid type
    vm.$options.render = createEmptyVNode
    // 開發環境下，如果存在配置模板或者el屬性會發出警告
    // 需要將模板預編譯為渲染函式或者使用包含編譯器的版本
    if (__DEV__) {
      /* 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')

  let updateComponent
  // 開發環境性能分析相關代碼
  /* istanbul ignore if */
  if (__DEV__ && 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呼叫_update方法對比更新vnode
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }

  // watcher選項
  const watcherOptions: WatcherOptions = {
    before() {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }

  if (__DEV__) {
    watcherOptions.onTrack = e => callHook(vm, 'renderTracked', [e])
    watcherOptions.onTrigger = e => callHook(vm, 'renderTriggered', [e])
  }

  // 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
  // 我們將其設定為vm._watcher在watcher的建構式中，
  // 因為觀察程式的初始補丁可能會呼叫$forceUpdate（例如，在子組件的掛載鉤子中），
  // 這依賴于已定義的 vm__watcher
  new Watcher(
    vm,
    updateComponent,
    noop,
    watcherOptions,
    true /* isRenderWatcher */
  )
  hydrating = false

  // flush buffer for flush: "pre" watchers queued in setup()
  // setup中定義的預執行的 watcher,呼叫 watcher.run方法執行一次
  const preWatchers = vm._preWatchers
  if (preWatchers) {
    for (let i = 0; i < preWatchers.length; i++) {
      preWatchers[i].run()
    }
  }

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook

  // 手動掛載實體，并且在首次掛載（$vnode為空）時去觸發 mounted鉤子
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  // 回傳組件實體物件
  return vm
}

_update

_update位于src/core/instance/lifecycle.ts下的lifecycleMixin方法中;

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  const vm: Component = this
  // 掛載點真實dom
  const prevEl = vm.$el
  // 老的虛擬dom
  const prevVnode = vm._vnode
  // 設定激活的組件實體物件 | 快取當前實體,為了處理 keep-alive情況
  const restoreActiveInstance = setActiveInstance(vm)
  // 新的虛擬dom
  vm._vnode = vnode
  // Vue.prototype.__patch__ is injected in entry points
  // based on the rendering backend used.
  // Vue.prototype.__patch__是基于所使用的渲染后端在入口點中注入的
  // __patch__打補丁這里涉及到就是diff演算法了
  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
  // 存在真實的dom節點就重置__vue__再掛載新的
  if (prevEl) {
    prevEl.__vue__ = null
  }
  // 將更新后的vue實體掛載到vm.$el.__vue__快取
  if (vm.$el) {
    vm.$el.__vue__ = vm
  }
  // if parent is an HOC, update its $el as well
  // 如果當前實體的$vnode與父組件的_vnode相同，也要更新其$el
  let wrapper: Component | undefined = vm
  while (
    wrapper &&
    wrapper.$vnode &&
    wrapper.$parent &&
    wrapper.$vnode === wrapper.$parent._vnode
  ) {
    wrapper.$parent.$el = wrapper.$el
    wrapper = wrapper.$parent
  }
  // updated hook is called by the scheduler to ensure that children are
  // updated in a parent's updated hook.
  // 調度程式呼叫updated hook，以確保子級在父級的更新hook中得到更新，
}

標籤：其他

上一篇：JavaScript的深拷貝與淺拷貝

下一篇：js實體之01支付后的10秒倒計時