码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-07-31 15:34:57      阅读:1227      评论:0      收藏:0      [点我收藏+]

标签:定时器   false   isa   找不到   菜单显示   $set   开始   str   刷新   

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

需求:页面刷新时,保留当前页面的选中状态
解决思路:在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类型

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

标签:定时器   false   isa   找不到   菜单显示   $set   开始   str   刷新   

原文地址:https://www.cnblogs.com/lemoncool/p/9395386.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!