最近有在需求中遇到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 更新后状态===============》');
        }

在如上的状态使用都可以
这是针对这个问题我的解决方案，如果各位看官们有更好更有效的方式，欢迎留言！！！！