前言：

在開發(fā)中偶然檢查Network請求的時(shí)候發(fā)現(xiàn)，在頁面中created鉤子函數(shù)中請求了一個(gè)接口，但是頁面這個(gè)頁面加載的時(shí)候，接口會(huì)連續(xù)請求兩邊，然后我就排查是否有其他地方調(diào)用了同樣的接口，檢查了好幾遍后發(fā)現(xiàn)并沒有，WTF，然后我在created中打印了一下，驚奇的發(fā)現(xiàn)。。。created會(huì)執(zhí)行兩次打印。。。

WTF、WTF、WTF，小朋友你是否有很多問號？？？，然后試了下，不光created會(huì)執(zhí)行兩遍，mounted也行，就連watch里面監(jiān)聽的也會(huì)，握草（草是一種植物），此處省略我咔咔排查了一個(gè)小時(shí)各種刪除各種排查的步驟。。。

得出以下結(jié)論：

第一種：

頁面布局不合理，會(huì)導(dǎo)致執(zhí)行兩遍，比如行內(nèi)元素內(nèi)嵌套了塊級元素，然后塊級元素又使用了for，或者if，要想排查是否是這種情況，只能一點(diǎn)點(diǎn)刪除代碼，看看刪除了那一塊的代碼后不再執(zhí)行兩遍，然后從病根出排查修改。

第二種：

有使用v-if和v-else的結(jié)合也會(huì)執(zhí)行兩遍，這種的我測試了下，把v-if都改成v-show。。。就TM的好了。

第三種：

我在頁面中使用了swiper，發(fā)現(xiàn)。。。swiper的代碼也會(huì)觸發(fā)執(zhí)行兩遍，應(yīng)該是swiper的代碼觸發(fā)了規(guī)則，然后我在swiper組件使用一個(gè)div包裹了一下。。。發(fā)現(xiàn)好了，無語，毫無規(guī)則可言

第四種：

還未發(fā)現(xiàn)，，，歡迎評論增加

最后：

此文章使用了較多的**修飾詞，請?jiān)彙?。。因?yàn)槟欠N你想象不到的問題原因著實(shí)讓人。不說了，求個(gè)贊吧?。?！

補(bǔ)充知識：vue.js頁面加載執(zhí)行created,mounted先后順序

created頁面加載未渲染html之前執(zhí)行。

mounted渲染html后再執(zhí)行。

由于created在html模板生產(chǎn)之前所以無法對Dom進(jìn)行操作而mounted可以。

以上這篇解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論