最近有在需求中遇到2個表單頁面內容在用戶輸入以后需要做本地緩存，而且頁面跳轉做了路由緩存處理發現了一些問題
項目的要求是 頁面的跳轉不能影響內容的讀取，而且內容填寫完整按鈕才會高亮
聽上去要求很簡單
效果如圖
圖片.png
注：途中的選擇常用聯系人可忽略網頁截圖 不好調試
正常在methods里面寫一個簡單的判斷讓后放在mounted里面就可以做到
如：
mounted() {
this.check()
},
methods:{
check() {
/* 驗證是否為空 */
if (
this.from.periods_value !== "" &&
this.from.school_value !== "" &&
this.from.relation_value !== "" &&
this.from.QQ_Message !== ""
) {
this.btnFlag = false
}else{
this.btnFlag = true
}
},
}
如上當頁面加載的時候就可以判斷了，當然在表單內容被改動的時候也要調用check()
然后會發現一個問題，第一次對于表單操作完成后 所有的判斷都是正常，可當頁面跳轉以后或者刷新以后 會發現按鈕變灰色的，但是表單里面都有數據
如下圖
圖片.png
調試分析得出當頁面進來的時候或者跳轉的時候，數據可以讀取緩存，但是check并沒有執行
解決方案：
想到了vue的生命周期，在頁面更新狀態以后去調用check()就可以解決這個問題了
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態===============》');
},
updated: function () {
console.group('beforeUpdate 更新后狀態===============》');
}
在如上的狀態使用都可以
這是針對這個問題我的解決方案，如果各位看官們有更好更有效的方式，歡迎留言！！！！
