Vue使用中的小技巧(2)

在 Vue 的使用過程中會遇到各種場景，當(dāng)普通使用時覺得沒什么，但是或許優(yōu)化一下可以更高效、更優(yōu)美地進(jìn)行開發(fā)。接下來就由成都網(wǎng)站制作工程師分享日常開發(fā)用到的小技巧。

1.全局過濾器注冊

1.1 一般情況

官方注冊過濾器的方式：

但是對我們做項目來說，大部分的過濾器是要全局使用的，不會每每用到就在組件里面去寫，抽成全局的會更好些。官方注冊全局的方式：

1.2 優(yōu)化

我們可以抽出到獨立文件，然后使用 Object.keys 在 main.js 入口統(tǒng)一注冊：

/src/common/filters.js

/src/main.js

然后在其他的 .vue 文件中就可愉快地使用這些我們定義好的全局過濾器了。

2.不同路由的組件復(fù)用

2.1場景還原

當(dāng)某個場景中 vue-router從/post-page/a，跳轉(zhuǎn)到 /post-page/b。然后我們驚人地發(fā)現(xiàn)，頁面跳轉(zhuǎn)后數(shù)據(jù)竟然沒更新?!原因是 vue-router "智能的"發(fā)現(xiàn)這是同一個組件，然后它就決定要復(fù)用這個組件，所以你在 created 函數(shù)里寫的方法壓根就沒執(zhí)行。通常的解決方案是監(jiān)聽 $route 的變化來初始化數(shù)據(jù)，如下：

2.2 優(yōu)化

為了實現(xiàn)這樣的效果可以給 router-view添加一個不同的 key，這樣即使是公用組件，只要 url 變化了，就一定會重新創(chuàng)建這個組件。

還可以在其后加 ++newDate()時間戳，保證獨一無二。

如果組件被放在 中的話，可以把獲取新數(shù)據(jù)的方法放在 activated 鉤子，代替原來在 created、mounted 鉤子中獲取數(shù)據(jù)的任務(wù)。

以上關(guān)于Vue 使用中的小技巧屬成都網(wǎng)站制作工程師的個人觀點，大家如果對此有著不同的見解，可以關(guān)注公眾號“創(chuàng)新互聯(lián)”給我留言，大家可以交流一下自己的心德體會，共同學(xué)習(xí)進(jìn)步。

網(wǎng)頁題目：Vue使用中的小技巧(2)
網(wǎng)站URL：http://www.bm7419.com/news11/327211.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、云服務(wù)器、面包屑導(dǎo)航、做網(wǎng)站、建站公司、軟件開發(fā)

廣告

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