2. 程式人生 > >Vue原始碼解析(一)

Vue原始碼解析(一)

阿新 • • 發佈：2018-12-18

前言:接觸vue已經有一段時間了,前面也寫了幾篇關於vue全家桶的內容,感興趣的小夥伴可以去看看,剛接觸的時候就想去膜拜一下原始碼~可每次鼓起勇氣去看vue原始碼的時候,當看到幾萬行程式碼的時候就直接望而卻步了,小夥伴是不是也跟我當初一樣呢? 下面分享一下我看vue原始碼的一些感觸,然後記錄一下我對原始碼的理解,歡迎指正,純屬個人筆記,大牛勿噴!

我們直接上一張vue官網的vue的生命週期圖:

在這裡插入圖片描述

我們跟著原始碼結合demo把張圖全部跑一遍~~

我們以一個webpack+vue單頁面引用為demo

首先我們看一下vue原始碼檔案:

在這裡插入圖片描述

我們首先從我們專案的main.js檔案開始:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

import LazyImage from './lazy'
import {sync} from 'vuex-router-sync'

Vue.config.productionTip = false
Vue.use(LazyImage)
sync(store,router)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  ddd: {name: 'yasin'},
  render(h) {
    return h(App)
  }
})

我們已經默默的開始的我們的旅程,目前已經到達了生命週期的(new Vue())

我們點開vue的原始碼(/node_modules/vue/src/core),找到建構函式:

import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
import { isServerRendering } from 'core/util/env'
import { FunctionalRenderContext } from 'core/vdom/create-functional-component'

initGlobalAPI(Vue)

Object.defineProperty(Vue.prototype, '$isServer', {
  get: isServerRendering
})

Object.defineProperty(Vue.prototype, '$ssrContext', {
  get () {
    /* istanbul ignore next */
    return this.$vnode && this.$vnode.ssrContext
  }
})

// expose FunctionalRenderContext for ssr runtime helper installation
Object.defineProperty(Vue, 'FunctionalRenderContext', {
  value: FunctionalRenderContext
})

Vue.version = '__VERSION__'

export default Vue

入口檔案中定義了一些服務端渲染的東西,我們不關心,繼續往下走
/node_modules/vue/src/core/instance:

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

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)

export default Vue

好啦~ 整個vue的建構函式中就只調用了一個init方法(我們已經來到了生命週期圖的init函數了):
init方法哪裡來的呢? 我們可以下面呼叫了:

initMixin(Vue)

/node_modules/vue/src/core/instance/init.js

export function initMixin (Vue: Class<Component>) {
  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 !== 'production' && 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
    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
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    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')

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && 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)
    }
  }
}

程式碼已經有點多了,問題不大~ 我們找重點,我們再看一下生命週期圖,看一下我們接下來走哪一步了:

在這裡插入圖片描述

可以看到,我們接下來要走init方法中的events跟lifecyle,字面意思就可以知道是註冊“事件”跟“生命週期”的意思:

我們在init方法中找到對應的程式碼:

Vue.prototype._init = function (options?: Object) {
    ....
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
  ....
  }

我們首先點開initLifecycle方法:
/node_modules/vue/src/core/instance/lifecycle.js

export function initLifecycle (vm: Component) {
  const options = vm.$options

  // locate first non-abstract parent
  let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }

  vm.$parent = parent
  vm.$root = parent ? parent.$root : vm

  vm.$children = []
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

很簡單,就是初始化一些生命週期的變數(未渲染、未銷燬等等)
我們接下來看一下init方法中的Events(initEvents):

export function initEvents (vm: Component) {
  vm._events = Object.create(null)
  vm._hasHookEvent = false
  // init parent attached events
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}

events是啥呢? 就是我們執行vm. o n c e 、 v m . once、vm. on、vm.$emit方法傳送的一些事件,分為註冊事件跟觸發事件(觀察者模式)

好啦,我們已經把init的events跟lifecycle看完了,在繼續往下之前我們再來看一下入口檔案的這些方法:
node_modules/vue/src/core/instance/index.js

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

initMixin方法我們上面已經看過了
我們看一下 stateMixin方法:

export function stateMixin (Vue: Class<Component>) {
  // flow somehow has problems with directly declared definition object
  // when using Object.defineProperty, so we have to procedurally build up
  // the object here.
  const dataDef = {}
  dataDef.get = function () { return this._data }
  const propsDef = {}
  propsDef.get = function () { return this._props }
  if (process.env.NODE_ENV !== 'production') {
    dataDef.set = function (newData: Object) {
      warn(
        'Avoid replacing instance root $data. ' +
        'Use nested data properties instead.',
        this
      )
    }
    propsDef.set = function () {
      warn(`$props is readonly.`, this)
    }
  }
  Object.defineProperty(Vue.prototype, '$data', dataDef)
  Object.defineProperty(Vue.prototype, '$props', propsDef)

  Vue.prototype.$set = set
  Vue.prototype.$delete = del

  Vue.prototype.$watch = function (
    expOrFn: string | Function,
    cb: any,
    options?: Object
  ): Function {
    const vm: Component = this
    if (isPlainObject(cb)) {
      return createWatcher(vm, expOrFn, cb, options)
    }
    options = options || {}
    options.user = true
    const watcher = new Watcher(vm, expOrFn, cb, options)
    if (options.immediate) {
      cb.call(vm, watcher.value)
    }
    return function unwatchFn () {
      watcher.teardown()
    }
  }
}

我們在vue專案中程式碼可能會用到 Vue.prototype. s e t 、 V u e . p r o t o t y p e . set、 Vue.prototype. delete、 Vue.prototype. w a t c h 方 法 , 我 就 簡 單 的 解 釋 一 下 V u e . p r o t o t y p e . watch 方法,我就簡單的解釋一下Vue.prototype. set的工作原理,其他兩個方法小夥伴自己去研究哦~

為什麼需要用到vm.$set方法呢?
小夥伴可以看官網解釋:
https://cn.vuejs.org/v2/guide/reactivity.html
Vue 不允許在已經建立的例項上動態新增新的根級響應式屬性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應屬性新增到巢狀的物件上.

有點抽象哦,比如你在data中定義了一個user物件,然後你想給user物件新增一個name屬性,你直接this.name=xxx是沒有響應式的,你需要執行:

vm.$set(this.user,'name','xxxx')

這樣你的name屬性就具有響應式了,好啦~ 我們繼續看原始碼:

 Vue.prototype.$set = set

export function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

我們看最關鍵的一行:

 defineReactive(ob.value, key, val)

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  if (!getter && arguments.length === 2) {
    val = obj[key]
  }
  const setter = property && property.set

  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

可以看到,最後執行了 Object.defineProperty方法,而 Object.defineProperty方法正好也是vue的mvvm機制的工作原理

繼續回頭看一下入口檔案方法:

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

我們已經繼續lifecycleMixin

export function lifecycleMixin (Vue: Class<Component>) {
  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    if (vm._isMounted) {
      callHook(vm, 'beforeUpdate')
    }
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    const prevActiveInstance = activeInstance
    activeInstance = 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 */,
        vm.$options._parentElm,
        vm.$options._refElm
      )
      // no need for the ref nodes after initial patch
      // this prevents keeping a detached DOM tree in memory (#5851)
      vm.$options._parentElm = vm.$options._refElm = null
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    activeInstance = prevActiveInstance
    // 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.
  }

  Vue.prototype.$forceUpdate = function () {
    const vm: Component = this
    if (vm._watcher) {
      vm._watcher.update()
    }
  }

  Vue.prototype.$destroy = function () {
    const vm: Component = this
    if (vm._isBeingDestroyed) {
      return
    }
    callHook(vm, 'beforeDestroy')
    vm._isBeingDestroyed = true
    // remove self from parent
    const parent = vm.$parent
    if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
      remove(parent.$children, vm)
    }
    // teardown watchers
    if (vm._watcher) {
      vm._watcher.teardown()
    }
    let i = vm._watchers.length
    while (i--) {
      vm._watchers[i].teardown()
    }
    // remove reference from data ob
    // frozen object may not have observer.
    if (vm._data.__ob__) {
      vm._data.__ob__.vmCount--
    }
    // call the last hook...
    vm._isDestroyed = true
    // invoke destroy hooks on current rendered tree
    vm.__patch__(vm._vnode, null)
    // fire destroyed hook
    callHook(vm, 'destroyed')
    // turn off all instance listeners.
    vm.$off()
    // remove __vue__ reference
    if (vm.$el) {
      vm.$el.__vue__ = null
    }
    // release circular reference (#6759)
    if (vm.$vnode) {
      vm.$vnode.parent = null
    }
  }
}

又是一長串程式碼,還是一句話:“不要慌,問題不大!! 我們找關鍵點”

主要就是註冊了幾個方法:
Vue.prototype._update :vnode物件更新時候觸發
Vue.prototype. f o r c e U p d a t e : 強 制 更 新 v n o d e 對 象 V u e . p r o t o t y p e . forceUpdate :強制更新vnode物件 Vue.prototype. destroy :銷燬當前vnode物件
官網解釋說是:“可以說這三個方法一般是用不到的,除非你程式碼出問題了~”

我重點說一下 f o r c e U p d a t e 方 法 , 還 是 跟 上 面 說 的 forceUpdate方法,還是跟上面說的 set方法一樣,當你動態給一個data物件新增一個屬性的時候,如果沒有用 s e t 方 法 的 話 , 屬 性 是 不 具 有 響 應 式 效 果 , 但 是 又 要 刷 新 頁 面 怎 麼 辦 呢 ? 這 個 時 候 你 可 以 使 用 set方法的話,屬性是不具有響應式效果,但是又要重新整理頁面怎麼辦呢? 這個時候你可以使用 forceUpdate方法.

我說是這麼說哈,小夥伴專案中可別這麼幹,因為當你用$forceUpdate方法解決問題的時候,90%是你程式出錯了.

我們繼續看入口檔案:

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

還差最後一個renderMixin(Vue)方法:

export function renderMixin (Vue: Class<Component>) {
  // install runtime convenience helpers
  installRenderHelpers(Vue.prototype)

  Vue.prototype.$nextTick = function (fn: Function) {
    return nextTick(fn, this)
  }

  Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options

    // reset _rendered flag on slots for duplicate slot check
    if (process.env.NODE_ENV !== 'production') {
      for (const key in vm.$slots) {
        // $flow-disable-line
        vm.$slots[key]._rendered = false
      }
    }

    if (_parentVnode) {
      vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
    }

    // 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 {
      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') {
        if (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
        }
      } else {
        vnode = vm._vnode
      }
    }
    // 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
  }

建立了兩個方法:
Vue.prototype.$nextTick
Vue.prototype._render
_render方法先擱一會,後面會詳細介紹,我們先看一下nextTick方法,當然,官網也有解釋:
例如，當你設定 vm.someData = ‘new value’ ，該元件不會立即重新渲染。當重新整理佇列時，元件會在事件迴圈佇列清空時的下一個“tick”更新。多數情況我們不需要關心這個過程，但是如果你想在 DOM 狀態更新後做點什麼，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員沿著“資料驅動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這麼做。為了在資料變化之後等待 Vue 完成更新 DOM ，可以在資料變化之後立即使用 Vue.nextTick(callback) 。

我簡單說一下原理: 當你執行vm.someData = ‘new value’—>觸發vm的update方法更新vnode—>vnode判斷平臺(web、week)做dom操作–>更新完dom後回撥nextTick方法

好啦,入口檔案的幾個方法我們都研究完了,我們再回顧一下生命週期圖:
在這裡插入圖片描述

我們已經走到了第三步了(init方法的injections跟reactivity)
我們找到init方法的這段程式碼:

 Vue.prototype._init = function (options?: Object) {
    ....
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
   ....
  }

我們首先看一下initInjections方法:

export function initInjections (vm: Component) {
  const result = resolveInject(vm.$options.inject, vm)
  if (result) {
    toggleObserving(false)
    Object.keys(result).forEach(key => {
      /* istanbul ignore else */
      if (process.env.NODE_ENV !== 'production') {
        defineReactive(vm, key, result[key], () => {
          warn(
            `Avoid mutating an injected value directly since the changes will be ` +
            `overwritten whenever the provided component re-renders. ` +
            `injection being mutated: "${key}"`,
            vm
          )
        })
      } else {
        defineReactive(vm, key, result[key])
      }
    })
    toggleObserving(true)
  }
}

看程式碼有點懵逼,什麼意思呢?比如在父類或者超類元件中定義了一些基礎資料,子類元件需要拿到這些基礎資料,我們就可以用inject,inject中包含了initInjections跟initProvide.

怎麼用呢?

比如我們的元件render1.vue中定義了一個叫title的欄位:

<template>
    <render2>
    </render2>
</template>
<script>
  import Render2 from './Render2.vue'

  export default {
    name: 'Render1',
    components: {
      Render2
    },
    provide() {
      return {
        title: '我是render1'
      }
    }
  }
</script>
<style scoped>

</style>

然後我們可以在render2中拿到我們的title欄位:
render2.vue

<script>
  export default {
    name: 'Render2',
    render(h) {
      console.log(this.name)
      return h('div', [
        < p > 111111 < /p>,
      this.$scopedSlots.default({title: 'yasin'}),
        this.$slots.default
    ])
    },
    inject: {
      name: {
        from: 'title'
      }
    }
  }
</script>
<style scoped>

</style>

render2.vue中只需要在當前vm的options中提供inject物件然後需要標明需要注入的屬性來自哪:

  inject: {
      name: { //需要注入的key
        from: 'title' //來自父元件的什麼欄位比如:“title”
      }
    }

我們就可以在當前的render2.vue中使用this.name訪問render1.vue中的title欄位了,小夥伴可以自己嘗試一下哦~

好啦,我們繼續我們的生命週期解析,當解析完了init方法的events,我們還差一個reactivity:

 Vue.prototype._init = function (options?: Object) {
 ....
callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
     ....

我們直接點開initState方法:

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.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)
  }
}

initState的目的就是初始化一些響應式操作,具體有:data屬性、props屬性、computed屬性、watch屬性. 想必小夥伴用的最多的就是這幾個屬性了,我們改變一個元件的props、data、computed、都會觸發響應式操作然後更新元件,watch裡面的屬性如果改變了也會觸發watch方法,那麼它們的工作原理是是什麼呢?

我們首先看props,我們看到這麼一行程式碼:

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  ....
}

function initProps (vm: Component, propsOptions: Object) {
  //獲取我們的屬性值（也就是我們在元件中傳遞的屬性）
  const propsData = vm.$options.propsData || {}
  //定義當前vm的_props物件
  const props = vm._props = {}
  // cache prop keys so that future props updates can iterate using Array
  // instead of dynamic object key enumeration.
  const keys = vm.$options._propKeys = []
  const isRoot = !vm.$parent
  // root instance props should be converted
  if (!isRoot) {
    toggleObserving(false)
  }
  //遍歷我們在元件中定義的props
  for (const key in propsOptions) {
    keys.push(key)
    //驗證props
    const value = validateProp(key, propsOptions, propsData, vm)
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      const hyphenatedKey = hyphenate(key)
      if (isReservedAttribute(hyphenatedKey) ||
          config.isReservedAttr(hyphenatedKey)) {
        warn(
          `"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
          vm
        )
      }
      //給當前vm的_props物件新增響應式屬性（也就是我們傳遞的屬性值）
      defineReactive(props, key, value, () => {
        if (vm.$parent && !isUpdatingChildComponent) {
          warn(
            `Avoid mutating a prop directly since the value will be ` +
            `overwritten whenever the parent component re-renders. ` +
            `Instead, use a data or computed property based on the prop's ` +
            `value. Prop being mutated: "${key}"`,
            vm
          )
        }
      })
    } else {
      //給當前vm的_props物件新增響應式屬性（也就是我們傳遞的屬性值）
      defineReactive(props, key, value)
    }
    // static props are already proxied on the component's prototype
    // during Vue.extend(). We only need to proxy props defined at
    // instantiation here.
    //把vm中的屬性通過代理方式指向_props物件（也就是我們可以在vm中通過this.xxx訪問某個屬性）
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }
  toggleObserving(true)
}

程式碼中都有解釋,我就不多說了,data跟props的原理差不多,watch跟computed無非就是一些響應的回撥觸發,我們也不多說了~~

我們已經把vue created之前生命週期原始碼解析了一遍,再看一眼生命週期圖:
在這裡插入圖片描述

callHook(vm, 'created')

   ...

    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }

當我們給vue例項傳遞了el引數的時候,vue會直接呼叫mount方法,然後就會走渲染邏輯,當然,如果我們沒有el引數的時候,我們可以手動的呼叫mount方法把vue例項掛載到某個dom元素中,所以接下來我們重點研究一下mount方法.

那麼mount方法在哪定義的呢?

我們找到這麼一個檔案
/vue/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)
}

然後在vue/src/platforms/web/entry-runtime-with-compiler.js檔案中又再一次對mount方法重定義了:

const mount = Vue.prototype.$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
  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, {
        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.call,而這裡的mount方法是/vue/src/platforms/web/runtime/index.js檔案中定義的,而/vue/src/platforms/web/runtime/index.js檔案中的mount方法:

// 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方法,而mountComponent又是vue/VuexDemo/node_modules/vue/src/core/instance/render.js檔案中定義的:

export function renderMixin (Vue: Class<Component>) {
  // install runtime convenience helpers
  installRenderHelpers(Vue.prototype)

  Vue.prototype.$nextTick = function (fn: Function) {
    return nextTick(fn, this)
  }

  Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options

    // reset _rendered flag on slots for duplicate slot check
    if (process.env.NODE_ENV !== 'production') {
      for (const key in vm.$slots) {
        // $flow-disable-line
        vm.$slots[key]._rendered = false
      }
    }

    if (_parentVnode) {
      vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
    }

    // 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 {
      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') {
        if (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
        }
      } else {
        vnode = vm._vnode
      }
    }
    // 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
  }
}

好吧,小夥伴是不是有點繞了呢? 還是那句話:“別慌,問題不大!! 我們看重點~~”

首先當我們直接呼叫vm的mount方法的時候會觸發最後一個定義mount方法的地方,也就是上面的/vue/src/platforms/web/entry-runtime-with-compiler.js:

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  //在vm中傳遞的el屬性
  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
  // 如果在options中沒有傳遞render方法
  if (!options.render) {
    let template = options.template
    //如果有template屬性，就把template編譯完畢後傳遞給render方法
    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屬性但是有el屬性的時候，把el的outerHtml當成template傳遞給render物件
      template = getOuterHTML(el)
    }
    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')
      }
    }
  }
  return mount.call(this, el, hydrating)
}

最後走到了mountComponent方法(很關鍵):
vue/src/core/instance/lifecycle.js

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
        )
      }
    }
  }
  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, null, 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
}

可以看到,mountComponent方法建立了Watcher物件,Watcher是幹什麼的呢?Watcher就是監聽響應式資料的變換,然後執行updateComponent方法,最後執行update方法:

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    if (vm._isMounted) {
      callHook(vm, 'beforeUpdate')
    }
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    const prevActiveInstance = activeInstance
    activeInstance = 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 */,
        vm.$options._parentElm,
        vm.$options._refElm
      )
      // no need for the ref nodes after initial patch
      // this prevents keeping a detached DOM tree in memory (#5851)
      vm.$options._parentElm = vm.$options._refElm = null
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    activeInstance = prevActiveInstance
    // 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.
  }

然後修改dom元素,最後重新整理頁面~~

好啦!! 整個vue的生命週期的流程圖就大致走了一遍了~~

下一節我們重點說一下render函式跟mount函式.

先到這裡啦，歡迎志同道合的小夥伴入群，一起交流一起學習～～ 加油騷年！！
qq群連結：
在這裡插入圖片描述

相關推薦

Vue原始碼解析(一)

前言:接觸vue已經有一段時間了,前面也寫了幾篇關於vue全家桶的內容,感興趣的小夥伴可以去看看,剛接觸的時候就想去膜拜一下原始碼~可每次鼓起勇氣去看vue原始碼的時候,當看到幾萬行程式碼的時候就直接望而卻步了,小夥伴是不是也跟我當初一樣呢? 下面分享一下我看vue原始碼的一些感觸,然後

Vue原始碼解析（一）

使用vue已經大半年時間了，寫起來已經很順手了。比起之前的jquery時代，vue配合webpack的使用，讓前端程式碼整體性更強，程式碼量也比之前少了一些。用了一段時間後，也想了解Vue具體是如何實現這樣的一個mvvm框架的，經過一段時間的掙扎，終於開始了原始

vue系列---響應式原理實現及Observer原始碼解析(一)

閱讀目錄 一. 什麼是響應式？ 二：如何偵測資料的變化？ 2.1 Object.defineProperty() 偵測物件屬性值變化 2.2 如何偵測陣列的索引值的變化 2.3 如何監聽陣列內容的增加或減少？ 2.4 使用Proxy來實現資料監聽 三. Observer原始碼解析

Spring原始碼解析 - 一、環境搭建

環境搭建 1.  安裝git： https://desktop.github.com/         安裝git以及使用教程： https://blog.csdn.net/qq_39705793/article/deta

Promise原始碼解析(一) 詞法作用域的那些事

Promise很複雜…恩…原來覺得不就是詞法作用域嗎, 原來覺得詞法作用域不就是呼叫時的堆疊是定義時的嘛 結果…一個簡單概念被玩成了這樣…promise.js原始碼從https://blog.csdn.net/qq_22844483/article/details/73655738所得 謝謝原作者(未申請轉載

React-Redux 原始碼解析 一（createStore）

createStore 一般而言，我檢視一個庫的原始碼，首先回檢視對應方法的引數，其次是對應的return ,然後再看程式碼的具體實現。 通過檢視原始碼，發現createStore 方法返回了一個物件， 該物件共暴露出了五個方法，四個常用的方法: return {

Elastic-Job原始碼解析(一)之與Spring完美整合

看過小編寫SpringFramework原始碼解析的同學應該對Spring支援自定義標籤還有點印象吧，沒有的話我們回顧下，然後看看Elastic-Job是如何巧妙的利用自定義標籤生成Job任務的吧。請注意這裡用了一個巧妙關鍵字。我們看它如何巧妙的吧。 Spring自定義

Vue原始碼解析之nextTick

Vue原始碼解析之nextTick 前言 nextTick是Vue的一個核心功能，在Vue內部實現中也經常用到nextTick。但是，很多新手不理解nextTick的原理，甚至不清楚nextTick的作用。 那麼，我們就先來看看nextTick是什麼。 nextTick功能 看看

vue 原始碼解析 之 data的省略用法

var vu = new vue( { data() { name: kk age: 123 } }) vue中獲取 name 有如下幾種寫法, 1 vu.name 2 vu.$data.name 其實他們實際都是獲取的 vu._data.name 第一種的原始碼在 function initDa

Spring Cloud Config原始碼解析(一)

   這是第一次寫原始碼的解析，主要是給自己留一個印象，有很多不充足的地方以後自己慢慢補充。這個spring cloud config原始碼的解析是以2.1.0.BUILD-SNAPSHOT為基礎，時間是2018-10-05以前的程式碼來分析。spring cloud config主要有3

Vue原始碼解析之陣列變異

力有不逮的物件 眾所周知，在 Vue 中，直接修改物件屬性的值無法觸發響應式。當你直接修改了物件屬性的值，你會發現，只有資料改了，但是頁面內容並沒有改變。 這是什麼原因？ 原因在於： Vue 的響應式系統是基於Object.defineProperty這個方法的，該方法可以監聽物件中某個元素的獲取或修改

vue原始碼解析 —— 資料代理

1. 前言：因為vue原始碼是比較複雜的，考慮的東西比較多；而這裡只是簡單的瞭解下類似vue的mvvm框架的部分原理，所以我們用這個庫： https://github.com/DMQ/mvvm  （仿vue實現的mvvm庫，比vue簡介，簡單） ==>> 下面稱其

vue原始碼解析 —— 知識準備

學習vue原始碼之前，先學習一些要用到的知識，即一下6點： 1. [].slice.call(lis): 將偽陣列轉換為真陣列 2. node.nodeType: 得到節點型別 3. Object.defineProperty(obj, propertyName, {}): 給物件新

Vue原始碼解析之陣列變異的實現

眾所周知，在 Vue 中，直接修改物件屬性的值無法觸發響應式。當你直接修改了物件屬性的值，你會發現，只有資料改了，但是頁面內容並沒有改變。 這是什麼原因？ 原因在於： Vue 的響應式系統是基於Object.defineProperty這個方法的，該方法可以監聽物件中某個元素的獲取或修改，經過了該方法處理

Django-Filter原始碼解析一

Django Filter原始碼解析最近在看Django-FIlter專案的原始碼，學習一下別人的開發思想；整體介紹首先，我從其中一個測試用例作為入口，開始了debug之路，一點一點的斷點，分析它的執行順序，如圖：ok，下面從程式碼的層面進行分析：urlurl(r'^books/$', FilterView.

Spring IOC容器啟動流程原始碼解析(一)——容器概念詳解及原始碼初探

目錄 1. 前言 1.1 IOC容器到底是什麼 IOC和AOP是Spring框架的核心功能,而IOC又是AOP實現的基礎,因而可以說IOC是整個Spring框架的基石。那麼什麼是IOC？IOC即控制反轉,通俗的說就是讓Spring框架來幫助我們完成物件的依賴管理和生命週期控制等等工作。從面向物件的角度來說,

JDK8-HashMap原始碼解析(一)

注：HashMap的建構函式較多，就不一一解讀了，這裡以無參建構函式為例 /** * Constructs an empty <tt>HashMap</tt> with the default initial capa

Mobx 原始碼解析 一（observable）

前言 在Git 找到Mobx 的原始碼， 發現其是使用TypeScript 編寫,因為我對Typescrit 沒有專案經驗，所以我先會將其編譯成JavaScript，所以我們可以執行如下指令碼或者從CDN直接下載一份編譯過的原始碼，我們可以選擇umd 規範指令碼： git

原始碼解析一次OKHttp請求的過程

OkHttp這個庫有多優秀作為Androider大家心裡都明白，應該說合格的開發者都認識它。那麼，這裡簡單看個OKHttp的介面請求姿勢： OkHttpClient okHttpClient = new OkHttpClient(); Request reque

原 Vue原始碼解析二(render&mount)

前言:前面我們根據vue官網的生命週期圖走了一遍vue的原始碼,感興趣的小夥伴可以去看我之前的文章Vue原始碼解析(一),今天我們重點研究一下render跟mount方法,這也是vue中兩個比較重要的方法了,廢話不多說了,我們開擼~~ 我們先回顧下上節內容,我們開啟vue的原始碼,然