Vue引入做了什么

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

流程讲解

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

// src\core\instance\index.js

initMixin(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.js

function initMixin (Vue) {
  // 初始化 Vue实例
  Vue.prototype._init = function (options) { ... };
}

stateMixin

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

// src\core\instance\state.js

function 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.js

function 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.js

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

renderMixin

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

// src\core\instance\render.js

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

installRenderHelpers

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

// src\core\instance\render-helpers\index.js

function 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.js

function 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 和 filters
  Vue.options = Object.create(null);

  ...

  initUse(Vue); // 用于安装插件
  initMixin$1(Vue); // 用于全局混入
  initExtend(Vue); // 用于创建子类
  initAssetRegisters(Vue); // 用于注册全局指令、过滤器和组件
}

initAssetRegisters

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

// src\core\global-api\assets.js

var ASSET_TYPES = ['component', 'directive', 'filter'];

function initAssetRegisters (Vue) {
  // Vue.component, Vue.directive, Vue.filter
  ASSET_TYPES.forEach(function (type) {
    // 用于注册全局组件, 全局指令, 全局过滤器
    Vue[type] = function (id,definition) { ... };
  });
}

总结

这些初始化方法为 Vue 提供了强大的功能扩展和灵活性，使得我们可以轻松配置全局选项、注册全局资源，从而更好地开发 Vue 应用。