W250913/20.vue3/project3/src/shallowReadonly.vue

<template>
  <div>
    <h1 class="h-26 text-6xl">ShallowReadonly</h1>
    <!-- <h1 class="h-26 text-6xl">数值为:{{ sum.a }}--{{ sum.b.c }}</h1> -->
    <h1 class="h-26 text-6xl">数值1为:{{ sum1.a }}--{{ sum1.b.c }}</h1>
    <button
      class="w-30 h-10 text-center leading-[40px] border-2 border-grey-900 bg-grey-300"
      @click="changeSumA"
    >
      修改
    </button>
    <button
      class="w-30 h-10 text-center leading-[40px] border-2 border-grey-900 bg-grey-300"
      @click="changeSumC"
    >
      修改1
    </button>
    <button
      class="w-30 h-10 text-center leading-[40px] border-2 border-grey-900 bg-grey-300"
      @click="changeSum"
    >
      修改2
    </button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, readonly, shallowReadonly } from "vue";
let sum = reactive({
  a: 20,
  b: {
    c: 40,
  },
});
let sum1 = shallowReadonly(sum);
function changeSumA() {
  //   sum.value.a = 50;
  //   sum1.value.a = 1;
  sum1.a = 12;
}
function changeSumC() {
  //   sum1.value.b.c = 2;
  //   sum.value.b.c = 100;

  sum1.b.c = 12;
}
function changeSum() {
  let x1 = {
    a: 0,
    b: {
      c: 1,
    },
  };
  Object.assign(sum1, x1);
}
// function changeSum1() {
//   sum1.value = 60;
// }
</script>

<style lang="scss" scoped>
</style>