Vue3报错:instance.update is not a function

在Vue.js应用中,由于粗心将ref的value值误设为ref(null),导致后续尝试更改value值时出现错误。问题在于ref不能被重复赋值为ref实例。正确做法是在清除时直接赋值为null,而不是ref(null)。修复这个问题后,变更value值的代码能正常工作。

前段时间粗心写错了一个地方,报错内容很费解,不知道如何解决,最后排查出来结果

错误:

当将一个 ref 的的属性的value 值重新赋值为 ref(null) 时,下次更改value值的时候就会报这个错

const count = ref(null)
// 赋值
const change = ()=>{
    count.value = 10
}
// 清除
const clear = ()=>{
    count.value = ref(null) // 不能重复赋值为ref
}
// 当清空之后,再次改变值会出现如上错误

粗心的点,记录一下

mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 invoker @ vue.runtime.esm.js:5589 mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 invoker @ vue.runtime.esm.js:5589 mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 invoker @ vue.runtime.esm.js:5589 mp.esm.js:481 切换状态: true mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 set @ vue.runtime.esm.js:2642 togglePassword @ login.vue:55 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 setTimeout (async) invoker @ vue.runtime.esm.js:5586 mp.esm.js:481 切换状态: false mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 set @ vue.runtime.esm.js:2642 togglePassword @ login.vue:55 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 setTimeout (async) invoker @ vue.runtime.esm.js:5586 mp.esm.js:481 切换状态: true mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 set @ vue.runtime.esm.js:2642 togglePassword @ login.vue:55 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 setTimeout (async) invoker @ vue.runtime.esm.js:5586 mp.esm.js:481 切换状态: false mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 set @ vue.runtime.esm.js:2642 togglePassword @ login.vue:55 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 setTimeout (async) invoker @ vue.runtime.esm.js:5586 [worker] reportRealtimeAction:fail not support
08-09
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值