vuex的工作原理

讨论vuex的工作原理那么必须先从vue的双向绑定开始

vue的双向绑定

vue的双向绑定主要做了两件事：

1、数据劫持 2、添加观察者

数据劫持的实现

vue2.x通过 Object.defineProperty 递归可以实现

通过Object.defineProperty劫持对象的get和set方法；在所代理的属性的get方法中，当dep.Target存在的时候，就会调用dep.depend()

vue3.x通过proxy实现

Proxy(data, {
  get(target, key) {
    return target[key];
  },
  set(target, key, value) {
    let val = Reflect.set(target, key, value);
      _that.$dep[key].forEach(item => item.update());
    return val;
  }
})

观察者模式实现（vue）

vuex插件

vuex是依赖于vue的。

Vuex的双向绑定通过调用 new Vue实现，然后通过 Vue.mixin 注入到Vue组件的生命周期中（在所有组件的 beforeCreate生命周期注入了设置 this.$store这样一个对象），再通过劫持state.get将数据放入组件中

转载：掘金https://juejin.cn/post/6844904062240948231