vue-cli 热更新问题?

2023-06-30 257 0

vuecli.vue3,一个简单的页面,点击按钮调出弹窗:
image.png
vscode每次改完代码保存->热更新,console就会报出警告,component丢失了,应该是子组件从新渲染,然后代码中的proxy还保持的是之前渲染的子组件;
image.png
这时候页面还是好的,报错出现在点击事件里:
image.png
子组件丢失了,要刷新才能同步,有没有解决办法

问题产生的原因是我想在父组件用proxy的$refs去调用子组件方法,热加载就会出现问题;
我又尝试了另外两种方式,都没有问题,第二种还算简单:
一:这里:ref是响应式,会时时更新变量数据,但代码比$refs繁琐多了
image.png
二:直接定义ref为响应式,名字对上就行了:
image.png

相比较this.$refs还是多写了一行代码,可能是还不习惯vue3的思想;
后面还得解决eslint 报错,好烦: )

看起来是业务代码中的问题,在组件渲染完成之前就调用了组件内部的方法。
在调用 $refs.dialogModel.open() 外部套上 $nextTick 应该就可以解决。

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?