您的当前位置:首页正文

vuex的工作原理

2024-11-29 来源:个人技术集锦

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

vue的双向绑定

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

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

数据劫持的实现

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

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将数据放入组件中

转载:

显示全文