不知為何掘金的文章最近都流行以 "字節跳動面試官" 作為開頭，不蹭一波都不好意思說逛過掘金了。23333
最近是真到了面試的季節，那么就說一下 Vuex 的源碼吧。看完你會發現，Vue和Vuex的實現原理主要就那么幾行代碼。
Vue雙向綁定
要說 Vuex 的雙向綁定那么必須先從 Vue 的雙向綁定開始
Vue 的雙向綁定大部分文章都說的很詳細，這里精簡點說一下，因為重點還是講 Vuex
從Vue的源碼來看，Vue的雙向綁定主要做了2件事
- 數據劫持
- 添加觀察者
數據劫持實現：（源碼精簡）
// 老版本通過 Object.defineProperty 遞歸可以實現
// src/core/observer/index.js
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
}
if (Array.isArray(value)) {
dependArray(value)
}
}
return value
},
set: function reactiveSetter (newVal) {
const value = getter ? getter.call(obj) : val
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
dep.notify()
}
})
這里無非就是劫持了對象的get和set方法。在所代理的屬性的get方法中，當dep.Target存在的時候會調用 dep.depend()，
劃重點：2行代碼
- Object.defineProperty
- dep.depend()
// 最新版可以通過 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;
}
})
從上面的代碼看出，無非就劫持了對象的get和set方法。在數據劫持之外最重要的部分就是 Dep 和 Watcher,這其實是一個觀察者模式。用最簡單的代碼實現以下 Vue 的觀察者模式。
觀察者模式實現：（源碼精簡）
// 觀察者
class Dep {
constructor() {
this.subs = []
}
addSub(sub) {
this.subs.push(sub)
}
depend() {
if (Dep.target) {
Dep.target.addDep(this);
}
}
notify() {
this.subs.forEach(sub => sub.update())
}
}
// 被觀察者
class Watcher {
constructor(vm, expOrFn) {
this.vm = vm;
this.getter = expOrFn;
this.value;
}
get() {
Dep.target = this;
var vm = this.vm;
var value = this.getter.call(vm, vm);
return value;
}
evaluate() {
this.value = this.get();
}
addDep(dep) {
dep.addSub(this);
}
update() {
console.log('更新, value:', this.value)
}
}
// 觀察者實例
var dep = new Dep();
// 被觀察者實例
var watcher = new Watcher({x: 1}, (val) => val);
watcher.evaluate();
// 觀察者監聽被觀察對象
dep.depend()
dep.notify()
劃重點：3件事
- 通過
watcher.evaluate()將自身實例賦值給Dep.target - 調用
dep.depend()將dep實例將 watcher 實例 push 到 dep.subs中 - 通過數據劫持，在調用被劫持的對象的 set 方法時，調用 dep.subs 中所有的
watcher.update()
從此。雙向綁定完成。
vuex插件
有了上文作為鋪墊，我們就可以很輕松的來解釋vuex的原理了。
Vuex僅僅是Vue的一個插件。Vuex只能使用在vue上，因為其高度依賴于Vue的雙向綁定和插件系統。
Vuex的注入代碼比較簡單，調用了一下applyMixin方法，現在的版本其實就是調用了Vue.mixin，在所有組件的 beforeCreate生命周期注入了設置 this.$store這樣一個對象。
// src/store.js
export function install (_Vue) {
if (Vue && _Vue === Vue) {
return
}
Vue = _Vue
applyMixin(Vue)
}
// src/mixins.js
export default function (Vue) {
const version = Number(Vue.version.split('.')[0])
if (version >= 2) {
Vue.mixin({ beforeCreate: vuexInit })
} else {
const _init = Vue.prototype._init
Vue.prototype._init = function (options = {}) {
options.init = options.init
? [vuexInit].concat(options.init)
: vuexInit
_init.call(this, options)
}
}
function vuexInit () {
const options = this.$options
// store injection
if (options.store) {
this.$store = typeof options.store === 'function'
? options.store()
: options.store
} else if (options.parent && options.parent.$store) {
this.$store = options.parent.$store
}
}
}
劃重點：1行代碼 Vue.mixin
那么 Vuex.Store 是如何實現的呢？
// src/store.js
constructor (options = {}) {
const {
plugins = [],
strict = false
} = options
// store internal state
this._committing = false
this._actions = Object.create(null)
this._actionSubscribers = []
this._mutations = Object.create(null)
this._wrappedGetters = Object.create(null)
this._modules = new ModuleCollection(options)
this._modulesNamespaceMap = Object.create(null)
this._subscribers = []
this._watcherVM = new Vue()
const store = this
const { dispatch, commit } = this
this.dispatch = function boundDispatch (type, payload) {
return dispatch.call(store, type, payload)
}
this.commit = function boundCommit (type, payload, options) {
return commit.call(store, type, payload, options)
}
// strict mode
this.strict = strict
const state = this._modules.root.state
// init root module.
// this also recursively registers all sub-modules
// and collects all module getters inside this._wrappedGetters
installModule(this, state, [], this._modules.root)
resetStoreVM(this, state)
// apply plugins
plugins.forEach(plugin => plugin(this))
}
劃重點：其實上面的代碼絕大部分都不需要關注的 - -。其實重點就是一行代碼resetStoreVM(this, state)。
那么 resetStoreVM 里面是什么呢？
// src/store.js
function resetStoreVM (store, state, hot) {
Vue.config.silent = true
store._vm = new Vue({
data: {
$$state: state
},
computed
})
}
劃重點：還是一行代碼：new Vue。通過 Vue自己的雙向綁定然后注入給
你是不是以為就這樣結束了呢？NoNoNo，當你再Vue中通過 this 如果調用 store的數據呢？
// 當獲取state時，返回以雙向綁定的$$sate
var prototypeAccessors$1 = { state: { configurable: true } };
prototypeAccessors$1.state.get = function () {
return this._vm._data.$$state
};
// 將state定義在原型中
Object.defineProperties( Store.prototype, prototypeAccessors$1 );
其實就是獲取 this._vm._data.$$state 而已啦。
### 最后
歡迎關注公眾號「前端進階課」認真學前端，一起進階。
