Vue源码分析——Vue的构造函数分解

本次可以说为自己看的第一部分吧，我们按照自顶向下的顺序来看，我是整体按照下面这位大大的分析过程来的，也是尤大自己推荐的一篇vue源码分析的博客文章，可以说是质量很不错的了。
参考文章：HcySunYang-vue源码解析

这里我们按照文章中找到Vue的构造函数这一节，本篇就是分析这一节了 => src/core/instance/index.js, 为什么说这就是vue的构造函数了，大家可以看到 src/core/index.js 里面引入的 Vue 就是这里释出的再加上大概看看代码就一清二楚了。

下面开始

// src/core/instance/index.js
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

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的生命周期进行(自行对照Vue的生命周期图)

• initMixin => created周期函数之前的操作，即各项初始化，期间调用 beforeCreate 钩子，后续详解
• stateMixin => 利用 definedProperty 进行静态数据的订阅发布，并在其中实现几项实例 api $set、 $delete、 $watch, 后续详解
• eventsMixin => 实例事件流的注入, 利用的是订阅发布模式的事件流构造
• lifecycleMixin => 注入几个Vue原型函数
  
  • Vue.prototype._update => 调用生命周期钩子 beforeUpdate，其后实现 virtual dom 的更新;
  • Vue.prototype.$forceUpdate => 实现实例 api forceUpdate 强制重新渲染实例，包括其下的子组件(更新了 watcher 队列);
  • Vue.prototype.$destroy => 调用生命周期钩子 beforeDestroy , 其后移除各项实例子组件，拆卸实例的watcher队列及调用实例的 __patch__ 方法将 virtual dom 置空(null)，最后调用钩子 destroyed 并解除(实例api：$off)实例所有事件;
• renderMixin => 实现实例api $nextTick，后续详解，实现 _render 渲染虚拟dom

下面是上述各项详解(尽量吧，因为实在太多了，讲不清楚的，还是需要大家自己去看，可能我就讲个大概思路吧, 没写详解的就不写了，各位自己看吧，太多了哈，我也不是能一次全理解的)，需要注意在源码中有 _ 和 $ 两项原型函数区分，而类型检测使用了 flow , 大型项目的多人协作中适合半路引入, 试了下，确实是简单易用，不过没实际项目用过，如果是从0-1的话还是ts吧，虽然我只看过ts的一些语法，不过确实好，自身携带了很多高级的设计模式，这都是ES需要自己写的。

• _: Vue.prototype._xxx 这种大部分是属于 Vue 在实现过程中自己会调用的函数，不是开放出来给用户调用的，如果强行调用会报警告。例如大家在查看 data 或 props 队列时都会有一个监测者 __ob__，你不会改这个吧，改了可就会影响这个队列的观测者了~不明白的情况下不要乱动;
• $: Vue.prototype.$xxx 这种就是开放的实例 api 了， 这里我会解析几个，未解析到的大家自己看文档就好;
• 各位看的时候记得打开 vue 的官方文档，可以对着全局 api 来搜索看作者给的解释后再去看源码就清晰了，最好还开着vue的生命周期对着看。

下面是详解了

一、src/core/instance/init.js => initMixin

这里主要是暴露了 _init 这个自用初始化函数