11、Vue3 使用 readonly 防止更改响应式对象

有时我们想跟踪响应式对象 (ref 或 reactive) 的变化，但我们也希望防止在应用程序的某个位置更改它

案例

<template>
  <div>
    {{ value1 }}
  </div>
</template>

<script>
import { readonly, ref } from "vue";

export default {
  setup() {
    let value1 = ref("readyonly value1");
    //
    value1 = readonly(value1);
    // 更改值 输出警告：set operation on key "value" failed: target is readonly
    value1.value = "new value";
    return {
      value1,
    };
  },
};
</script>