使用方法如下: import { readonly } from 'vue'; const myObject = { name: 'Alice', age: 25 }; const readonlyObject = readonly(myObject); // 尝试修改只读对象的属性 readonlyObject.name = 'Bob'; // 这里会报错,因为只读对象的属性无法被修改 复制代码 在上面的例子中,myObject是一个普通的对...
readonly,利用proxy,创建一个只读的对象, isReadonly,判断对象是否为只读对象 shallowReadonly 同shallowRef/shallowReactive,浅层做代理,所有首层引用为只读,深度为可更改 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <template> 333 {{state.name}} {{state.attr.age}} {{state.attr.sex}} ++ </temp...
readonly()的浅层作用形式<template> <n-el class="h-400 w-full flex flex-col justify-center items-center"> <n-el>{{ obj.a }}</n-el> <n-el>{{ obj.b.res }}</n-el> <n-el>{{ obj.b.c.res }}</n-el> <n-el>---</n-el> <n-el>{{ readonlyObj.a }}</n-el> <n...
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 这...
readonly: 让一个响应式数据变为只读的(深只读)。 shallowReadonly:让一个响应式数据变为只读的(浅只读)。 应用场景: 不希望数据被修改时。 示例: <template>当前求和为:{{sum}}点我++姓名:{{name}}年龄:{{age}}薪资:{{job.j1.salary}}K修改姓名增长年龄涨薪</template>import {ref,reactive,toRefs,...
简介:Vue3中readonly 和 shallowReadonly和toRaw 1.readonly 深度只读 被readonly包裹的数据只能够读取。 是一个深度只读,不能够修改。 我们看一下面的代码。 我们想修改值,但是修改后视图无响应。 并且控制台警告目标为只读 readonly深度只读的应用场景: ...
一、Vue3中readonly的基本概念和语法 1.1 readonly修饰符的基本概念 在Vue3中,readonly修饰符用于创建一个只读的响应式数据对象。这意味着该对象的属性不可修改,但仍然是响应式的,即如果其内部的引用类型发生变化,视图也会响应性地更新。 1.2 readonly修饰符的语法 在Vue3中,我们可以使用readonly修饰符来创建一个...
import{ref,reactive,readonly}from'vue'setup(props,context){constx=ref("xwl")consty="xwl"constobj=reactive({name:'xwl',age:18,info:{school:'secret'}})constreadonly1=readonly(y);普通对象constreadonly2=readonly(x);ref对象constreadonly3=readonly(obj);reactive返回的对象 ...
好嘞,各位,那这一小节呢,我们给大家说一下这个read only和shallow read only read only这词呢,大家应该知道,哎,它的意思呢,是只读的,就是你只可以读取,不可以修改,那么shallow这词儿我们在上一小节已经见过了,它的意思呢,是浅层次的,那么连起来读就是浅层次的只读这两个东西有什么作用呢?来咱代码上见啊,打...
Vue3中readonly 和 shallowReadonly和toRaw 1.readonly 深度只读 被readonly包裹的数据只能够读取。 是一个深度只读,不能够修改。 我们看一下面的代码。 我们想修改值,但是修改后视图无响应。 并且控制台警告目标为只读 readonly深度只读的应用场景: 比如我们登录后用户信息不会发生改变了。