vue3子组件数据无法更新问题
更新时间：2023年10月07日 10:50:47 作者：嘉然今天刷算法
这篇文章主要介绍了vue3子组件数据无法更新问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3子组件数据无法更新
在写vue3代码时，遇到了父组件传值给子组件，但是子组件无法及时刷新数据，父组件数据是异步获取的。
使用了很多方法，froceUpdate()，nextTick之类的方法都试过了没有生效。
所以需要在父组件对子组件进行刷新。
解决思路
利用vue diff算法的特点，更新key，强制使子组件刷新
代码：
//dom
//给需要刷新的子组件加上一个自定义的key
<v-number :num="memoryNum" :fontSize="28" class="number" :key="keyNum"></v-number>
//ts
//所有数据加载完毕之后，更改这个key即可
let keyNum = ref(0);
onMounted(async () => {
await init();
keyNum.value++;
});vue3子组件数据无法更新
问题描述
子组件接收到父组件传递的prop数据后，在created 中进行一番预处理，再赋值给模板，而当在父组件中改变prop数据，子组件的视图未发生改变。
原因
子组件并没有重新加载，所以不会再次执行created或者mounted，子组件也就未处理改变的prop数据，视图也就不会更新。
解决办法
子组件上加上唯一的key，传入的props不同时，key值也不同，这样当切换prop数据的时候，由于key不同，vue会认为是两个不同的组件，就会重新执行组件的created或者mounted中的操作。
<Child :data="data" :key="data.id"></Child>
在子组件使用 watch 监听（可能需要深度监听）props传过来的值，如果发现改变，再次执行created或者mounted中的操作。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了使用vue cli4.x搭建vue项目的过程，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
本文通过实例代码给大家介绍了vue中的inject学习教程，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-04-04
这篇文章主要介绍了如何用electron把vue项目打包为桌面应用exe文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了Vue的v-if和v-show的区别图文介绍,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue2.0在IE11版本浏览器中的兼容性问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家介绍了详解polyfills如何按需加载及场景示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
在开发webapp的时候总是会受到首屏加载时间过长的影响，越来越多的APP采用了“骨架屏”的方式去提升用户体验。这篇文章主要介绍了Vue页面骨架屏的实现方法,感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要介绍了electron + vue项目实现打印小票功能,需要的朋友可以参考下2018-11-11
在一般情况下，我们的项目肯定需要区分不同环境，那么Nuxt提供给我们这样的基本能力了么，下面我们就一起来了解一下2021-05-05
这篇文章主要介绍了vue3 vuex4 store的响应式取值问题，在实际生活中遇到这样一个问题:在页面中点击按钮,数量增加,值是存在store中的,点击事件值没变,如何解决这个问题，本文给大家分享解决方法，需要的朋友可以参考下2022-08-08
最新评论