vue3 shallowReactive 与 shallowRef

• shallowReactive : 只处理了对象内最外层属性的响应式(也就是浅响应式)

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

• 什么时候用浅响应式呢?

  • 一般情况下使用ref和reactive即可
  • 如果有一个对象数据, 结构比较深, 但变化时只是外层属性变化 ===> shallowReactive
  • 如果有一个对象数据, 后面功能不会修改该对象的属性，而是产生新的对象来替换 ===> shallowRef

 shallowReactive只是将第一层属性变成响应式，比如以下代码，页面中可以改姓名，改年龄，但是不能改变薪水

<template>
  <div class="about">

    <div>姓名{{name}}</div>
    <div>年龄{{age}}</div>
    <div>薪水{{job.job1.salary}}</div>

    <button @click="name+='三'">改姓名</button>
    <button @click="age++">改年龄</button>
    <button @click="job.job1.salary++">改薪水</button>
    
  </div>
</template>
<script>
import { toRefs,shallowReactive } from 'vue'
export default {
  name:'nowTest',
  setup() {
    let person = shallowReactive({ 
        name:'张三',
        age:12,
        job: {
            job1:{
                salary:20
            }
        }
    })
    return {
      ...toRefs(person)
    }
  },
}  
</script>

shallowRef处理基本类型时候和ref一样，处理对象类型的不会变成响应式，但是可以替换这个对象。比如将x.y的值++，不会改变，但是可以将x{y:0}这整个对象替换成x{z:0,k:0}

<template>
  <div class="about">
    <div>x的值{{x}}</div>
    <button @click="x.y++">改变x.y</button>
    <button @click="x={z:0,k:0}">替换x</button>
  </div>
</template>
<script>
import { shallowRef } from 'vue'
export default {
  name:'nowTest',
  setup() {
    let x = shallowRef({ 
      y:0
    })
    return {
      x
    }
  },
}  
</script>