答案:万一这个person的数据是别的组件定义传给你的,别的组件传给你只希望你使用不希望你修改的情况下,你怕自己组件内业务逻辑可能会修改它,所以用readonly和shallowReadonly函数去修饰,然后用readonly(person)包裹后新生成的person对象就可以达到效果了,哪怕你修改新生成person对象属性,也不会影响原有的person对象的属...
在Vue 3中,readonly和shallowreactive是两个用于处理响应式数据的工具,它们各自有不同的用途和行为。以下是关于这两个函数的详细解释和对比: 1. readonly函数 作用: readonly函数用于创建一个对象的只读代理。这个代理对象与原始对象共享同一个引用,但是你不能通过代理对象来修改原始对象的内容。如果尝试修改代理对象的...
一、reactive和readonly Vue3使用Proxy来替代Vue2中Object.defineProperty。 const target = { name: 'onlyy~' } // 创建一个对target的代理 const proxy = new Proxy(target, { // ...各种handler,例如get,set... get(target, property, receiver){ // 其它操作 // ... return Reflect.get...
export const readonlyHandlers = {get: readonlyGet, // 将原来的creater 提取出去set(target: Record<any, any>, key: string, value: any) {// readonly 不可 set, 抛出异常console.warn(`key: ${key}设置失败, 因为${target}是 readonly 类型`)return true}}复制代码 isReactive & isReadonly 这...
Vue3 readonly() readonly()函数的作用是接收一个对象,其可以是普通对象,也可以是响应式对象,然后返回接收对象的只读代理对象。 通俗地讲,即如果想要一个对象是只读的,就使用readonly()函数。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17...
本章主要针对vue3组合式API 中响应式核心reactive,ref,Readonly三个API的讲解 1. reactive 在vue2中定义在data选项中的数据会自动被vue处理为响应式数据, 所谓的响应式数据, 就是被vue给检测的数据, 当数据发生变化时,vue会自动处理一些副作用, 比如页面重新渲染. ...
readonly 只读,顾名思义,就是对象只有get没有set~ 直接上代码 (emmm 因为优化了代码,思路可能讲的不是很清楚,但是可以直接看代码,我先尝试讲一下思路) 利用高阶函数,返回函数的方法来判断是否是只读属性的对象,然后对reactive和readonly 的 get和set进行抽离 ...
在Vue3中,可以通过`readonly`函数将一个对象转化为只读的,使其属性成为只读的,无法被修改。使用方法如下:```javascriptimport { readonly } from '...
Readonly属性是Vue3中新增的一个特性,它允许我们在组件中指定某些数据属性为只读。这样,当用户尝试修改这些属性时,将不会触发组件的更新。这在某些场景下非常有用,例如表单输入只读、数据缓存、组件间通信和响应式数据处理等。 首先,我们来看一个简单的使用场景:表单输入只读。在Vue3中,我们可以通过在数据属性上添加...
vue3知识点:readonly 与 shallowReadonly @toc 三、其它 Composition API(不常用,了解即可) 2.readonly 与 shallowReadonly 注意点1: 如果使用readonly包裹的person对象的所有属性数据都只读不可需改,即name、age、salary都只读无法修改。 如果使用shallowReadonly包裹的person对象的所有属性数据,其中浅...