vue中改变了vuex数据视图不更新,也监听不到的原因及解决
vue改变了vuex数据视图不更新,也监听不到
首先我这里就不说什么强制刷新api了，那东西没用。
我也不说什么计算属性里面要依赖data里面的变量变化了才计算
因为上面2个我都试过了
解决办法是
使用 Object.assign({}, pageInfo.detail, obj)赋值即可正常解决
在vuex里面
updateContent({
commit,
state
}, {
key,
value
}) {
let pageInfo = state.pageInfo;
//pageInfo.detail[key] = value 一开始我这里直接赋值的不行
let obj = {}
obj[key] = value
pageInfo.detail = Object.assign({}, pageInfo.detail, obj)
}pageInfo.detail[key] = value 这种写法里面其实vue2里面是不会被监听到变化的
1. 不能监听的情况
（1） 直接通过下标赋值 arr[i] = value
（2） 直接修改数组长度 arr.length = newLen
替代方法
Vue.set(arr, index, newvalue) arr.splice(newLen)
vue响应式数据已获取视图不更新问题
首先 => 我们要深刻理解 Vue响应式的原理 通过get 和 set进行获取与设置 同时通知观察者进行新旧虚拟dom树 diff算法就地更新 重新渲染组件
特别注意 => Vue官方文档的注意事项
由于javaScript的限制 Vue不能检测数组和对象的变化 因此你就要思考 为什么我的响应式有问题
我们看一个实战bug 同事托我解决的一个问题
watch 侦听tree回调函数 过滤出来的数组 从而去触发filterNode
但是watch正常 但是偏偏不触发filterNode 一切正常 数据全有 变化也有 refdom节点也能打印出来 就是不触发~ 唯一的可能性 树是空的 所以导致不触发回调过滤
但是有时候刷新页面能触发 有时候不能触发 我怀疑是 Vue的热更新和浏览器的缓存导致
因此我们可以想象为什么 树是空的 我明明有数据 为什么dom上的节点为空
只有一种可能 数据更新 视图没有获取到 那就证明Vue响应式出错了
所以我发现我同事在数据处理上有问题 他利用下标去处理数组进行循环赋值 因此让Vue没有劫持到
所以我换了种写法 用的push 因为push可以做到Vue对数据更新的检测
对于这种问题 Vue官网提供的 Set方法也可以解决 不过这属于亡羊补牢 根本问题并没有解决。
对于解决bug => 困难不在于如何去解决 而是难在去寻找问题 排查问题所在 排查问题的能力是一位开发者至关重要的手段。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue自定义v-has指令,做按钮权限判断的步骤，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了Vue手写实现组件初渲染，在Vue进行文本编译之后，会得到代码字符串生成的render函数，本文会基于render函数展开主题相关内容，感兴趣的朋友可以参考一下2022-08-08
整个项目结构清晰,尤其单文件组件的表现力尤为突出,使得每个组件的逻辑都没有过于复杂,所以这篇文章主要给大家介绍了关于vue实现一个单文件组件的相关资料,需要的朋友可以参考下2021-06-06
Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码
这篇文章主要介绍了Vue实现Tab标签路由效果，并用Animate.css做转场动画效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
本文主要介绍了Vue动态设置img的src不生效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
这篇文章主要介绍了vue项目实现多语言切换的思路，帮助大家完成多语言翻译，感兴趣的朋友可以了解下2020-09-09
这篇文章主要介绍了使用Vue-cli 3.0搭建Vue项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了Vue3封装 Message消息提示实例函数,具有一定的实用价值,需要的朋友可以参考下，希望能够给你带来帮助2021-09-09
这篇文章主要介绍了vue3的ref,reactive的使用和原理解析,分析了 reactive 的实现，以及 reactive api 返回的 proxy 代理对象使用的 handlers 陷阱，并且对陷阱中我们最常用的 get 和 set 的源码进行分析，需要的朋友可以参考下2022-09-09
今天小编就为大家分享一篇vue项目中跳转到外部链接的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论