这两个做性能优化的时候才用

• shallowReactive() 只会处理对象最外层属性的响应式(也就是只会处理第一层)

• 应用： 如果有一个对象数据，结构比较深，但变化时只是外层属性变化，这个时候可以用shallowReactive()

<template>
  <div class="App">
    <p>年龄是：{
   { person.age }}</p>
    <p>薪资是：{
   { person.job.salary }}</p>
    <button @click="person.age++">改变年龄</button>
    <button @click="person.job.salary++">改变薪资</button>
  </div>
</template>
​
<script>
import { shallowReactive } from 'vue'
​
export default {
  name: 'App',
  setup() {
    // shallowReactive() 定义的只会处理最外层的响应式(也就是只会处理第一层)
    let person = shallowReactive({
      age: 24,
      job: {
        salary: 8000,
      },
    })
    return { person }
  },
}
</script>

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

• 应用 ： 如果有一个对象数据，后续功能不会修改对象中的属性，而是生成一个新的对象来替换，这个时候可以用shallowRef()

<template>
  <div class="App">
    <p>年龄是：{
   { age }}</p>
    <!-- 这里会报错，都无法显示，因为shallowRef() 处理不了对象的响应式 -->
    <p>爱好是：{
   { hobby.sing }}</p>
  </div>
</template>
​
<script>
import { shallowRef } from 'vue'
​
export default {
  name: 'App',
  setup() {
    // shallowRef() 只能处理简单数据类型的响应式，不能处理对象的响应式
    let person = shallowRef({
      age: 24,
      hobby: {
        sing: '唱',
        dance: '跳',
      },
    })
    console.log(person) // value: Object  这里不是响应式的哦
    return { person }
  },
}
</script>