Source version: 2.0.5

Constructor, instance, option

Let’s use a demo to demonstrate these three concepts:



//HTML
<div id="app">
  {{ message }}
</div>Copy the code


//JS
var vm = new Vue({
  el: '#app'.data: {
    message: 'Hello Vue! '}})Copy the code

Among them:

  • Vue: Constructor of Vue

  • Vm: instance (the instance name can be arbitrary, but it is easy to understand that it is consistent with the VUE document)

  • New Vue(options): options are the configuration options passed in to the constructor. (data, the methods, the computed, created…).

Once we understand these three concepts, it will help us to understand the Vue API documentation

Vue’s open API

Jump to the vUE document

  1. Global configuration: Access and modify in vue.config. xx format

  2. Global API: accessed and modified as vue.xx

  3. Options: Pass options to the constructor as var VM = new Vue(options)

  4. Instance properties /methods: access as vm.$xx (prefixed with $to avoid default API conflicts with user data/methods)

As we know from the API documentation, when we introduced vue.js, we only introduced a constructor (vUE). Once the constructor is introduced, we can use it in several ways

Var vm = new Vue(options)

Pass our custom options to the constructor. When new Vue(options), the vm._init method is automatically run

  • Parsing the options

  • Call the beforeCreate and created bound hook functions

  • Bind data items (data,computed,props) and methods to instances

  • Call the vm.$mount method to perform the template rendering

  • Return an instance object VM

In fact, when we use vue.js to develop, we mainly configure different options to provide vUE constructor resolution and realize different business functions.

Global configuration is done by changing vue.config

You can use Vue and VM inside options to invoke methods on constructors and instances

How does Vue source open these apis

The main entrance

src/core/index.js



import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
import { isServerRendering } from 'core/util/env'

initGlobalAPI(Vue)

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

Vue.version = '__VERSION__'

export default VueCopy the code

The main entry to the Vue source code does three things: 1. References the Vue constructor 2 exposed in./instance/index. Call initGlobalAPI method to define global resource 3. Expose Vue

initGlobalAPI

src/core/global-api/index.js



// The source code is a bit long, I removed the references and some comments.
export function initGlobalAPI (Vue: GlobalAPI) {
  // config
  const configDef = {}
  configDef.get = () => config
  if (process.env.NODE_ENV! = ='production') {
    configDef.set = () => {
      util.warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      )
    }
  }
  Object.defineProperty(Vue, 'config', configDef)
  Vue.util = util
  Vue.set = set
  Vue.delete = del
  Vue.nextTick = util.nextTick

  Vue.options = Object.create(null)
  config._assetTypes.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })

  Vue.options._base = Vue

  util.extend(Vue.options.components, builtInComponents)

  initUse(Vue)
  initMixin(Vue)
  initExtend(Vue)
  initAssetRegisters(Vue)
}Copy the code

The code for initGlobal is to define various methods and properties on the Vue

  • [vue. config] Various global configuration items

  • Vue. Util: various utility functions, and some compatibility flags (wow, don’t judge the browser yourself, Vue already knows)

  • Vue. Set /delete: You should have seen this in your documentation

  • 【 Vue. NextTick 】

  • [vue. options] This option is different from the one we used to construct the instance above. This is the resource (component directive filter) that Vue provides by default.

  • Vue. Use is defined by the initUse method

  • Vue. Mixin is defined by the initMixin method

  • Vue.extend is defined by the initExtend method

These defined global apis are fun, and we usually use instance methods. There are some handy methods tied to the constructor as well. If you’re interested, you can explore it with the code below



In your vue project, Google command line type Object. GetOwnPropertyNames (vue)// You can look at all the attribute names/method names defined on the object
Vue.config
Vue.util
Vue.set.toString(a)ToString () = toString(); toString() = toString(Copy the code

Definition of the Vue constructor

src/core/instance/index.js



// Constructor, which is automatically executed when new Vue(options)
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)Copy the code

So instead of just expanding function by function, the constructor just says this._init(options)

Methods such as initMixin, which define methods on instances, are given below as an exploration map for exploring source code

We can see methods that start with “_”, which are mostly apis used internally by Vue, but not publicly. Methods that begin with “$” are the default APIS exposed to users in the documentation

At this point, we have an idea of the structure of the Vue and the original provenance of the related apis.

In the process of learning, reference to the two daniu article, a lot of income jiong X vue.js source code learning notes Wang He Vue.js 2.0 source code analysis before the end of the rendering article