Vue 插件与 Vuex 实现原理详解

你想了解 Vue 插件的通用实现机制，以及基于 Vue 插件机制开发的 Vuex 状态管理库的底层原理，我会从基础到核心，一步步讲清楚两者的本质。

一、Vue 插件的基础原理

Vue 插件是为 Vue 全局添加功能的扩展机制，所有 Vue 插件都遵循统一的规范，这也是 Vuex 能集成到 Vue 中的基础。

1. 插件核心规则

插件必须提供一个 install 方法（函数或对象）
该方法第一个参数是 Vue 构造函数，第二个是自定义配置
插件通过 Vue.use(插件) 注册，use 会自动调用 install 方法
插件的作用：全局注册组件/指令、挂载原型方法、添加全局配置等

2. 极简插件示例

// 定义插件
const MyPlugin = {
  // 核心：install 方法
  install(Vue, options) {
    // 1. 挂载全局属性/方法
    Vue.prototype.$myMethod = () => alert('插件方法');
    
    // 2. 注册全局指令
    Vue.directive('focus', { inserted: el => el.focus() });
    
    // 3. 注册全局组件
    Vue.component('my-component', { template: '<div>插件组件</div>' });
  }
};

// 注册插件（自动调用 install）
Vue.use(MyPlugin);

3. Vue.use 源码原理

Vue.use 核心就是执行插件的 install 方法，并避免重复注册：

Vue.use = function(plugin) {
  // 避免重复注册
  if (plugin.installed) return;
  // 调用插件的 install 方法，传入 Vue 构造函数
  plugin.install.apply(plugin, [this, ...args]);
  plugin.installed = true;
};

二、Vuex 实现原理（核心）

Vuex 是专门为 Vue 设计的状态管理插件，它完全基于 Vue 插件机制开发，核心是利用 Vue 的响应式系统管理全局状态。

1. Vuex 整体流程

通过 Vue.use(Vuex) 触发 install 方法，注入 Vue
install 方法将 $store 挂载到所有 Vue 实例上
创建 Store 实例，利用 Vue 自身的响应式系统托管 state
封装 commit/mutation、dispatch/action 实现状态的可控修改

2. 核心一：install 方法（注入逻辑）

Vuex 的 install 是它能集成到 Vue 的关键：

let Vue; // 保存 Vue 构造函数（懒加载）

class Store {
  // ... Store 核心逻辑
}

// Vuex 插件的 install 方法
Store.install = function(_Vue) {
  Vue = _Vue; // 保存传入的 Vue 构造函数
  
  // 全局混入：在每个 Vue 实例创建时，挂载 $store
  Vue.mixin({
    beforeCreate() {
      // 根组件存在 store 选项，将其赋值给 $store
      if (this.$options.store) {
        this.$store = this.$options.store;
      } else {
        // 子组件继承父组件的 $store
        this.$store = this.$parent?.$store;
      }
    }
  });
};

export default Store;

✅ 作用：让所有组件都能通过 this.$store 访问全局状态。

3. 核心二：Store 类（响应式状态）

Vuex 没有自己造响应式轮子，直接用 new Vue() 实现 state 响应式：

class Store {
  constructor(options) {
    // 1. 保存配置
    this.state = options.state;
    this.mutations = options.mutations;
    this.actions = options.actions;
    this.getters = options.getters;

    // 2. 核心：利用 Vue 实现 state 响应式（关键原理）
    this._vm = new Vue({
      data: { $$state: this.state } // $$ 表示私有，不被代理
    });

    // 3. 绑定 getters （计算属性）
    this.handleGetters();
    
    // 4. 绑定 commit/dispatch，避免 this 丢失
    this.commit = this.commit.bind(this);
    this.dispatch = this.dispatch.bind(this);
  }
}

4. 核心三：状态修改规则（commit/dispatch）

Vuex 严格限制：只能通过 mutation 修改 state，保证状态可追踪：

class Store {
  // commit：触发 mutation 同步修改 state
  commit(type, payload) {
    const mutation = this.mutations[type];
    mutation(this.state, payload); // 直接修改响应式 state
  }

  // dispatch：触发 action 异步操作，最终调用 commit
  dispatch(type, payload) {
    const action = this.actions[type];
    action(this, payload); // 传入 store 实例，可调用 commit
  }

  // getters 实现：基于 Vue 计算属性
  handleGetters() {
    this.getters = {};
    Object.keys(this.getters).forEach(key => {
      Object.defineProperty(this.getters, key, {
        get: () => this._vm._computedWatchers[key].value
      });
    });
  }
}

5. 极简版 Vuex 完整代码

把上面逻辑整合，就是一个迷你 Vuex，能直接运行：

let Vue;

class Store {
  constructor(options) {
    this.state = options.state;
    this.mutations = options.mutations;
    this.actions = options.actions;

    // 响应式核心
    this._vm = new Vue({ data: { $$state: this.state } });

    this.commit = this.commit.bind(this);
    this.dispatch = this.dispatch.bind(this);
  }

  get state() { return this._vm._data.$$state; }

  commit(type, payload) { this.mutations[type](this.state, payload); }
  dispatch(type, payload) { this.actions[type](this, payload); }
}

Store.install = function(_Vue) {
  Vue = _Vue;
  Vue.mixin({
    beforeCreate() {
      if (this.$options.store) this.$store = this.$options.store;
      else this.$store = this.$parent?.$store;
    }
  });
};

export default Store;

三、核心原理总结

1. Vue 插件原理

统一规范：必须实现 install 方法
注册方式：Vue.use(插件) 自动执行 install
核心能力：全局扩展功能、挂载原型、注入依赖

2. Vuex 原理

插件机制：通过 install 注入 Vue，全局挂载 $store
响应式：直接使用 new Vue() 让 state 变成响应式数据
单向数据流：
- 视图 → dispatch → action → commit → mutation → 修改 state → 视图更新
封装限制：禁止直接修改 state，必须通过 mutation，保证状态可预测

总结

Vue 插件是规范，install 方法是入口，Vue.use 是注册器
Vuex 本质：基于 Vue 插件机制 + Vue 响应式系统的全局状态管理工具
核心亮点：复用 Vue 自身响应式，不重复造轮子，同时严格规范状态修改流程