Vue引入做了什么

Vue.js 是一个功能强大且易于使用的 JavaScript 框架，今天的任务就是分析在 Vue 引入的过程中，都做了哪些处理！

流程讲解

首先会调用这几个方法，主要作用是在 Vue 原型上挂载了一系列的方法，让 Vue 实例具备一些核心功能。让我们逐个解释：

// src\core\instance\index.jsinitMixin(Vue); // _init
stateMixin(Vue); // $data, $props, $set, $delete, $watch
eventsMixin(Vue); // $on, $once, $off, $emit
lifecycleMixin(Vue);  // _update, $forceUpdate, $destroy
renderMixin(Vue); // $nextTick, _render

initMixin

这个函数主要负责初始化 Vue 实例的初始化过程，它会在 Vue 原型上添加 _init 方法，用于初始化 Vue 实例

// src\core\instance\init.jsfunction initMixin (Vue) {// 初始化 Vue实例Vue.prototype._init = function (options) { ... };
}

stateMixin

主要用于给 Vue 原型上添加一些状态相关的方法，比如 data、props、set、delete、$watch 等

// src\core\instance\state.jsfunction stateMixin (Vue) {// 获取实例的数据Object.defineProperty(Vue.prototype, '$data', dataDef);// 获取实例的 props对象Object.defineProperty(Vue.prototype, '$props', propsDef);// 向响应式对象中添加一个属性Vue.prototype.$set = set;// 删除响应式对象的属性Vue.prototype.$delete = del;// 用于监测数据的变化Vue.prototype.$watch = function (expOrFn, cb, options) { ... };
}

eventsMixin

用于给 Vue 原型上添加事件相关的方法，比如 on、once、off和emit

// src\core\instance\events.jsfunction eventsMixin (Vue) {// 用于监听事件Vue.prototype.$on = function (event, fn) { ... };// 用于添加监听事件, 但事件只触发一次, 触发后即被移除Vue.prototype.$once = function (event, fn) { ... };// 用于移除事件监听器Vue.prototype.$off = function (event, fn) { ... };// 用于触发事件Vue.prototype.$emit = function (event) { ... };
}

lifecycleMixin

主要用于给 Vue 原型上添加生命周期相关的方法，比如 forceUpdate、destroy

// src\core\instance\lifecycle.jsfunction lifecycleMixin (Vue) {// 用于更新视图Vue.prototype._update = function (vnode, hydrating) { ... };// 用于强制更新视图Vue.prototype.$forceUpdate = function () { ... };// 用于销毁实例Vue.prototype.$destroy = function () { ... };
}

renderMixin

主要用于安装运行时辅助函数以及给 Vue 原型上添加渲染相关的方法，比如 $nextTick、_render

// src\core\instance\render.jsfunction renderMixin (Vue) {// 安装运行时辅助函数installRenderHelpers(Vue.prototype);// 用于在 DOM 更新之后执行回调Vue.prototype.$nextTick = function (fn) { ... };// 用于生成虚拟 DOMVue.prototype._render = function () { ... };
}

installRenderHelpers

作用是安装渲染相关的帮助函数到 Vue 原型上，以便在模板编译的过程中使用

// src\core\instance\render-helpers\index.jsfunction installRenderHelpers (target) {target._o = markOnce; // 标记一个节点只渲染一次target._n = toNumber; // 将值转换为数字target._s = toString; // 将值转换为字符串target._l = renderList; // 渲染数组target._t = renderSlot; // 渲染插槽target._q = looseEqual; // 松散相等判断target._i = looseIndexOf; // 在数组中查找元素target._m = renderStatic; // 渲染静态节点target._f = resolveFilter; // 解析过滤器target._k = checkKeyCodes; // 检查按键码target._b = bindObjectProps; // 绑定对象属性target._v = createTextVNode; // 创建文本节点target._e = createEmptyVNode; // 创建空节点target._u = resolveScopedSlots; // 解析作用域插槽target._g = bindObjectListeners; // 绑定对象监听器target._d = bindDynamicKeys; // 处理动态指令的参数绑定target._p = prependModifier; // 增加前置修饰符标记
}

然后会调用 initGlobalAPI 方法，它初始化了 Vue 的全局 API 并挂载到 Vue 的构造函数上，包括了常见的一些方法和属性

// src\core\index.js// Vue.config, Vue.util, Vue.set, Vue.delete, Vue.nextTick, Vue.observable, Vue.options
// Vue.use, Vue.mixin, Vue.extend
// Vue.component, Vue.directive, Vue.filter
initGlobalAPI(Vue);

initGlobalAPI

在 Vue 实例化之前，初始化 Vue 的全局 API

// src\core\global-api\index.jsfunction initGlobalAPI (Vue) {// 读取当前全局配置Object.defineProperty(Vue, 'config', configDef);// 包含一些工具函数, 如警告函数、对象扩展函数、合并选项函、定义响应式数据Vue.util = {warn: warn,extend: extend,mergeOptions: mergeOptions,defineReactive: defineReactive$$1};Vue.set = set; // 在响应式数据上添加属性Vue.delete = del; // 在响应式数据上删除属性Vue.nextTick = nextTick; // 用于在 DOM 更新之后执行回调函数// 用于将一个普通对象转换为响应式对象Vue.observable = function (obj) {observe(obj);return obj};// 用于存储全局配置, 包括了 components、directives 和 filtersVue.options = Object.create(null);...initUse(Vue); // 用于安装插件initMixin$1(Vue); // 用于全局混入initExtend(Vue); // 用于创建子类initAssetRegisters(Vue); // 用于注册全局指令、过滤器和组件
}

initAssetRegisters

该作用是初始化注册全局资源的方法，包括组件、指令和过滤器

// src\core\global-api\assets.jsvar ASSET_TYPES = ['component', 'directive', 'filter'];function initAssetRegisters (Vue) {// Vue.component, Vue.directive, Vue.filterASSET_TYPES.forEach(function (type) {// 用于注册全局组件, 全局指令, 全局过滤器Vue[type] = function (id,definition) { ... };});
}