vuex的原理

前言
vuex作为vue官方出品的状态管理框架，以及其简单API设计、便捷的开发工具支持，在中大型的vue项目中得到很好的应用

理解computed
使用vuex中store中的数据，基本上离不开vue中一个常用的属性computed。官方一个最简单的例子如下

var vm = new Vue({
el: ‘#example’,
data: {
message: ‘Hello’
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// this 指向 vm 实例
return this.message.split(’’).reverse().join()
}
}
})
vue的computed是如何更新的，为什么当vm.message发生变化时，vm.reversedMessage也会自动发生变化？

vue中data属性和computed相关的源代码。

// src/core/instance/state.js
// 初始化组件的state
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
// 当组件存在data属性
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
// 当组件存在 computed属性
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}

initState方法当组件实例化时会自动触发，该方法主要完成了初始化data,methods,props,computed,watch这些我们常用的属性，我们来看看我们需要关注的initData和initComputed（为了节省时间，去除了不太相关的代码）

先看看initData这条线

// src/core/instance/state.js
function initData (vm: Component) {
let data = vm.$options.data
data = vm._data = typeof data === ‘function’
? getData(data, vm)
: data || {}
// …省略无关代码

// 将vue的data传入observe方法
observe(data, true /* asRootData */)
}

// src/core/observer/index.js
export function observe (value: any, asRootData: ?boolean): Observer | void {
if (!isObject(value)) {
return
}
let ob: Observer | void
// …省略无关代码
ob = new Observer(value)
if (asRootData && ob) {
ob.vmCount++
}
return ob
}

在初始化的时候observe方法本质上是实例化了一个Observer对象，这个对象的类是这样的

// src/core/observer/index.js
export class Observer {
value: any;
dep: Dep;
vmCount: number; // number of vms that has this object as root $data

constructor (value: any) {
this.value = value
// 关键代码 new Dep对象
this.dep = new Dep()
this.vmCount = 0
def(value, ‘ob’, this)
// …省略无关代码
this.walk(value)
}

walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
// 给data的所有属性调用defineReactive
defineReactive(obj, keys[i], obj[keys[i]])
}
}
}
在对象的构造函数中，最后调用了walk方法，该方法即遍历data中的所有属性，并调用defineReactive方法，defineReactive方法是vue实现 MDV(Model-Driven-View)的基础，本质上就是代理了数据的set,get方法，当数据修改或获取的时候，能够感知（当然vue还要考虑数组，Object中嵌套Object等各种情况，本文不在分析）。我们具体看看defineReactive的源代码

// src/core/observer/index.js
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
// 重点，在给具体属性调用该方法时，都会为该属性生成唯一的dep对象
const dep = new Dep()

// 获取该属性的描述对象
// 该方法会返回对象中某个属性的具体描述
// api地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescri