背景

成都創(chuàng)新互聯(lián)主營阿巴嘎網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā),阿巴嘎h5微信小程序搭建,阿巴嘎網(wǎng)站營銷推廣歡迎阿巴嘎等地區(qū)企業(yè)咨詢

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

源碼地址：vue-hooks-poc

為什么要用hooks?

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

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

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

vue-hooks

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

注意：vue內(nèi)部默認(rèn)將re-render過程放入微任務(wù)隊(duì)列中，當(dāng)前的render會(huì)在上一次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
}
}
}

網(wǎng)站標(biāo)題：深度了解vue.js中hooks的相關(guān)知識(shí)-創(chuàng)新互聯(lián)
瀏覽路徑：http://chinadenli.net/article34/cdopse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、移動(dòng)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、做網(wǎng)站、搜索引擎優(yōu)化、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)