Vue3中，readonlyf与shallowReadonly

<template>
  <h2>当前求和：{{sum}}</h2>
  <button @click="sum++">点我加1</button>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>job1薪资：{{job.j1.salary}}</h2>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import { toRefs, ref, reactive, readonly } from 'vue'
// import { toRefs, ref, reactive, shallowReadonly } from 'vue'
export default {
  name: 'DemoPerson',
  setup() {
    let sum = ref(0)
    let person = reactive({
      name: '张珍',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })
    person = readonly(person) // name age job中的salary都不能修改
    // let person1 = readonly(person) // name age job中的salary都不能修改

    // sum = readonly(sum) // sum不能修改
    // person = shallowReadonly(person) // name age不能修改, 但是job中的salary可以修改
    // sum = shallowReadonly(sum) //sum没层次 所以用了也没用
    person1.name = 'x'
    return {
      sum,
      // person1,
      ...toRefs(person)
    }

    /**
     * 总结：readonly 与 shallowReadonly的区别：
     *    readonly: 让一个响应式数据变为只读的（深只读）。
     *    shallowReadonly：让一个响应式数据变为只读的（浅只读）。
     * 应用场景: 不希望数据被修改时。
     */
  }
}
</script>

<style>

</style>