Vuex详解(二)

144 阅读1分钟

1.Vuex的响应式原理

读到Vuex源码,我们可以知道,Vuex中的state,getters,actions,mutations等属性都被加入了Vue的响应式系统当中了(前提是必须要在state先定义过,才会被加入到Vue的响应式系统里面),例子:比如我们在state中定义了一个数组,数组里面有N个对象,Vuex都为每个对象的每个属性添加上了dep这个对象,dep的作用是为了监听当前自己对应属性的变化,一旦dep(观察者模式)监听到了有属性进行变化的时候,立刻通知watcher(观察者)提醒它们变化,(dep -> [watcher,watcher,.....])

image.png

2.响应式

		// 这种向数组上添加的方式 不是响应式的
		this.result['address'] = 'LA'
		
                //arr.splice(初始位置,删除后面几个,修改的值)都是响应式的
                this.result.splice(0,1,'LA')
                
                // 要通过Vue.set(要修改的对象,key/索引,修改的值)  
		Vue.set(this.result,0,'LA')
                
                //通过delete关键字去删除属性的也不是响应式的
                delete state.list.age
                
                //要通过Vue.delete(对象,key),就是是响应式的
                Vue.delete(state.list,'age')