Vue源码解析(一)：整体概览

[pf12345]

整体概览

Vue源码最终是向外部抛出一个Vue的构造函数，见源码：

function Vue (options) {
  this._init(options)
}

在源码最开始，通过installGlobalAPI方法(见源码)向Vue构造函数添加全局方法，如Vue.extend、Vue.nextTick、Vue.delete等，主要初始化Vue一些全局使用的方法、变量和配置；

export default function (Vue){
    Vue.options = {
          .....
    }
    Vue.extend = function (extendOptions){
           ......
    }
    Vue.use = function (plugin){
           ......
    }
    Vue.mixin = function (mixin){
           ......
    }
    Vue.extend = function (extendOptions){
           ......
    }
}

实例化Vue

当使用vue时，最基本使用方式如下：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

此时，会调用构造函数实例化一个vue对象，而在构造函数中只有这句代码this.init(options)；而在init中(源码)，主要进行一些变量的初始化、option重组、各种状态、事件初始化；如下：

Vue.prototype._init = function (options) {
    options = options || {}
    this.$el = null
    this.$parent = options.parent
    this.$root = this.$parent
      ? this.$parent.$root
      : this
    this.$children = []
    this.$refs = {}       // child vm references
    this.$els = {}        // element references
    this._watchers = []   // all watchers as an array
    this._directives = [] // all directives

    ...... // 更多见源码

    options = this.$options = mergeOptions(
      this.constructor.options,
      options,
      this
    )

    // set ref
    this._updateRef()

    // initialize data as empty object.
    // it will be filled up in _initData().
    this._data = {}

    // call init hook
    this._callHook('init')

    // initialize data observation and scope inheritance.
    this._initState()

    // setup event system and option events.
    this._initEvents()

    // call created hook
    this._callHook('created')

    // if `el` option is passed, start compilation.
    if (options.el) {
      this.$mount(options.el)
    }
}

在其中通过mergeOptions方法，将全局this.constructor.options与传入的options及实例化的对象进行合并；而this.constructor.options则是上面初始化vue时进行配置的，其中主要包括一些全局使用的指令、过滤器，如经常使用的"v-if"、"v-for"、"v-show"、"currency"：

this.constructor.options = {
        directives: {
          bind: {}, // v-bind
          cloak: {}, // v-cloak
          el: {}, // v-el
          for: {}, // v-for
          html: {}, // v-html
          if: {}, // v-if
          for: {}, // v-for
          text: {}, // v-text
          model: {}, // v-model
          on: {}, // v-on
          show: {} // v-show
        },
        elementDirectives: {
          partial: {}, // <partial></partial> api: https://v1.vuejs.org/api/#partial
          slot: {} // <slot></slot>
        },
        filters: {  // api: https://v1.vuejs.org/api/#Filters
          capitalize: function() {}, // {{ msg | capitalize }}  ‘abc’ => ‘Abc’
          currency: funnction() {},
          debounce: function() {},
          filterBy: function() {},
          json: function() {},
          limitBy: function() {},
          lowercase: function() {},
          orderBy: function() {},
          pluralize: function() {},
          uppercase: function() {}
        }
}

然后，会触发初始化一些状态、事件、触发init、create钩子；然后随后，会触发this.$mount(options.el)；进行实例挂载，将dom添加到页面；而this.$mount()方法则包含了绝大部分页面渲染的代码量，包括模板的嵌入、编译、link、指令和watcher的生成、批处理的执行等等，后续会详细进行说明；