vue更改了数据但是视图却没有更新

Posted 2020-12-26 lemoncool

今日总结：让钩子函数背锅的一上午，跪求原谅

需求：页面刷新时，保留当前页面的选中状态

解决思路：在data里设置一下初始值，保证首次进入有默认选中状态，其次再操作时，把选中的状态存sessionStorage。在created里为标记状态的变量赋值，优先sessionStorsge取，取不到就设置为默认值。

代码：

 

data() {
  return {
    thirdHidden: 2, // 二级菜单折叠还是隐藏 -1 折叠 order：显示
    isCheck: 1, // 二级菜单样式 1 选中状态 -1 不选中状态
    isactive: 2, // 一级菜单样式 1 选中状态 -1 不选中状态
    currenOpen: 2, // 二级菜单显示还是隐藏 -1 隐藏 值为对应order：显示
    isFold: false,
    secondIsFold: false
  }
},
created() {
    this.isactive = sessionStorage.getItem(‘isactive‘) || 2
    this.currenOpen = sessionStorage.getItem(‘currenOpen‘) || 2
    this.thirdHidden = sessionStorage.getItem(‘thirdHidden‘) || 2
    this.isCheck = sessionStorage.getItem(‘isCheck‘) || 1
}

　　

后来发现一个很神奇的现象：刷新时，页面可以拿到缓存里的值，打印出来也是正确的。只是页面内容不根据拿到的状态值去渲染。。。怎么刷新都不变。以下是我的爬坑之路：

• 以为是赋值的问题，把赋值后的变量打印出来看，还是正确的，就是找不到原因。。$set用于对象或数组，和现在的普通变量也没关系啊

• 开始以为是钩子函数的问题，以为是加载顺序问题。所以挨个试：

       beforecreated：el 和 data 并未初始化 

       created:完成了 data 数据的初始化，el没有

       beforeMount：完成了 el 和 data 初始化 

       mounted ：完成挂载

       把这几个钩子函数全都试了一遍，无效！！！

• 直到突然一下，冥冥之中感觉到---好像是sessionStorage里取的值的数据类型，所以赶紧打印，果然啊，好几个小时问题竟然是数据类型惹的祸，sessionStorage取到的是String，实际页面里做判断的是‘Number‘，对应不上，所以一直取得都是最开始的默认值

恍然大悟，就是一个简单的赋值，钩子函数也经常用，怎么能是钩子函数的问题，还让钩子函数背了一上午的锅

这件事也和上次的定时器一样，都是粗心惹的祸，没有什么技术含量，但是不够细心

终极解决办法：对取到的sessionStorage加了parseInt，变化为number类型