Vue 3自定义ProgressBar组件二次重建后数据变更不触发视图更新

组件基础实现 #

• 基于Vue 3.0.7开发自定义ProgressBar组件，组件通过v-if绑定父组件的downloadInProgress状态实现条件渲染
• 父组件通过调用ProgressBar内部暴露的setProgress方法传入参数，驱动进度条更新
• ProgressBar组件内部定义了total、completed、errors、progress、progressText等响应式数据，对外提供setProgress、resetProgress、setProgressText方法，在created钩子中完成进度初始化，基于vue-progress-bar库实现进度条渲染，根据实时进度动态更新展示文本
• 父组件在created钩子中注册browser.runtime.onMessage消息监听器，收到download-progress类型消息时，获取ProgressBar组件实例，调用setProgress方法传入total、completed、errors参数触发进度更新

异常现象 #

• 首次渲染ProgressBar组件时，进度条更新、进度文本展示的功能完全符合预期
• 当组件因v-if条件不满足被销毁、第二次重新创建渲染后，即使控制台可观测到组件内部data属性发生变更，视图上展示的progressText始终停留在初始默认的"Downloading... 0/?"状态，不会随进度同步更新

问题定位与解决 #

• 触发异常的诱因：最初通过计算属性封装this.$refs.progressBar作为progressBarRef来访问组件实例
• 解决方式：移除该计算属性封装、直接访问this.$refs.progressBar获取组件实例调用方法，即可解决二次渲染后组件不更新的问题

内容的提问来源于stack exchange，提问作者Mazel