偵聽器watch的實(shí)現(xiàn)原理
官方watch使用方式文檔
Vue中watch的使用方式有多種，包括：
- 函數(shù)形式
'test' (newVal, oldVal) {}
- 對(duì)象形式
'test': {
hadler () {}
}
- 監(jiān)控當(dāng)前實(shí)例上的方法
watch: {
'test': testMethod
},
methods: {
testMethod (newVal, oldVal) {}
}
- 寫成 key 和數(shù)組的方式盆昙，會(huì)逐一調(diào)用
'test': [
(newVal, oldVal) => {},
function handle2 (val, oldVal) {},
{
handler: function handle3 (val, oldVal) {},
}
]
前面只實(shí)現(xiàn)了渲染watcher，現(xiàn)在來(lái)實(shí)現(xiàn)偵聽器watcher（當(dāng)然都是同一個(gè)watcher構(gòu)造函數(shù)）
改寫init.js持搜，將實(shí)例方法脫離出來(lái)居凶，采用混入的方式來(lái)維護(hù)
// init.js
export function initMixin (Vue) {
+ stateMixin(Vue)
- Vue.prototype.$nextTick = nextTick
}
上面寫了watch多種使用方式，所以需要對(duì)watch進(jìn)行處理交煞，如果是數(shù)組則依次調(diào)用Vue.$watch來(lái)執(zhí)行坊夫，否則則直接執(zhí)行
// state.js
function initWatch (vm) {
let watch = vm.$options.watch
for (let key in watch) {
const handler = watch[key]
if (Array.isArray(handler)) {
handler.forEach(handle => {
createWatcher(vm, key, handler)
})
} else {
createWatcher(vm, key, handler) // 字符串砖第、對(duì)象、函數(shù)
}
}
}
function createWatcher (vm, exprOrFn, handler, options) { // options 可以用來(lái)標(biāo)識(shí)是用戶watcher
if (typeof handler === 'object' && typeof handler !== 'null') {
options = handler
handler = handler.handler // 是一個(gè)函數(shù)
}
if (typeof handler === 'string') {
handler = vm[handler] // 將實(shí)例的方法作為handler
}
return vm.$watch(exprOrFn, handler, options)
}
export function stateMixin (Vue) {
Vue.prototype.$nextTick = function (cb) {
nextTick(cb)
}
Vue.prototype.$watch = function (exprOrFn, cb, options) {
// 數(shù)據(jù)應(yīng)該迎來(lái)這個(gè)watcher环凿，數(shù)據(jù)變化后應(yīng)該讓watcher從新執(zhí)行
let watcher = new Watcher(this, exprOrFn, cb, {...options, user: true}) // user: true 用于標(biāo)識(shí)是用戶寫的偵聽器梧兼，非渲染watcher
if (options.immediate) {
cb() // 如果是immediate，則立即執(zhí)行
}
}
}
渲染watch與用戶傳入定義的watch智听，主要區(qū)分在于是否存在user屬性羽杰，如果有則證明是用戶傳入的watch渡紫，否則為渲染watch
watch需要對(duì)新老值進(jìn)行比較，如果不一致則去調(diào)用綁定回調(diào)考赛，因此還需要改寫get與run方法惕澎，來(lái)記錄新老值并進(jìn)行對(duì)比（之前僅獲取不會(huì)保留獲取的值）
// observer\watcher.js
class Watcher {
constructor (vm, exprOrFn, cb, options={}) {
+ this.user = options.user // 用戶watcher
+ if (typeof exprOrFn === 'function') {
+ this.getter = exprOrFn
+ } else {
+ this.getter = function () { // exprOrFn傳遞過來(lái)的可能是字符串，也可能是函數(shù)
+ // 當(dāng)去當(dāng)前實(shí)例上取值時(shí)颜骤，才會(huì)觸發(fā)依賴收集
+ let path = exprOrFn.split('.')
+ let obj = vm
+ for (let i = 0; i < path.length; i++) {
+ obj = obj[path[i]]
+ }
+ return obj
+ }
+ }
// 默認(rèn)會(huì)先調(diào)用一次get方法唧喉，進(jìn)行取值，將結(jié)果保存下來(lái)
- this.get()
+ this.value = this.get()
}
// 這個(gè)方法中會(huì)對(duì)屬性進(jìn)行取值操作
get () {
pushTarget(this) // Dep.target = watcher
- this.getter() // 取值
+ let result = this.getter() // 取值
popTarget()
return result
}
// 當(dāng)屬性取值時(shí)忍抽，需要記住這個(gè)watcher八孝，稍后數(shù)據(jù)變化了，去執(zhí)行自己記住的watcher即可
addDep (dep) {
let id = dep.id
if (!this.depsId.has(id)) { // dep是非重復(fù)的
this.depsId.add(id)
this.deps.push(dep)
dep.addSub(this)
}
}
// 真正觸發(fā)更新
run () {
- this.get()
+ let newValue = this.get()
+ let oldValue = this.value
+ this.value = newValue // 將老值更改掉
+ if (this.user) {
+ this.cb.call(this.vm, newValue, oldValue)
+ }
}
update () { // 多次更改鸠项，合并成一次（防抖）
queueWatcher(this)
}
}
computed的實(shí)現(xiàn)原理
computed的主要實(shí)現(xiàn)包括以下三要素：
- 通過
Object.defineProperty進(jìn)行劫持干跛，因?yàn)橛?jì)算屬性主要用于取值，需要進(jìn)行取值處理祟绊，如果值有變更需要通知視圖更新 - 計(jì)算屬性watcher楼入，用于取值邏輯與通知視圖更新
- 具有緩存，通過屬性
dirty標(biāo)識(shí)牧抽，如果dirty為true則證明需要重新取值浅辙，否則直接使用緩存值value即可
流程太長(zhǎng)而且還跟之前的邏輯大幅度耦合，如果要按照實(shí)現(xiàn)一步步拆解下來(lái)會(huì)有超級(jí)大量的重復(fù)代碼阎姥，一般流程太長(zhǎng)邏輯太繞的我都會(huì)將流程一步步用中文描述寫下來(lái)，有需要的就直接跟著源碼與我寫下的流程對(duì)著看吧~
- 如果用戶有傳入computed屬性鸽捻，則初始化計(jì)算屬性
initComputed - 在
vue._computedWatchers上存儲(chǔ)計(jì)算屬性watcher - 循環(huán)遍歷計(jì)算屬性呼巴，獲取計(jì)算屬性表達(dá)式（如果是對(duì)象形式，則獲取get屬性表達(dá)式）
- 為該屬性分配一個(gè)計(jì)算屬性watcher御蒲，并設(shè)置
lazy: true衣赶，用于標(biāo)識(shí)，因?yàn)橛?jì)算屬性默認(rèn)不做任何操作 - 定義計(jì)算屬性
defineComputed厚满，返回一個(gè)高階函數(shù)府瞄。當(dāng)計(jì)算屬性被使用時(shí)，該高階函數(shù)將會(huì)觸發(fā)對(duì)計(jì)算屬性中所使用的屬性值進(jìn)行依賴收集碘箍，屬性的依賴收集會(huì)將當(dāng)前watcher進(jìn)行記錄遵馆，此時(shí)計(jì)算屬性中使用到的屬性值都會(huì)記錄到該計(jì)算屬性watcher，記錄后則銷毀該watcher(popTarget中的stack.pop())丰榴，然后判斷是否還有watcher（Dep.target）货邓，如果有說明還有渲染watcher，也需要一并被收集起來(lái) - 最后通過
Object.defineProperty進(jìn)行劫持（簡(jiǎn)單總結(jié)起來(lái)就是四濒，計(jì)算屬性使用時(shí)换况，里面所使用的屬性會(huì)記錄該計(jì)算屬性watcher）
到這一步劫持收集完畢职辨，依賴屬性記錄的Dep中既有渲染watcher，也有計(jì)算屬性watcher戈二，發(fā)生變更時(shí)舒裤，觸發(fā)dep.notify，將存儲(chǔ)的watcher逐一執(zhí)行（棧結(jié)構(gòu)觉吭，渲染watcher在棧底腾供，計(jì)算屬性watcher的update僅為更改dirty標(biāo)識(shí)，而渲染watcher會(huì)觸發(fā)視圖更新）
// state.js
export function initState (vm) {
+ if (opts.computed) {
+ initComputed(vm)
+ }
}
+ // 初始化計(jì)算屬性
+ function initComputed (vm) {
+ let computed = vm.$options.computed
+ // 1. 需要有watcher 2. 需要通過defineProperty 3. dirty
+ const watchers = vm._computedWatchers = {} // 用來(lái)存放計(jì)算屬性的watcher
+
+ for (let key in computed) {
+ const userDef = computed[key]
+ const getter = typeof userDef === 'function' ? userDef : userDef.get
+
+ watchers[key] = new Watcher(vm, getter, () => {}, {lazy: true})
+ defineComputed(vm, key, userDef)
+ }
+ }
+
+ function defineComputed (target, key, userDef) {
+ const sharedPropertyDefinition = {
+ enumerable: true,
+ configurable: true,
+ get: () => {},
+ set: () => {}
+ }
+
+ // 函數(shù)式
+ if (typeof userDef === 'function') {
+ sharedPropertyDefinition.get = createComputedGetter(key) // 通過dirty來(lái)控制是否調(diào)用userDef
+ } else {
+ sharedPropertyDefinition.get = createComputedGetter(key) // 需要加緩存
+ sharedPropertyDefinition.set = userDef.set
+ }
+
+ Object.defineProperty(target, key, sharedPropertyDefinition)
+ }
+ // 用戶取值時(shí)調(diào)用該方法
+ function createComputedGetter (key) {
+ return function () { // 高階函數(shù)亏栈，每次取值調(diào)用該方法
+ const watcher = this._computedWatchers[key]
+ if (watcher) {
+ if (watcher.dirty) { // 判斷是否需要執(zhí)行用戶傳遞的方法台腥，默認(rèn)肯定是臟的
+ watcher.evaluate() // 對(duì)當(dāng)前watcher求值
+ }
+
+ if (Dep.target) {
+ watcher.depend()
+ }
+
+ return watcher.value // 默認(rèn)返回watcher上存的值
+ }
+ }
+ }
// observer\dep.js
class Dep {
notify () {
- this.subs.forEach(watcher => watcher.update())
+ this.subs.forEach(watcher => {
+ watcher.update()
+ })
+ }
}
let stack = []
export function pushTarget (watcher) {
Dep.target = watcher
+ stack.push(watcher) // stack有渲染watcher，也有其他watcher
}
export function popTarget () {
- Dep.target = null
+ stack.pop() // 棧型結(jié)構(gòu)绒北，第一個(gè)為渲染watcher黎侈，后面的為其他watcher，watcher使用過就出棧
+ Dep.target = stack[stack.length - 1]
}
// observer\watcher.js
class Watcher {
constructor (vm, exprOrFn, cb, options={}) {
+ this.lazy = options.lazy // 如果watcher上有l(wèi)azy屬性闷游，說明是一個(gè)計(jì)算屬性
+ this.dirty = this.lazy // dirty代表取值時(shí)是否執(zhí)行用戶提供的方法峻汉，可變
// 默認(rèn)會(huì)先調(diào)用一次get方法，進(jìn)行取值脐往，將結(jié)果保存下來(lái)
+ // 如果是計(jì)算屬性休吠，則什么都不做（計(jì)算屬性默認(rèn)不執(zhí)行）
+ this.value = this.lazy ? void 0 : this.get()
}
// 這個(gè)方法中會(huì)對(duì)屬性進(jìn)行取值操作
get () {
pushTarget(this) // Dep.target = watcher
// data屬性取值，觸發(fā)updateComponent业簿，其中this指向的時(shí)vm
// computed屬性取值瘤礁，會(huì)執(zhí)行綁定的函數(shù)，該函數(shù)中的this指向的是該watcher梅尤，所以this指向會(huì)有問題柜思，需要call(this.vm)
- let result = this.getter() // 取值
+ let result = this.getter.call(this.vm)
popTarget()
return result
}
update () { // 多次更改，合并成一次（防抖）
+ if (this.lazy) {
+ this.dirty = true
+ } else {
+ // 這里不要每次都調(diào)用get方法巷燥，get會(huì)重新渲染頁(yè)面
queueWatcher(this)
+ }
}
+ evaluate () {
+ this.value = this.get()
+ this.dirty = false // 取過值后標(biāo)識(shí)赡盘，標(biāo)識(shí)已經(jīng)取過值了
+ }
+ depend () {
+ // 計(jì)算屬性watcher會(huì)存儲(chǔ)dep，dep會(huì)存儲(chǔ)watcher
+ // 通過watcher找到對(duì)應(yīng)的所有dep缰揪，讓所有的dep都記住這個(gè)渲染watcher
+ let i = this.deps.length
+ while (i--) {
+ this.deps[i].depend()
+ }
+ }
}
