vue3中readonly和shallowReadonly

· readonly:

深度只读数据

获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。

只读代理是深层的：访问的任何嵌套 property 也是只读的。

· shallowReadonly

浅只读数据

创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换

应用场景:

在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读代理对象来读取数据, 而不能修改或删除

·isReadonly

用于判断是不是一个readonly对象 > 返回值boolean

<template><div style="font-size: 14px;"><p>{{count1}}</p><p>{{copyReadonlyRef}}</p><p>{{state}}</p><p>{{copyReadonlyReactive2}}</p><p>{{copyReadonly3}}</p><p>{{state3}}</p></div>
</template><script lang="ts">
/*
readonly: 深度只读数据获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。只读代理是深层的：访问的任何嵌套 property 也是只读的。
shallowReadonly: 浅只读数据创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换 
应用场景: 在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读代理对象来读取数据, 而不能修改或删除
isReadonly： 用于判断是不是一个readonly对象 > 返回值boolean
*/
import {defineComponent,reactive,ref,readonly,shallowReadonly,isReadonly,
} from 'vue'
// vue3.0版本语法
export default defineComponent({setup () {const count1 = ref(1)// 原本的ref对象，使用readonly创建出一个只读对象const copyReadonlyRef = readonly(count1)console.log('count1',count1)console.log('copyReadonlyRef',copyReadonlyRef)// 原本的reactive对象，使用readonly创建出一个只读对象const state = reactive({a: {b: 2}})const copyReadonlyReactive2 = readonly(state)console.log('state', state)console.log('copyReadonlyReactive2', copyReadonlyReactive2)// 直接创建一个readonly对象const copyReadonly3 = readonly({x: {y: 3}})console.log('copyReadonly3',copyReadonly3)// 3秒后尝试改变reactive/ref对象的数据和只读对象的数据setTimeout(() => {count1.value += 1 // 结果为count1改变为 2copyReadonlyRef.value += 2 // 警告: Set operation on key "value" failed: target is readonlydelete copyReadonlyRef.value // 警告: Delete operation on key "value" failed: target is readonlystate.a.b++copyReadonlyReactive2.a.b++ // 警告: Set operation on key "count" failed: target is readonlycopyReadonly3.x.y++ // 警告: Set operation on key "count" failed: target is readonly}, 3000)// 定义一个shallowReadonly对象，只对自身的property进行只读转换，// 深层的属性还是可以改变值的。const state3 = shallowReadonly({foo: 1,nested: {bar: 2}})// 改变状态本身的property将失败state3.foo++ // 警告: Set operation on key "foo" failed: target is readonlyconsole.log('isReadonly?state3.foo',isReadonly(state3.foo));// falseconsole.log('isReadonly?state3.nested',isReadonly(state3.nested));// falseconsole.log('shallowReadonly-state3',state3);// 适用于嵌套对象 > 深层的属性可以改变值state3.nested.bar++ // 结果为3 成功改变了值return {count1,copyReadonlyRef,state,copyReadonlyReactive2,copyReadonly3,state3}}
})
</script>