背景

最近研究了vue3.0的最新進展，發(fā)現(xiàn)變動很大，總體上看，vue也開始向hooks靠攏，而且vue作者本人也稱vue3.0的特性吸取了很多hooks的靈感。所以趁著vue3.0未正式發(fā)布前，抓緊時間研究一下hooks相關的東西。

源碼地址：vue-hooks-poc

為什么要用hooks?

首先從class-component/vue-options說起：

• 跨組件代碼難以復用
• 大組件，維護困難，顆粒度不好控制，細粒度劃分時，組件嵌套存層次太深-影響性能
• 類組件，this不可控，邏輯分散，不容易理解
• mixins具有副作用，邏輯互相嵌套，數(shù)據(jù)來源不明，且不能互相消費

當一個模版依賴了很多mixin的時候，很容易出現(xiàn)數(shù)據(jù)來源不清或者命名沖突的問題，而且開發(fā)mixins的時候，邏輯及邏輯依賴的屬性互相分散且mixin之間不可互相消費。這些都是開發(fā)中令人非常痛苦的點，因此，vue3.0中引入hooks相關的特性非常明智。

vue-hooks

在探究vue-hooks之前，先粗略的回顧一下vue的響應式系統(tǒng)：首先，vue組件初始化時會將掛載在data上的屬性響應式處理（掛載依賴管理器），然后模版編譯成v-dom的過程中，實例化一個Watcher觀察者觀察整個比對后的vnode，同時也會訪問這些依賴的屬性，觸發(fā)依賴管理器收集依賴（與Watcher觀察者建立關聯(lián)）。當依賴的屬性發(fā)生變化時，會通知對應的Watcher觀察者重新求值（setter->notify->watcher->run），對應到模版中就是重新render(re-render)。

注意：vue內(nèi)部默認將re-render過程放入微任務隊列中，當前的render會在上一次render flush階段求值。

withHooks

export function withHooks(render) {
return {
data() {
return {
_state: {}
}
},
created() {
this._effectStore = {}
this._refsStore = {}
this._computedStore = {}
},
render(h) {
callIndex = 0
currentInstance = this
isMounting = !this._vnode
const ret = render(h, this.$attrs, this.$props)
currentInstance = null
return ret
}
}
}