W260426/16.vue3/project1/src/components/Demo17.vue

<template>
  <div>
    <h1>readonly</h1>
    <h2>Ref:{{ bb.name }}--{{ bb.age }}--{{ bb.x.a }}</h2>
    <button @click="handleChange">修改</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, shallowReadonly } from "vue";
let aa = ref({
  name: "图图",
  age: 3,
  x: {
    a: 1,
  },
});
let bb = shallowReadonly(aa);
function handleChange() {
  // bb.name = "孙悟空";
  // // aa.age = 30;
  // bb.value.x.a = 99;
  // bb.value = {
  //   name: "猪八戒",
  //   age: 4,
  //   x: { a: 88 },
  // };
  // Object.assign(bb, aa1);
}
</script>

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