Vue使用中的小技巧(2)

2024-05-01 分類：網站建設

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

1.全局過濾器注冊

1.1 一般情況

官方注冊過濾器的方式：

成都網站制作

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

成都網站制作

1.2 優化

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

/src/common/filters.js

成都網站制作

/src/main.js

成都網站制作

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

成都網站制作

2.不同路由的組件復用

2.1場景還原

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

成都網站制作