new vue() 發(fā)生了什么

在定義vue 方法之后,會調(diào)用一系列vue 方法的封裝工作

 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

執(zhí)行new vue 后,會執(zhí)行this._init 方法,此方法便是底部 initMixin 封裝到vue函數(shù)原型的,,下面進(jìn)入initMixin方法

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

方法并不長,可以看出,重點是執(zhí)行了一系列的vue 當(dāng)前運行態(tài)的初始化工作,包括初始化生命周期,事件,等等,重點關(guān)注initState以及 最后執(zhí)行的mount 。mount 為將數(shù)據(jù)模型vdom掛載到真實dom上,,此處做了很多工作,渲染即由這里完成,initState即為初始化定義在構(gòu)造函數(shù)中的用戶定義的所有屬性值,包括data props computed等,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)
  }
}

代碼也并不長,主要是對你的構(gòu)造函數(shù)中所定義的 常用屬性:data, watch,computed 進(jìn)行初始化 下面我們看下對data的初始化 initData

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      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 !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}

代碼也并不長,很好理解,將data的所有屬性掛載到vm的_data屬性下,中間的代碼 //proxy data on instance ,即為對所有data下的屬性設(shè)置代理,通過object.defineProperty 使我們通過this.xx訪問到this._data.xx,達(dá)到了訪問我們所定義的data下的值,最后,observe 方法對所有data屬性,進(jìn)行了監(jiān)聽,data改變驅(qū)動視圖,入口便是在這里,

new vue 所發(fā)生的一切以及對vue 方法的封裝已經(jīng)基本明了。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • vue概述 在官方文檔中,有一句話對Vue的定位說的很明確:Vue.js 的核心是一個允許采用簡潔的模板語法來聲明...
    li4065閱讀 7,624評論 0 25
  • 作者:lihongxun945github.com/lihongxun945/myblog/issues/23 這...
    grain先森閱讀 1,125評論 0 4
  • 物有本末,事有終始,知所先后,則近道矣 ---《大學(xué)》 在分析Vue初始化之前,我們先看看Vue源碼的目錄結(jié)構(gòu):...
    海洋之木閱讀 8,199評論 13 46
  • 正月初六,爸爸帶著媽媽、我和弟弟金寶一起去永濟(jì)給奶奶拜年。玩了一會兒,舅媽給我發(fā)壓歲錢,舅媽就說:“怎么多給你...
    李芮涵閱讀 194評論 1 0
  • 敬畏—進(jìn)入—體驗—交給—持續(xù) 1,缺啥補(bǔ)啥,怕啥練啥; 2,一切為我所用,所用為團(tuán)隊家; 3,我想變,我要變,我...
    郝佳慶閱讀 106評論 0 0

友情鏈接更多精彩內(nèi)容