vue3中readonly和shallowReadonly

news2024/9/30 21:36:36

· 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改变为 2
      copyReadonlyRef.value += 2 // 警告: Set operation on key "value" failed: target is readonly
      delete copyReadonlyRef.value // 警告: Delete operation on key "value" failed: target is readonly
      state.a.b++
      copyReadonlyReactive2.a.b++ // 警告: Set operation on key "count" failed: target is readonly
      copyReadonly3.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 readonly
    console.log('isReadonly?state3.foo',isReadonly(state3.foo));// false
    console.log('isReadonly?state3.nested',isReadonly(state3.nested));// false
    console.log('shallowReadonly-state3',state3);
    
    // 适用于嵌套对象 > 深层的属性可以改变值
    state3.nested.bar++ // 结果为3 成功改变了值
    
    return {
      count1,
      copyReadonlyRef,
      state,
      copyReadonlyReactive2,
      copyReadonly3,
      state3
    }
  }
})
</script>