错误信息“vue3 set operation on key 'value' failed: target is readonly”表示在Vue 3中尝试对一个只读的响应式对象属性进行set操作时失败了,因为该属性是只读的。在Vue 3中,响应式数据是通过reactive、ref等API创建的,如果数据被标记为只读,那么对它的修改操作将会失败并抛出此错误。 2
VUE3出现Set operation on key "default" failed: target is readonly. 控制台报该警告的解决方案 一:出现场景 vue3.0搭建的项目 二:案例分析 我们通过F12调试可以发现出现该警告是属于reactivity.esm-bundler.js中。 打开该js查看源代码337行,如下图: 我们从上图中可以看出,输出该警告的原因是因为我们启动程序的...
})// 变更 original 会触发依赖于副本的侦听器original.count++// 变更副本将失败并导致警告copy.count++// 警告! Set operation on key "name" failed: target is readonly. 只读代理是深层的:任何被访问的嵌套 property 也是只读的。 constobj = {name:'hyh',info: {age:26}}constcopy =readonly(obj)...
vue3 给另外一个组件中的 el-dialog 设置显示或隐藏: Set operation on key “dialogVisible“ failed: target is readonly qqhfeng 每天重新立志,振兴中华! 来自专栏 · 我的TypeScript学习之路 1 人赞同了该文章 将v-modle ="dialogVisible" 替换成 :model-value="dialogVisible"?奇怪吧! 关键是官方文档也...
function createGetter(isReadOnly: boolean = false) {return function get(target: Record<any, any>, key: string | symbol) {const res = Reflect.get(target, key);// 如果不是 readonly 收集依赖if (!isReadOnly)track(target, key);return res;}}复制代码 ...
functioncreateGetter(isReadonly:boolean=false){// 优化get setreturnfunctionget(target,key){if(key===reactiveFlags.IS_REACTIVE){return!isReadonly}if(key===reactiveFlags.IS_READONLY){returnisReadonly}// target 就是当前的对象; key是 用户访问的key// { foo: 1} === target// foo === key...
return target; } } 如果传递的value是对象,那么this._rawValue=原始对象,this._value=响应式对象 function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) { // ...target是原始值/响应式对象的处理 // target是原始对象的处理 ...
(target, key, receiver); console.log(`get key:${key}`); // +++ // 当前是只读的情况,自己不会被改变,所以就没必要进行追踪变化 if (!isReadonly) { // track(target, "get" /* GET */, key); } // shallow=true,就直接 return 结果,所以不会深层追踪 if (shallow) { return res; } ...
proxy 实例。def(target,isReadonly?ReactiveFlags.readonly:ReactiveFlags.reactive,observed)returnobserved} 这个函数的处理逻辑如下: 如果target 不是一个对象,返回 target。 如果target 已经是 proxy 实例,返回 target。 如果target 不是一个可观察的对象,返回 target。
在Reflect的方法中通常只需要传递 target、key、newVal 等,但为了能够处理上述提到的特殊情况,一般也需要传递 receiver 参数,因为Reflect 方法中传递的 receiver 参数代表执行原始操作时的 this 指向,比如: Reflect.get(target, key , receiver) 、 Reflect.set(target, key, newVal, receiver) 。