vue2中@hook的解析與妙用實(shí)例
前言
@hook是什么？用來(lái)監(jiān)聽(tīng)組件生命周期的回調(diào)函數(shù)。
這和生命周期函數(shù)mounted，created，updated有什么區(qū)別？
區(qū)別1：@hook 會(huì)在對(duì)應(yīng)的生命周期函數(shù)執(zhí)行后執(zhí)行。
區(qū)別2：@hook 可以在父組件監(jiān)聽(tīng)子組件的生命周期運(yùn)行情況。
從這段vue源代碼中我們能看到hook的部分調(diào)用邏輯，vm.$emit('hook:' + hook) 其實(shí)就是在調(diào)用我們寫的@hook:mounted="xxx"，@hook這個(gè)api卻沒(méi)有在官方文檔中出現(xiàn)，所以鮮有人知道它的存在和用法。
幾種用法
用法一 將放在多個(gè)生命周期的邏輯，統(tǒng)一到一個(gè)生命周期中
通常寫法
export default {
components: {},
data: () => {
return {
name: 'dx',
};
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
console.log(this.name);
// 每一個(gè)小時(shí)刷新一次頁(yè)面
setInterval(() => {
location.reload()
}, 60 * 60 * 1000);
},
}
@hook的用法
export default {
components: {},
data: () => {
return {
name: 'dx',
};
},
created() {
console.log('created');
this.$on('hook:beforeMount', () => {
console.log('beforeMount');
});
this.$on('hook:mounted', () => {
console.log(this.name); // this 就是組件實(shí)例自己
// 每一個(gè)小時(shí)刷新一次頁(yè)面
setInterval(() => {
location.reload();
}, 60 * 60 * 1000);
});
},
};
注意
- 按照生命周期執(zhí)行的先后周期，我們只能mounted生命周期里，寫這之后的生命周期，而不能寫
hook:beforeMount this.$on第二個(gè)回調(diào)函數(shù)的this指的是當(dāng)前組件實(shí)例本身，無(wú)論這個(gè)回調(diào)函數(shù)是否是箭頭函數(shù)。
用法二 監(jiān)聽(tīng)子組件生命周期運(yùn)行的情況
通常寫法
// 父組件
<Children @buttonRender="ButtonRender"/>
export default {
name: 'Parents',
components: {
Children
},
data: () => {
return {
name: 'dx',
};
},
methods: {
ButtonRender() {
console.log('渲染完成')
}
}
}
// 子組件
export default {
name: 'Children',
components: {},
data: () => {},
methods: {},
mounted() {
this.$emit('buttonRender')
}
}
@hook的寫法
<Children @hook:mounted="ButtonRender"/>
export default {
name: 'Parents',
components: {
Children
},
data: () => {
return {
name: 'dx',
};
},
methods: {
ButtonRender() {
console.log('渲染完成')
}
}
}
注意
- @hook的寫法可以不需要在子組件里面編寫其它代碼
- 從vue源碼中可以發(fā)現(xiàn) vm.$emit('hook:' + hook) 這里雖然調(diào)用了hook但沒(méi)有返回參數(shù)，也就是說(shuō)，上面代碼中ButtonRender沒(méi)有默認(rèn)參數(shù)。
- 同樣承接著2來(lái)說(shuō)，由于ButtonRender沒(méi)有默認(rèn)參數(shù)，所以我們無(wú)法在ButtonRender函數(shù)中獲取子組件Children的實(shí)例。
為了解決3的問(wèn)題，我嘗試著想到一種方法，利用ref獲取子組件的實(shí)例，將子組件的實(shí)例拿到父組件的this中。ButtonRender中的this就是父組件實(shí)例，和尋常methods中的函數(shù)沒(méi)區(qū)別。
<Children ref="child1" @hook:mounted="ButtonRender"/>
export default {
name: 'Parents',
components: {
Children
},
data: () => {
return {
name: 'dx'
};
},
mounted() {},
methods: {
ButtonRender() {
console.log(this.$refs.child1) // this.$refs.child1就是子組件Children的實(shí)例了
console.log('渲染完成')
}
}
};
但是，我們都知道，vue ref的綁定都是掛載完成之后，所以這個(gè)方法也只能用在@hook:mounted 、@hook:updated等mounted之后執(zhí)行的生命周期中，而不能用在 比如@hook:beforeMount中。
運(yùn)用場(chǎng)景
場(chǎng)景一
許多時(shí)候，我們不得不在不同的生命周期中執(zhí)行某些邏輯，并且這些邏輯會(huì)用到一些通用的變量，這些通用變量按照之前的方式，我們不得不存在data中。
<script>
export default {
data() {
return {
timer:null
}
}
mounted () {
this.timer = setInterval(() => {
// todo
}, 1000);
}
beforeDestroy () {
clearInterval(this.timer)
}
}
</script>
優(yōu)化后，就不存在這個(gè)問(wèn)題，是不是很好用。
<script>
export default {
mounted () {
const timer = setInterval(() => {
// todo
}, 1000);
this.$once('hook:beforeDestroy', function () {
clearInterval(timer)
})
}
}
</script>
場(chǎng)景二
如果屬于同一業(yè)務(wù)的邏輯要在不同的生命周期中執(zhí)行，下面這樣會(huì)更利于閱讀和維護(hù)。
export default {
created() {
this.$on('hook:mounted', () => {
掛載時(shí)執(zhí)行一些業(yè)務(wù)A相關(guān)邏輯
})
this.$on('hook:updated', () => {
掛載時(shí)執(zhí)行一些業(yè)務(wù)A相關(guān)邏輯
})
this.$once('hook:beforeDestroy', () => {
掛載時(shí)執(zhí)行一些業(yè)務(wù)A相關(guān)邏輯
})
}
}
場(chǎng)景三
想要監(jiān)聽(tīng)別人封裝好的組件(第三方組件)的生命周期，你不可能去第三方子組件的生命周期中寫代碼。
比如 element-ui 的button組件，在子組件渲染完成后，我想做某些邏輯變更。
<el-button type="primary" @hook:mounted="ButtonRender" :disabled="disabled">{{name}}</el-button>
export default {
name: 'Parents',
data: () => {
return {
name: 'dx',
disabled: true
};
},
methods: {
ButtonRender() {
this.disabled = false
this.name = 'yx'
}
}
}
所有生命周期執(zhí)行的順序
第一次渲染
父beforeCreate
父 hook:beforeCreate
父created
父 hook:created
父beforeMount
父 hook:beforeMount
子beforeCreate
子hook:beforeCreate
子created
子hook:created
子beforeMount
子hook:beforeMount
子mounted
子hook:mounted
父mounted
父 hook:mounted
更新時(shí)
父beforeUpdate
父hook:beforeUpdate
子beforeUpdate
子hook:beforeUpdate
子updated
子hook:updated
父updated
父hook:updated
組件摧毀時(shí)
父beforeDestroy
父hook:beforeDestroy
子beforeDestroy
子hook:beforeDestroy
子destroyed
子hook:destroyed
父destroyed
父hook:destroyed
以上內(nèi)容涉及到vue父子組件生命周期執(zhí)行順序的知識(shí)，但對(duì)于@hook:xxx來(lái)說(shuō)，在xxx執(zhí)行后就會(huì)立即執(zhí)行@hook:xxx
總結(jié)
到此這篇關(guān)于vue2中@hook的解析與妙用的文章就介紹到這了,更多相關(guān)vue2 @hook妙用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
想到頭禿也想不到的Vue3復(fù)用組件還可以這么hack的用法
這篇文章主要為大家介紹了想到頭禿也想不到的Vue3復(fù)用組件還可以這么hack的用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
vue2.x 通過(guò)后端接口代理,獲取qq音樂(lè)api的數(shù)據(jù)示例
今天小編就為大家分享一篇vue2.x 通過(guò)后端接口代理,獲取qq音樂(lè)api的數(shù)據(jù)示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue+quasar使用遞歸實(shí)現(xiàn)動(dòng)態(tài)多級(jí)菜單
這篇文章主要為大家詳細(xì)介紹了vue+quasar使用遞歸實(shí)現(xiàn)動(dòng)態(tài)多級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue中拆分視圖層代碼的5點(diǎn)建議,下面就如何進(jìn)行腳本代碼拆分提供一些思路，有一些可能是很基本的原則，為盡可能完整就放在一起，你并不需要從最開(kāi)始就采納所有的建議。需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue2.0+使用md-edit編輯器的解決方案，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2024-02-02
這篇文章主要介紹了vue.js template模板的使用，主要是模仿餓了么布局，用到了4個(gè)組件，分別是header.vue,goods.vue,ratings.vue,seller.vue，感興趣的朋友跟隨腳本之家小編一起看看實(shí)現(xiàn)代碼2018-08-08
vue進(jìn)入頁(yè)面時(shí)滾動(dòng)條始終在底部代碼實(shí)例
這篇文章主要介紹了vue進(jìn)入頁(yè)面時(shí)滾動(dòng)條始終在底部，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
progressbar組件在一個(gè)可以直接運(yùn)行的npm包，通過(guò)Yeoman進(jìn)行構(gòu)建，再通過(guò)Gulp+Webpack構(gòu)建工具。這篇文章給大家介紹了Vue進(jìn)度條progressbar組件2018-04-04
vue實(shí)現(xiàn)靜態(tài)頁(yè)面點(diǎn)贊和取消點(diǎn)贊功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)靜態(tài)頁(yè)面點(diǎn)贊和取消點(diǎn)贊的功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購(gòu)物車案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05