0.3 应用场景: · 创建不可变的快照 · 保护全局状态配置不被修改 2. shallowReadonly 与 readonly 类似,用于创建一个ref或者reactive定义的响应式数据的浅层只读副本(对象的第一层为只读)。 特点: · 只将对象的第一层属性设置为只读,对象内部的嵌套属性仍然是可变的。 · 适用于只需保护对象第一层属性的场景。
})//应用场景:比如从别的地方拿到一个数据,而且这个数据是不希望在这里被更改。//person值就不能更改了person=readonly(person)//表示只有第一层是只读的,深层次的数据还是能够更改//person = shallowReadonly(person)//sum = readonly(sum)//sum = shallowReadonly(sum)//返回一个对象(常用)return{ sum, ...
1. readonly函数 作用: readonly函数用于创建一个对象的只读代理。这个代理对象与原始对象共享同一个引用,但是你不能通过代理对象来修改原始对象的内容。如果尝试修改代理对象的属性,Vue会抛出一个警告,并且修改不会生效。 应用场景: 当你需要将一个响应式对象传递给其他组件或函数,但又不希望这些组件或函数修改该对...
} })//所有数据都不能修改person=readOnly(person)//name和age不能修改,salary不受影响person=shallowReadOnly(person) toRaw:将一个由reactive声明的响应式对象转换成普通对象(不是响应式对象) 使用场景:用于读取响应式对象的普通对象,对这个普通对象的所有操作不会引起页面更新。 markRaw:标记一个对象,使其永远...
使用场景: 万一这个person的数据是别的组件定义传给你的,别的组件传给你只希望你使用不希望你修改的情况下,你怕自己组件内业务逻辑可能会修改它,所以用readonly和shallowReadonly函数去修饰,然后用readonly(person)包裹后新生成的person对象就可以达到效果了,哪怕你修改新生成person对象属性,也不会影响原有的person对...
readonly(data);// 浅只读(具有响应式的对象的第一层属性是只读的,更深的属性和子对象属性可以修改)// 只读用在其他组件和当前组件共享响应式数据的时候// 不希望这个数据被我们当前的组件修改,就使用只读修饰// 因为那个数据在别的组件用的,只是给我们这个组件可能是显示一下罢了data=shallowReadonly(data);/...
在实际应用中,readonly的使用场景非常丰富和多样,本文将深入探讨readonly的各种使用场景,并结合个人观点和理解,帮助您更好地理解这一主题。 一、Vue3中readonly的基本概念和语法 1.1 readonly修饰符的基本概念 在Vue3中,readonly修饰符用于创建一个只读的响应式数据对象。这意味着该对象的属性不可修改,但仍然是响应...
Vue3响应式高阶用法之shallowReadonly() 在现代前端开发中,Vue3 提供了丰富的响应式 API 来帮助开发者更高效地管理状态和数据。其中,shallowReadonly()是一个非常有用的工具,适用于需要部分只读状态的场景。本文将详细介绍shallowReadonly()的使用方法及其应用场景。
readonly: 让一个响应式数据变为只读的(深只读)。 shallowReadonly:让一个响应式数据变为只读的(浅只读)。 应用场景: 不希望数据被修改时。 3.toRaw 与 markRaw toRaw: 作用:将一个由reactive生成的 响应式对象 转为 普通对象。 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引...
readonly数据类型应用场景、初始化、依赖收集、派发更新等内容结合源码的分析 shallowRef、shallowReactive、shallowReadonly数据依赖收集、派发更新等内容结合源码的分析 文章部分内容摘录于Vue3官方文档 Ref 1. 初始化 初始化dep,后面用来存储effects,进行依赖收集和派发更新 ...