vue3readonly与shallowReadonly

1、概念

●readonly ○深度只读数据。 ○获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。 ○只读代理是深层的：访问的任何嵌套 property 也是只读的。 ●shallowReadonly ○浅只读数据。 ○创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换。 ●应用场景 ○在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读代理对象来读取数据, 而不能修改或删除。

2、示例代码

<template> <h2>readonly和shallowReadonly{ state2 }} defineComponent, reactive, readonly, shallowReadonly } from "vue"; export default defineComponent({ name: "App", setup() { const state = reactive({ name: "佐助", age: 20, car: { name: "奔驰", color: "yellow", }, }); // 只读的数据---深度的只读 // const state2 = readonly(state) // 只读的数据---浅只读的 const state2 = shallowReadonly(state); const update = () => { // state2.name += '===' // state2.car.name += '==' // state2.name+='===' state2.car.name += "==="; }; return { state2, update, }; }, });