【Vue】使用计算属性\父子组件视图不更新,检测不到数据的变化

Shino_jie

已于 2022-12-19 12:02:01 修改

阅读量727

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-12-19 12:00:13 首次发布

本文链接：https://blog.csdn.net/Shino_jie/article/details/128370172

版权

Vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

计算属性中

如果只是像下面这样,Vue2都检测不到值的变化,视图不会更新渲染

this.obj.key = value
this.obj[key] = value
Object.assign(this.obj,value)
this.arr[index] = value
this.arr.push(value)
...

视图会一直是上次的数据,但是内部的数据确实变了

解决思路:相当于重新给对象或数组赋值了

this.obj = {...this.obj,...{key:value}}
this.obj = Object.assign({},this.obj,{key:value})
this.arr = [...this.arr,value]

父子组件之间的传值同理,this.$emit把新的值传给父组件的时候也要使用上面的方式数据才会更新

优惠劵

Shino_jie

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue】使用计算属性\父子组件视图不更新,检测不到数据的变化

如果只是像下面这样,Vue2都检测不到值的变化,视图不会更新渲染。视图会一直是上次的数据,但是内部的数据确实变了。解决思路:相当于重新给对象或数组赋值了。
复制链接

扫一扫

专栏目录

解决vue中对象属性改变视图不更新的问题

08-27

下面小编就为大家分享一篇解决vue中对象属性改变视图不更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue 组件递归后$emit传值失效的问题（这里提供三个解决思路，建议使用最后一个）

weixin_44132285的博客

09-16

7575

vue 组件递归后$emit传值失效的问题（这里提供三个解决思路，建议使用最后一个）分析原因 1.首先造成传值失效的问题是组件递归后事件传递不到上层。所以造成的问题是在递归组件的第二层里面，监听不到当前事件。出现的现象 2.造成的现象是我点击递归出来的子菜单的时候，父级组件拿不到点击获取的值，第一次点击渲染的值可以获取到解决问题的方法 1.可以点击的时候将值存储再vuex里面点击的时候在父级页面获取到vuex里面存储的值弊端：点击完页面刷新后，vuex里面的值会消失，影响页面功能（非必要不选择）；

参与评论您还未登录，请先登录后发表或查看评论

vue传值问题和子组件动态刷新数据

qq_35673931的博客

08-05

1480

1、子组件向父组件传值通过$emit方法，父组件那边直接绑定方法，方法带的参数就是我们这里传的对象，line(data); 2.父组件向子组件传值，子组件通过props来接收， 1、在子组件中调用方法，如果我们的方法写在子组件中，我们需要从父组件中接收参数，在调用子组件刷新方法，但初始化参数为空或者没立马刷新，则需用用watch监听，需要在created调用，this.attachid,注意名字要和父组件传的参数一样，其他刷新只需改变绑定的对象就不说了。 2、方法写在父组件中，直接传.

Vue父组件和子组件状态更新（通讯）小结

sanye的博客

03-22

708

Vue3/ defineEmit传递普通数据类型和复杂数据类型介绍、父组件传递数据给子组件子组件将数据存储data 存储数据不更新

m0_64494670的博客

01-08

1144

Vue3/ defineEmit传递普通数据类型和复杂数据类型介绍、父组件传递数据给子组件子组件将数据存储data 存储数据不更新

初学Vue遇到的计算属性不刷新的问题

u012745755的博客

08-05

1万+

项目场景： Vuex中定义了一个列表，在组件中想要读取列表数据进行展示，其中选择按钮的是否选中取决去对象中的check属性问题描述：组件内动态绑定class，采用了计算属性去返回true或者flase，添加点击事件，当点击div时对Vuex中对应的布尔值取反。但实际运行只有第一次加载页面时能正常显示，之后无法正常切换，在点击事件中打印CartList[index].check却能正常切换true，flase 后来将计算属性依赖于data时点击可以正常切换，通过搜索了解到计算属性是依赖于da...

Vue 中修改了计算属性（computed) 或者它的依赖变量，计算属性的值没有变化的几种情况

最新发布

全栈攻略

11-22

3880

计算属性的值是由它们的函数逻辑计算得出的，而不是通过直接赋值来设置的。解决方案就是当你发现无论如何怎么修改计算属性的值都没有变化的时候，看一看data中与props中是否有根计算属性同名的变量，这时候就要考虑是要删除该变量，还是改变计算属性的命名了。如果你希望修改一个计算属性的值并使其生效，你需要通过修改计算属性所依赖的数据来触发重新计算。通过第一种情况我们知道了，要修改计算属性的值，必须要修改计算属性的依赖变量，但有一种情况及时修改了依赖变量的值，计算属性的值任然不会变化。

VUE子组件更改父组件数据

三包酸奶！的博客

06-12

9875

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：this.$emit(‘update:title’, newTitle) 然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。

vue父子组件传值，父组件内容更新子组件内容不实时更新

G佳伟

09-05

7958

vue父子组件传值不能实时更新问题，父组件将值传给了子组件，但子组件显示的值还是原来的初始值，并没有实时更新

vue computed 计算属性

weixin_44624120的博客

01-06

vue 中的computed 計算屬性 computed 最大特点就是缓存渲染可以是數組類型，文本內容 <template> <div class="cssitem">  <div v-for="(item,index) in setData" :key="index">{{item}}&lt

解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)

10-15

主要介绍了解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue 解决路由只变化参数页面组件不更新问题

10-16

今天小编就为大家分享一篇vue 解决路由只变化参数页面组件不更新问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue 使用Props属性实现父子组件的动态传值详解

10-16

今天小编就为大家分享一篇Vue 使用Props属性实现父子组件的动态传值详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue 子组件watch监听不到prop的解决

10-14

主要介绍了vue 子组件watch监听不到prop的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue2.0中set添加属性后视图不能更新的解决办法

12-09

今天在工作中遇到一个问题，郁闷了很久，特地写一篇博客记录一下，方便以后再遇到可以查找，也分享个各位小伙伴，在网上查找很多资料说用Vue.$set设置属性后视图也会更新，但是真相并不是这样，通过等于号赋值和$set...

Vue子组件向父组件使用自定义事件$emit传递数据无效的坑

coderYYY的博客

04-01

6632

子级向父级传递—自定义事件当子组件需要向父组件传递数据时，用到的是自定义事件自定义事件的流程：在子组件中，通过$emit()来触发事件。在父组件中，通过v-on来监听子组件事件。我们来看一个简单的例子：我们之前做过一个两个按钮+1和-1，点击后修改counter。我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件。这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total。  <div i

Vue数据更新，页面却没有更新的几种情况及解决方法

热门推荐

LFQP_的博客

03-27

2万+

Vue数据更新，页面却没有更新的几种情况及解决方法

vue 页面数据加属性第一次未渲染

叫我起来，我还能敲代码！

11-11

285

调用方法: this.$set( target , key , value) target: 要更改的数据源（可以是一个对象或者数组） key 要更改的具体数据（索引） value 重新赋的值 this.data.forEach(item=>{ this.data2.forEach(item2=>{ this.$set(item,'新属性',item2.新属性) }) }) ...

vue 计算属性未重新计算 / computed 未触发 / computed 原理&源码分析

wrc的专栏

11-30

1万+

vue computed源码分析

vue父组件调用子组件方法刷新子组件数据，子组件视图不更新如何处理

07-21

在Vue中，父组件调用子组件的方法刷新子组件数据时，子组件的视图不会自动更新。这是因为Vue的响应式系统无法检测到这种直接的数据变化。为了解决这个问题，你可以使用以下方法之一： 1. 使用Vue的事件机制：在子组件中，你可以定义一个自定义事件，并在父组件中监听该事件。当父组件需要刷新子组件数据时，可以通过触发该事件来实现。在子组件中，你可以在事件处理方法中更新数据，并通过Vue的强制更新机制来强制刷新子组件的视图。具体代码如下： ```javascript // 子组件 <template> <div>  </div> </template> <script> export default { data() { return { // 子组件的数据 }; }, methods: { // 子组件的方法 refreshData() { // 刷新子组件的数据 this.$emit('refresh'); } } }; </script> // 父组件 <template> <div> <button @click="refreshChild">刷新子组件</button> <child-component @refresh="forceUpdateChild"></child-component> </div> </template> <script> export default { methods: { refreshChild() { // 调用子组件的刷新方法 this.$refs.child.refreshData(); }, forceUpdateChild() { // 强制更新子组件的视图 this.$refs.child.$forceUpdate(); } } }; </script> ``` 2. 使用Vue的`$refs`属性：父组件可以通过`$refs`属性引用子组件实例，并直接调用子组件的方法来刷新数据。然后，你可以通过Vue的强制更新机制来强制刷新子组件的视图。具体代码如下： ```javascript // 子组件 <template> <div>  </div> </template> <script> export default { data() { return { // 子组件的数据 }; }, methods: { // 子组件的方法 refreshData() { // 刷新子组件的数据 } } }; </script> // 父组件 <template> <div> <button @click="refreshChild">刷新子组件</button> <child-component ref="child"></child-component> </div> </template> <script> export default { methods: { refreshChild() { // 调用子组件的刷新方法 this.$refs.child.refreshData(); // 强制更新子组件的视图 this.$nextTick(() => { this.$forceUpdate(); }); } } }; </script> ``` 上述方法中，都使用了Vue的强制更新机制`$forceUpdate()`来强制刷新子组件的视图。请根据你的具体情况选择其中一种方法来处理子组件数据更新后视图不更新的问题。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交