新手寫的Vue原始碼學習記錄(渲染過程)

leslee同學發表於2019-07-31
Vue原始碼

無規矩不成方圓

在技術領域上更是如此, 比如: 類名頭字母大寫, promiseA+ 規範, DOM 標準, es 標準, 都是規矩, 是我們編碼的規矩.

框架亦是如此, 比如Vue 就是尤大的一套規矩, 在程式設計的世界裡, 你牛逼, 你就能制定規矩, 別人要使用你的框架, 就得遵從你的規矩, 而如果你要在別人的框架裡來去自由, 你就得熟悉他的規矩, 就好比你想在某國大有作為, 你也得熟悉該國的法律不是?

為了不受限於 Vue 只能深入一下了

2.6版本

Vue 執行過程(new Vue({})之前)

Vue 建構函式 
// path: src/core/instance/index.js
function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
複製程式碼

各種Mixin 都幹了什麼?

其實他們都往 Vue 例項的原型鏈上新增了諸多的方法

initsrc/core/instance/init.js
Vue.prototype._init = functoin(options){...}
statesrc/core/instance/state.js
Vue.prototype.$data = {...}
Vue.prototype.$props = {...}
Vue.prototype.$set = function () {...}
Vue.prototype.$delete = function () {...}
Vue.prototype.$watch = functoin(expOrFn, cb, options){...}
eventssrc/core/instance/events.js
Vue.prototype.$on = functoin(event, fn){...}
Vue.prototype.$once = functoin(event, fn){...}
Vue.prototype.$off = functoin(event:Array<string>, fn){...}
Vue.prototype.$emit = functoin(event){...}
lifecyclesrc/core/instance/lifecycle.js
Vue.prototype._update = functoin(vnode, hydrating){...}
Vue.prototype.$forceUpdate = function(){...}
Vue.prototype.$destory = function(){...}
rendersrc/core/instance/render.js
Vue.prototype.$nexttick = function(fn){...}
Vue.prototype._render = function(){...}

其實在還有一個 initGlobalAPI(vm) 會初始化 .use(), .extend(), .mixin(), 這些在分析過程中遇到再去了解

現在來看一個例項(new Vue({}) 之後)

new Vue({
    el: '#app',
    data: {
        name: {
            firstName: 'lee',
            lastName: 'les'
        }
    }
})
複製程式碼

原諒我這個例項如此簡單...

如果你記性好, 你就會知道 Vue 的所有一切 都是從一個_init(options) 開始的

現在來看揭開 _init 的神祕面紗

第一個起關鍵作用的條件語句

// path: src/core/instance/init.js
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 {
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
  )
}
複製程式碼

可以看到尤大, 在這裡有一些註釋, 個人認為這些註釋一定要看並且好好理解, 因為這是最好的教程, 但是就算我們不懂, 我們依然可以判斷出 _isComponent 這個屬性是內部屬性, 按照我們的正常流程走下去, 這個是不會用到的, 所以我們可以直接看else 語句裡面的內容, 可以看到 Vue 例項化時做的第一件事情, 就是要合併Vue 的基本配置跟我們傳進來的配置.

看到這裡我們應該要提出一個問題, 就是,為什麼要合併配置, 提出一個問題之後就是要自己先嚐試著回答, 當自己一點頭緒都沒有時, 才是去詢問別人的最好時機, 在這裡我想, 這應該是方便讀取配置資訊, 因為他們都掛載在vm.$options上了 這樣, 只要能訪問this, 就能訪問到配置資訊

程式碼我就不貼了, Vue的基本配置 可以看 src/core/global-api/index.js 內容很簡單, 深挖下去就知道 Vue.options 是 一個有 _base, components, filters,directives... 這些屬性的物件, 合併了以後, 會加上你傳進去的 屬性, 在我們這個例子中就是 el, data.

各種初始化

initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
複製程式碼

這裡可以看見明顯的生命週期函式, 也知道了在beforeCreate 裡並不能訪問到this.xxx 來訪問我們的data屬性, 也能知道 inject 是先於 provide 初始化的 那麼問題來啦,既然我們的data已經傳了進去給Vue, Vue 怎麼可能訪問不了呢? 還記得, Vue 做的第一步操作是什麼嗎? 是合併$options? 我們傳進去的配置全都合併在了這個$options上了.

this.$options.data() // 嘗試在beforeCreate() 鉤子函式裡面執行這段程式碼
//其實這個深度使用過Vue的人也可以很輕鬆的發現的(因為文件有提到$options)....
複製程式碼

如果你正在看原始碼, 你還會看見一個 initProxy, 我暫時不知道這段程式碼的作用, 就是攔截了 config.keyCodes 物件的一些屬性設定

_init 的最後一步

if (vm.$options.el) {
  vm.$mount(vm.$options.el)
}
複製程式碼

如果你指定了掛載的Vue 容器, 那麼Vue 就會直接掛載.

我們來看看Vue.$mount

這個Vue.$mount 要解釋一下, 尤大在這裡抽取了一個公共的 $mount函式, 要看清楚入口檔案才可以找到正確的$mount 函式

$mount函式 
// src/platforms/web/entry-runtime-with-compiler.js
const mount = Vue.prototype.$mount // 對公共的$mount函式做個儲存然後再覆蓋
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  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 <html> or <body> - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  
  // resolve template/el and convert to render function
  // 解析 template 或者 el 然後轉換成 render function
  if (!options.render) {
    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)
    }
    if (template) {
      /* istanbul ignore if */ // 效能檢測
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }

      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 */
      // 效能檢測
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  return mount.call(this, el, hydrating)
}
複製程式碼

我們可以看到. 一開始就把原本的$mount函式儲存了一份, 然後再定義, 原本的$mount(el, hydrating)只有幾行程式碼, 建議自己看一下 src/platforms/web/runtime/index.js

在我們的例項中, 我們出了el和data其他什麼都沒有, 所以這裡會用el去getOuterHTML()獲取我們的模板, 也就是我們的#app

然後呼叫 compileToFunction 函式, 生成我們的render函式(render函式式一個返回VNode的函式),這個過程(涉及到AST => 抽象語法樹)我們有需要再去學習,最後再呼叫共有的$mount(el, hydrating) 方法,然後就來到了我們的mountComponent(vm, el) 函式了.跟丟了沒?

mountComponent(vm, el, hydrating) 
export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean // 初步估計是跟服務端渲染有關的
): Component {
  // 現在的$el已經是一個DOM元素
  vm.$el = el;

  console.log((vm.$options.render),'mountComponent')

  // 正常情況 到這裡render 函式已早已成完畢, 這裡的判斷我猜是在預防render函式生成時出錯的
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode // render 函式就是一個返回 VNode 的函式
    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
        )
      }
    }
  }
  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 {
    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
  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
}
複製程式碼

可以看到這裡最重要的操作,就是new Watcher() watcher 是響應式的原理, 用於記錄每一個需要更新的依賴, 跟Dep相輔相成, 再配合 Object.definedProperty, 完美!

但是我們渲染為什麼要經過Warcher呢? 因為要收集依賴啊...

題外話, Watcher 也用於watch的實現, 只不過我們當前的例子裡並沒有傳入watch.

要搞清楚他在這裡幹了什麼, 先搞清楚傳進去的引數, 可以看到一個比較複雜的updateComponent 現在我們來深入一下.先_render 再 _update

Vue.prototype._render 
// src/core/instance/render.js
Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options
    console.log(render, _parentVnode, '_parentVnode')
    // 解析插槽
    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's no need to maintain a stack because all render fns are called
      // separately from one another. Nested component's render fns are called
      // when parent component is patched.
      currentRenderingInstance = vm
      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 !== 'production' && 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 !== 'production' && Array.isArray(vnode)) {
        warn(
          'Multiple root nodes returned from render function. Render function ' +
          'should return a single root node.',
          vm
        )
      }
      vnode = createEmptyVNode()
    }
    // set parent
    vnode.parent = _parentVnode
    return vnode
  }
複製程式碼

首先我們這裡沒有_parentVnode,也沒有用到元件, 只是通過new Vue()這種最簡單的用法 所以父元件插槽是沒有的.

所以這個函式通篇最重要的就是這一句程式碼

vnode = render.call(vm._renderProxy, vm.$createElement)
複製程式碼

看尤大的註釋就知道 render 可能回返回一個只有一個值的陣列, 或者報錯的時候會返回一個空的vnode, 其他操作都是相容處理, 然後把vnode返回

_update 
// src/core/instance/lifecycle.js
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's updated hook.
}
複製程式碼

這裡最主要的就是 vm.$el = vm.__patch__(prevVnode, vnode), 通過patch來掛載 vnode 並且比對兩個vnode 的不用與相同, 這就是diff, 在vue中 diff 跟 patch 是一起的. 這部分先略過, 我們先看整體.

深入watcher

watcher程式碼挺長的, 我就先貼個建構函式吧

Watcher constructor 
constructor (
    vm: Component, // Vue 例項
    expOrFn: string | Function, // updateComponent
    cb: Function, // 空函式
    options?: ?Object, // {before: ()=>{}}
    isRenderWatcher?: boolean // true 為了渲染收集依賴用的
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this 
    }
    vm._watchers.push(this)
    // options
    if (options) {
      this.deep = !!options.deep // 給watch屬性用 如果watch屬性是一個物件且deep為true 那麼該物件就是深度watch 類似於深拷貝的概念
      this.user = !!options.user // 如果為true 就是為 watche 屬性服務的
      this.lazy = !!options.lazy // lazy如果為true 的話就是computed屬性的了, 只不過computed有快取而已
      this.sync = !!options.sync // 同步就立即執行cb 非同步就佇列執行cb
      this.before = options.before // 剛好我們的引數就是有這個屬性, 是一個回撥函式
    } else {
      this.deep = this.user = this.lazy = this.sync = false
    }
    this.cb = cb
    this.id = ++uid // uid for batching
    this.active = true
    this.dirty = this.lazy // for lazy watchers
    this.deps = []
    this.newDeps = []
    this.depIds = new Set()
    this.newDepIds = new Set()
    this.expression = process.env.NODE_ENV !== 'production'
      ? expOrFn.toString()
      : ''
    // parse expression for getter
    // 這裡我們傳進來的 expOrFn 就是一個 updateComponent() 就是一個函式
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
    // 這裡的parsePath 也不難, 回憶一下我們的 $watch 怎麼用的?
    /*  官方文件的例子
    // 鍵路徑
    vm.$watch('a.b.c', function (newVal, oldVal) {
      // 做點什麼
    })
    可以看到我們的第一個引數, 'a.b.c'  其實這個表示式傳進來就是我們的 expOrFn,
    可以去看 $watch函式的程式碼 最終也還是要走 new Watcher 這一步的, parsePath就是為了把這個表示式的值給求出來
    這個值是在vm例項上取得 一般在 data 裡面最好, 不過在渲染過程中, 是不走這裡的.
    */
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = noop
        process.env.NODE_ENV !== 'production' && warn(
          `Failed watching path: "${expOrFn}" ` +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        )
      }
    }
    this.value = this.lazy
      ? undefined
      : this.get() // 求值, 其實就是觸發我們的 getter 函式 觸發 物件的 get 收集依賴, Vue 的響應式已經爛大街了 (有時間再寫一篇), 在這裡 這個值一求值, 我們的 updateComponent 就會執行, _render _updata 和會相應的執行, 然後就實現了我們的 mount 過程
  }
複製程式碼

至此, 我們的渲染過程已經學習完畢, 最主要的就是 整體的脈絡非常的清晰, 真正需要下功夫的是 虛擬節點的 diff patch跟 template 到 render function 的轉化. 共勉!

相關文章