成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue一個(gè)案例引發(fā)的動態(tài)組件與全局事件綁定總結(jié)

MycLambert / 1527人閱讀

摘要：我們需要的最好效果肯定是當(dāng)前的全局事件就在當(dāng)前的組件下產(chǎn)生作用，當(dāng)我們切換到其他組件時(shí)，事件自動刪除，于是我可能想到的就是利用鉤子函數(shù)去刪除這個(gè)全局事件。

最近在自學(xué) Vue 也了解了一些基本用法，也記錄了一些筆記有興趣的朋友可以去查看我的其他文章，技術(shù)這東西真的不能光靠看，看是沒有的，你必須要動手實(shí)踐，只有在實(shí)戰(zhàn)項(xiàng)目中才能發(fā)現(xiàn)問題，才能發(fā)現(xiàn)我們沒有掌握的知識點(diǎn)，然后發(fā)現(xiàn)問題解決問題，我們的能力才能得以提升，要不然就有點(diǎn)眼高手低了。

基于這個(gè)想法于是就開始自己去擼了一個(gè)旅游網(wǎng)站，旅游網(wǎng)站嘛避免不了城市的選擇，所以在實(shí)現(xiàn)城市選擇列表的時(shí)候碰到的一些問題，以及解決辦法今天就記錄下來做一個(gè)總結(jié)。

城市列表選擇組件

首先說說我們要實(shí)現(xiàn)一個(gè)什么樣的城市選擇組件：

輸入框獲取焦點(diǎn)時(shí)，顯示組件

點(diǎn)擊城市列表更新輸入框的城市顯示

點(diǎn)擊其他空白處組件隱藏

在切換到其他組件時(shí)，選擇的城市保留而不是被重置

下面我們就一步一步的來拆解

第一步

輸入框獲取焦點(diǎn)后顯示組件很簡單，我們給輸入框綁定焦點(diǎn)事件然后給組件傳入一個(gè)顯示的狀態(tài)即可，我們把 isShowCityList 傳遞給城市選擇組件控制行為。
第二步

我們也不做過多的表述本文想更多的是介紹動態(tài)組件與全局事件的綁定，利用的是子組件給父組件利用自定義事件 $emit 傳給父組件。

第三步

需要我們?nèi)c(diǎn)擊其他地方城市組件被隱藏，有些同學(xué)的第一印象可能是利用 input 的 blur 事件（就是失去焦點(diǎn)事件），只要我們的 input 失去焦點(diǎn)時(shí)，我們就隱藏。

其實(shí)我的第一印象也是如此，但是我們綁定的是 input 的失去焦點(diǎn)事件以后，當(dāng)我們選擇城市列表的時(shí)候也是 input 失去焦點(diǎn)的時(shí)候，所以我們就無法選取城市。顯然這種思路是不行的。

所以這里我們只能去用到 Vue 的全局事件的綁定，然后去進(jìn)行一個(gè)判斷我們點(diǎn)擊的節(jié)點(diǎn)是哪里，如果是城市組件以外我們就進(jìn)行隱藏操作。

我們在 mounted 鉤子函數(shù)中，進(jìn)行如下操作。

mounted() {
    document.addEventListener("click", e => {
        console.log("全局事件被觸發(fā)");
        if (!this.$refs.searchCity.contains(e.target)) {
            this.isLoadCityList = false;
        }
    });
}

OK，進(jìn)行這一步之后，我們的問題得到了解決，只要我們點(diǎn)擊這個(gè)容器以外的地方就會隱藏城市列表組件，我以為算是結(jié)束了，不過那是不可能的，還是我太年輕了，這樣做的后果就是不管我們點(diǎn)擊任何一個(gè)地方它都會觸發(fā)這個(gè)事件，即使是我們切換到其他組件時(shí)，事件照樣會被觸發(fā)，顯然這個(gè)不是我們想要的，因?yàn)楫?dāng)前事件會被無限觸發(fā)，無疑會給我們帶來不可預(yù)見的問題。

我們需要的最好效果肯定是當(dāng)前的全局事件就在當(dāng)前的組件下產(chǎn)生作用，當(dāng)我們切換到其他組件時(shí)，事件自動刪除，于是我可能想到的就是利用 beforeDestroy 鉤子函數(shù)去刪除這個(gè)全局事件。也就是當(dāng)我們切換到其他組件時(shí)，去刪除這個(gè)全局事件。

beforeDestroy() {
    document.removeEventListener("click", () => {
      //...
    });
}

你以為這樣我還就能解決問題了嗎？顯然還是不能，還是太年輕，只是這樣我們是解除不了綁定的事件，那我們該怎么辦呢？其實(shí)這里面有一個(gè)坑，大坑，因?yàn)檫@個(gè)大坑自己不知道，差了許多資料也沒查出來，因?yàn)椴畹乃悸峰e了，最后在一個(gè)群里問了一個(gè)大佬，才得出答案，不得不說與前輩交流很重要啊，能幫你少踩很多坑。

這里如果想要解除綁定，解除和綁定的兩個(gè)回調(diào)函數(shù)必須一致，什么意思呢？看代碼你就明白。如果不這么操作，你是解除不掉事件的，至于更深的原因我也不怎么明白了，以后再去查閱一些資料。

methods: {
  isSearchCityNode(e) {
    if (!this.$refs.searchCity.contains(e.target)) {
      console.log("全局事件被觸發(fā)");
      this.isLoadCityList = false;
    }
  }  
},
mounted() {
    document.addEventListener("click", this.isSearchCityNode);
},
beforeDestroy() {
    document.removeEventListener("click", this.isSearchCityNode);
}
第四步

需要我們在切換組件的時(shí)候保留我們選擇的城市，如果不保留我們每次切換到其他組件時(shí)，我們選擇的城市都會被重置為默認(rèn)值，這個(gè)體驗(yàn)肯定是肯差的，也不是我們想要的。

被重置的原因則是我們在每次在不同的組件進(jìn)行切換的時(shí)候，組件都會進(jìn)行新建與銷毀，這也會導(dǎo)致重復(fù)渲染問題對性能也是不友好的。

那么我們該如何去處理這個(gè)問題呢？ 我這里使用了 keep-alive 去解決這個(gè)問題，那么 keep-alive 該如何使用以及作用是什么呢？

包裹動態(tài)組件時(shí)，會緩存不活動的組件實(shí)例，而不是銷毀它們，它自身不會渲染一個(gè) DOM 元素，也不會出現(xiàn)在父組件鏈中。

但是當(dāng)我們使用 的時(shí)候，我們的 beforeDestroy 鉤子函數(shù)就會失效，導(dǎo)致我們第三步的全局事件的解綁就不能執(zhí)行了，原因是我們的組件是被緩存起來，并沒有被銷毀。自然會失效，但是我們并不慌，當(dāng)我們使用 時(shí)，activated 和 deactivated 兩個(gè)鉤子函數(shù)被觸發(fā)。

activated：keep-alive 組件激活時(shí)調(diào)用。

deactivated：keep-alive 組件停用時(shí)調(diào)用。

所以我們不難發(fā)現(xiàn)，我們完全可以使用這兩個(gè)鉤子去實(shí)現(xiàn)我們?nèi)质录慕壎ㄅc解綁，簡直完美。

activated() {
    document.addEventListener("click", this.isSearchCityNode);
},
deactivated() {
    document.removeEventListener("click", this.isSearchCityNode);
}
總結(jié)

通過一個(gè)城市列表組件的案例，介紹了我們在 Vue 中如何綁定全局事件以及進(jìn)行優(yōu)化，一定要記住事件的綁定與解除哪里有一個(gè)大坑。

我們通過 可以創(chuàng)建一個(gè)可以緩存的組件，而且會新增兩個(gè)鉤子函數(shù)提供我們使用

文中如有不足之處，歡迎大神拍磚！

關(guān)注微信公眾號：六小登登。領(lǐng)取全套學(xué)習(xí)資源

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99183.html

相關(guān)文章

  • Vue一個(gè)案例引發(fā)的遞歸組件的使用

    摘要：今天我們繼續(xù)使用的擼我們的實(shí)戰(zhàn)項(xiàng)目，只有在實(shí)戰(zhàn)中我們才會領(lǐng)悟更多，光紙上談兵然并卵，繼上篇我們的一個(gè)案例引發(fā)的動態(tài)組件與全局事件綁定總結(jié)之后，今天來聊一聊我們?nèi)绾卧陧?xiàng)目中使用遞歸組件。 今天我們繼續(xù)使用 Vue 的擼我們的實(shí)戰(zhàn)項(xiàng)目，只有在實(shí)戰(zhàn)中我們才會領(lǐng)悟更多，光紙上談兵然并卵，繼上篇我們的《Vue一個(gè)案例引發(fā)的動態(tài)組件與全局事件綁定總結(jié)》 之后，今天來聊一聊我們?nèi)绾卧陧?xiàng)目中使用遞歸組...

    lucas 評論0 收藏0

  • 認(rèn)識Vue組件

    摘要：認(rèn)識組件組件是強(qiáng)大的功能之一。注意，所有的組件同時(shí)也都是的實(shí)例，可接受相同的選項(xiàng)對象。組件全局注冊時(shí)通過方式注冊?？紤]到會出現(xiàn)禁止使用的場景，需要禁止和啟用組件的功能，所以需要。同樣也是先在子組件的選項(xiàng)中定義好傳遞過來的數(shù)據(jù)。 前言 Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架（官方說明）。通俗點(diǎn)來說，Vue.js是一個(gè)輕量級的，易上手易使用的，便捷，靈活性強(qiáng)的前端MVVM框架。簡潔的A...

    xumenger 評論0 收藏0

  • Vue一個(gè)案例引發(fā)「動畫」的使用總結(jié)

    摘要：既然我們知道了方法，我們就來給它加一個(gè)簡單的動畫。動畫中還給我們提供了一些鉤子函數(shù)，我們可以使用鉤子函數(shù)構(gòu)建動畫。它會告知我們的動畫完成，我們綁定了為，告訴組件跳過的檢測，使用。 項(xiàng)目開發(fā)中動畫有著很重要的作用，而且也是用到的地方非常多，例如：鼠標(biāo)的進(jìn)入離開，彈窗效果，組件的顯示隱藏，列表的切換等等，可以說我們網(wǎng)頁上的動畫無處不在，也有人說了，這些東西也可以不使用動畫。 對，你說的沒錯...

    liuchengxu 評論0 收藏0

  • 前端面試題總結(jié)——VUE（持續(xù)更新中）

    摘要：前端面試題總結(jié)持續(xù)更新中是哪個(gè)組件的屬性模塊的組件。都提供合理的鉤子函數(shù)，可以讓開發(fā)者定制化地去處理需求。 前端面試題總結(jié)——VUE（持續(xù)更新中） 1.active-class是哪個(gè)組件的屬性？ vue-router模塊的router-link組件。 2.嵌套路由怎么定義？ 在 VueRouter 的參數(shù)中使用 children 配置，這樣就可以很好的實(shí)現(xiàn)路由嵌套。 //引入兩個(gè)組件 ...

    SimonMa 評論0 收藏0

  • 前端知識點(diǎn)

    摘要：原理對處理函數(shù)進(jìn)行延時(shí)操作，若設(shè)定的延時(shí)到來之前，再次觸發(fā)事件，則清除上一次的延時(shí)操作定時(shí)器，重新定時(shí)。在目標(biāo)發(fā)出內(nèi)容改變的事件后，直接接收事件并作出響應(yīng)。首先是目標(biāo)的構(gòu)造函數(shù)，他有個(gè)數(shù)組，用于添加觀察者。 關(guān)于排序 js中sort函數(shù)的底層實(shí)現(xiàn)機(jī)制？ js中sort內(nèi)置多種排序算法，是根據(jù)要排序數(shù)的亂序程度來決定使用哪一種排序方法。V8 引擎 sort 函數(shù)只給出了兩種排序 Inse...

    wums 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<