vue 原理，带你跟着流程了解，简单直白不深奥

vue 是一个 js 框架，它实现了自己的模板，通过 .vue 文件可以经过编译成一个数据改变驱动视图改变的 js代码。
那么这其中又是经历了什么样的步骤呢？

---

一个 vue 对象是通过 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)

export default Vue

可以看到这个 Vue 构造函数，它经历了 5 个系列的mixin，并在新创建时会运行 _init(options) 方法。
那么我们来看看, 这五个 mixin 分别做了啥。

第一个 initMixin

它只做了一件事， 定义了 _init 方法，那么你就知道创造一个Vue 实例，它执行的 _init 方法就是上面这个方法了。

Vue.prototype._init = function (options?: Object) {
....
}

第二个 stateMixin

  Object.defineProperty(Vue.prototype, '$data', dataDef)  // 能够返回 data
  Object.defineProperty(Vue.prototype, '$props', propsDef) // 能够返回 props
  Vue.prototype.$set = set // 就是我们用的 this.$set(this.people, 'name', ‘clever')方法, 下同。
  Vue.prototype.$delete = del
  Vue.prototype.$watch = function (
   ....
  }

第三个 eventsMixin

Vue.prototype.$on = function (eventname, fn) {
....
}
Vue.prototype._$once = function (eventname, fn) {
 // 监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。
}
Vue.prototype._off = function (event, fn) {
// 移除自定义事件监听器。
}
Vue.prototype.$emit = function (event) {
// 触发一个事件
}

第四个 lifecycleMixin