【Vue3】readonly 与 shallowReadonly的用法和示例（转）

说明

shallowReactive：只处理对象最外层的属性的响应式(浅响应式)

shallowRef:只处理基本类型数据的响应式,不进行对象的响应式处理

什么时候使用?

如果有一个对象数据,结构比较深,但变化的只是外层属性变化========>shallowReactive

如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换

<template>
  <h4>当前的x值是:{{x.y}}</h4>
  <button @click="x.y++">x.y++</button>
  <hr>
  <h4>{{person}}</h4>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>薪水:{{job.j1.salary}}</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">增长薪水</button>
</template>

<script>
import {reactive, ref, toRef,toRefs,shallowReactive,shallowRef} from 'vue'
export default {
  name:'demo',
  setup(){
    // 数据
    let person = shallowReactive({  // 只考虑第一层数据的响应式
    // let person = reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    let x = shallowRef({
    // let x = ref({
      y:0
    })

    const name1 = person.name
    console.log('%%%',name1)

    const name2 = toRef(person,'name')
    console.log('###',name2)
    // 返回一个对象(常用)
    return {
      x,
      person,
      ...toRefs(person)
    }
  },
}
</script>
<template>
  <h4>当前的x值是:{{x.y}}</h4>
  <button @click="x.y++">x.y++</button>
  <hr>
  <h4>{{person}}</h4>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>薪水:{{job.j1.salary}}</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">增长薪水</button>
</template>

<script>
import {reactive, ref, toRef,toRefs,shallowReactive,shallowRef} from 'vue'
export default {
  name:'demo',
  setup(){
    // 数据
    let person = shallowReactive({  // 只考虑第一层数据的响应式
    // let person = reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    let x = shallowRef({
    // let x = ref({
      y:0
    })

    const name1 = person.name
    console.log('%%%',name1)

    const name2 = toRef(person,'name')
    console.log('###',name2)
    // 返回一个对象(常用)
    return {
      x,
      person,
      ...toRefs(person)
    }
  },
}
</script>