Skip to content

Vue源码解析(一):整体概览 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pf12345 opened this issue Feb 7, 2018 · 0 comments
Open

Vue源码解析(一):整体概览 #1

pf12345 opened this issue Feb 7, 2018 · 0 comments

Comments

@pf12345
Copy link
Owner

pf12345 commented Feb 7, 2018

整体概览

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

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

源码最开始,通过installGlobalAPI方法(见源码)向Vue构造函数添加全局方法,如Vue.extendVue.nextTickVue.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的生成、批处理的执行等等,后续会详细进行说明;

@pf12345 pf12345 changed the title 整体概览 Vue源码解析(一)--整体概览 Feb 7, 2018
@pf12345 pf12345 changed the title Vue源码解析(一)--整体概览 Vue源码解析(一):整体概览 Feb 12, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant