Vue 定义只读数据 readonly

<template>
  <h1>reactive数据</h1>
  <p>姓名：{{ info.name }}</p>
  <p>年龄：{{ info.age }}</p>
  <button @click="editInfo">修改reactive数据</button>
  <hr />
  <h1>readonly数据</h1>
  <p>姓名：{{ readInfo.name }}</p>
  <p>年龄：{{ readInfo.age }}</p>
  <button @click="editReadInfo">修改readonly数据</button>
</template>
 
<script>
// 引入 readonly 与 reactive 函数
import { readonly, reactive } from 'vue'
export default {
  name: "Home",
  setup() {
    // 使用 reactive 创建数据
    const info = reactive({
      name: "张三",
      age: 20
    });
    // 使用 readonly 创建只读数据
    const readInfo = readonly(info);
    // 修改 reactive 数据
    const editInfo = () => {
      info.name = "李四";
      info.age = 22;
      console.log(info);
      console.log(readInfo);
    }
    // 修改 readonly 数据（警告,不会被修改）
    const editReadInfo = () => {
      readInfo.name = "李四";
      readInfo.age = 22;
      console.log(info);
      console.log(readInfo);
    }
    // 返回数据
    return {
      info,
      readInfo,
      editInfo,
      editReadInfo
    }
  }
}
</script>