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

1.全局過濾器注冊(cè)

1.1 一般情況

官方注冊(cè)過濾器的方式：

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

1.2 優(yōu)化

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

/src/common/filters.js

/src/main.js

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

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

2.1場(chǎng)景還原

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

2.2 優(yōu)化

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

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

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

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

網(wǎng)頁題目：Vue使用中的小技巧(2)
網(wǎng)站URL：http://aaarwkj.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)請(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í)需注明來源： 創(chuàng)新互聯(lián)