在 state.js 的 initData()
函数中,使用的是 observe()
方法来为数据对象绑定一个Observer对象,Observer对象执行 defineReactive()
方法为数据对象设置 setter 和 getter。
而在 initProps()
函数中,通过遍历 props
选项直接对数据执行了 defineReactive()
方法来设置 setter 和 getter。
Observer类主要做的事情就是对数据进行双向绑定,通过Object.defineProperty来做数据劫持,然后会实例化一个Dep类。
PS:我们在开发中,可以用observer代替模块里的状态管理
store.js
import Vue from 'vue';
export const state = Vue.observable({
name:'',
password:''
});
export const mutations = {
setName: setName => (state.name = setName),
setPassword: setPassword=>(state.password=setPassword)
};
应用:
import {state , mutations} from './store';
mutations.setName('张三');