問題描述：
有兩個頁面A和B，每個頁面里都有一個getList()方法。這個兩個方法都需要傳一個相同的參數C，參數C的選擇過程又比較麻煩。為了避免在切換A、B兩個界面重復選擇參數C的問題，我將參數C存入vuex中，然后在兩個頁面里都使用watch監聽參數C來執行getList()方法。然后發現一個問題，從A頁面進入B頁面后，在B頁面重新選擇參數C，A頁面的getList()方法竟然也會被執行，反之亦然，從B頁面到A頁面后，在A頁面改變參數C也會執行B頁面的getList()方法。
后來發現是使用了因為使用了keep-alive所致，keep-alive會將Vue實例始終保持在內存中，因此該Vue實例始終存續，相應的watchers始終生效，查找相關資料后，發現許多人也遇到了這個問題，最后找到以下兩種解決方案：
解決方法1
通過router路徑來判斷是否執行getList()
|
1
2
3
4
5
6
7
|
watch: { someValue(newValue, oldValue) { if (this.$route.fullPath === 'A頁面路由路徑') { // do something } } } |
解決方法2
添加一個flag參數來判斷頁面是否是active狀態，使用keep-alive緩存的組件只會觸發activated和deactivated事件，所以就在這兩個事件觸發時把flag置為true和false，只有在flag為true的時候才執行getList()
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
{ data () { return { activatedFlag: false }; }, watch: { 'someValue'(val) { if(val && this.activatedFlag) { this.getlist(); } } }, activated () { this.activatedFlag = true; }, deactivated () { this.activatedFlag = false; }} |
如果頁面比較多，而且各頁面里的函數名稱不一致的話，可以把上面代碼的watch部分去掉寫成一個mixin，在需要的頁面引入即可
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import activeFlag from "@/mixin/activeFlag";export default { mixins: [activeFlag], watch: { 'someValue'(val) { if(val && this.activatedFlag) { this.getlistA(); this.getlistB(); } } },} |
以上就是vue項目watch內的函數重復觸發問題的兩種解決方案的詳細內容，更多關于vue watch函數重復觸發解決的資料請關注服務器之家其它相關文章！
原文鏈接：https://liyangzone.com/
