一次Vue中computed没有触发的原因以及排查经历
更新时间：2023年11月16日 10:26:43 作者：WaqarLeaver
这篇文章主要介绍了一次Vue中computed没有触发的原因以及排查经历,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
computed没有触发的原因排查经历
vue中computed计算属性可以用来绑定动态变量，而且它可以实时刷新，并且也可以在watch中监控，所以本人很喜欢用这个东西，一般把需要随data中变量一起变化的属性全部放在这里面，data中只定义互相独立互相不影响的变量，这样可以极大地减少重复变量的定义，使代码结构清晰，也便于排查错误。
最近出现了一个问题
就是我在computed中定义的一个动态变量没有在相关属性发生变化后触发更新。
代码如下：
data(){
return {
model:{
name:"test"
}
}
}
computed:{
lonexist:function(){
return this.model.lon!=null;
}
}
method:{
changelon(){
this.model.lon="123";
}
}
以上只是简化代码，目的是说明问题，然后我在一个button的click事件中绑定changelon方法，点击button后lonexist计算属性并没有被触发。
原因是
model初始化时没有这个属性，解决方法是在model的初始化方法中添加这个属性就可以了:
data(){
return {
model:{
name:"test"，
lon:null
}
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue监听滚动事件实现滚动监听的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
在 Vue 3 的项目中,当我们使用响应式数据（如 ref 或 computed）来管理页面状态时,可能会遇到由于接口数据加载延迟,导致页面初始渲染时数据尚未获取完成的问题,本文针对此问题简单分析了原因和解决方法,需要的朋友可以参考下2024-11-11
Vue结合ElementUI实现数据请求和页面跳转功能(最新推荐)
我们在Proflie.vue实例中,有beforeRouteEnter、beforeRouteLeave两个函数分别是进入路由之前和离开路由之后,我们可以在这两个函数之内进行数据的请求,下面给大家分享Vue结合ElementUI实现数据请求和页面跳转功能,感兴趣的朋友一起看看吧2024-05-05
一般我们的前端Vue项目中都会涉及到跨域的问题,下面这篇文章主要给大家介绍了关于vue项目部署跨域问题的详细解决过程,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
代码优化不仅仅局限在业务逻辑这块，像是代码复用、效率等等都是我们可以加以改进的地方，这篇文章主要给大家介绍了关于Vue项目优化的一些实战策略，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了通过html文件来使用Vue的单文件组件形式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要为大家介绍了vite中使用@配置路径别名过程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
解决vue-cli项目sourcemap因为文件重名导致的文件定位映射错误问题
这篇文章主要介绍了解决vue-cli项目sourcemap因为文件重名导致的文件定位映射错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了layui实际项目使用过程中遇到的兼容性问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
今天小编就为大家分享一篇Vue监听一个数组id是否与另一个数组id相同的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论