最近有在需求中遇到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 更新后状态===============》');
}
在如上的状态使用都可以
这是针对这个问题我的解决方案，如果各位看官们有更好更有效的方式，欢迎留言！！！！
