背景
成都創(chuàng)新互聯(lián)主營(yíng)阿巴嘎網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開發(fā),阿巴嘎h5微信小程序搭建,阿巴嘎網(wǎng)站營(yí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說(shuō)起:
當(dāng)一個(gè)模版依賴了很多mixin的時(shí)候,很容易出現(xiàn)數(shù)據(jù)來(lái)源不清或者命名沖突的問(wèn)題,而且開發(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的過(guò)程中,實(shí)例化一個(gè)Watcher觀察者觀察整個(gè)比對(duì)后的vnode,同時(shí)也會(huì)訪問(wèn)這些依賴的屬性,觸發(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過(guò)程放入微任務(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://muchs.cn/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)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容