本文参考珠峰架构公开课之
vuex
实现原理
vuex
中如果state
发生改变的时候会自动更新视图,此功能是借助vue
本身的双向绑定功能:
class Store {
constructor(options) {
this.vm = new Vue({
data() {
return {
temp_state: options.state
};
}
});
}
get state() {
return this.vm.temp_state;
}
}
-
在
Store
类的构造器中实例化了一个Vue
,并将options.state
赋值给temp_state
。赋值过程中会通过Object.defineProperty
对options.state
的子属性做监听,当属性改变会触发视图的更新。 -
组件中读取
vuex
的state
是通过this.$store.state.xxx
来获取,而Store
类中有个state
的访问器属性,如下:
get state() {
return this.vm.temp_state;
}
也就是说当组件中读取this.$store.state.xxx
的时候,实际上读取的是temp_state
的数据,因为temp_state
是响应式数据,所以当vuex
中的state
更新的时候,会触发视图的更新,相当于通过class
的访问器属性做了一层代理。
再进一步分析,双向绑定是一个发布订阅模式,在vue
中,依赖是通过Object.defineProperty
中的get
进行收集,也就是当读取属性的时候。在组件中读取this.$store.state.xxx
,实际读取的是temp_state
,从而会触发temp_state
的属性的get
进行依赖的收集。当数据发生改变的时候,会触发Object.defineProperty
中的set
,将收集的依赖进行更新。
网友评论