Vue3的shallowReactive和shallowRef

shallowReactive类似 reactive，不同的是， shallowReactive只处理对象最外层属性的响应式。
shallowRef类似 ref，不同的是， shallowRef只处理基本类型的响应式，不处理对象类型的响应式。

看下面几个例子就知道了。

项目目录如下。

以下的对比测试，仅对Demo.vue进行变更，main.js、App.vue不会变动，故将main.js、App.vue提前单独列在这儿，如下。

• main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

• App.vue

<template>
  <Demo/>
</template>

<script>
import Demo from './components/Demo.vue'
export default {
  name: 'App',
  components: {
    Demo
  }
}
</script>

reactive与shallowReactive

使用reactive

• Demo.vue

<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪酬：{{job.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>&nbsp;
  <button @click="age++">增长年龄</button>&nbsp;
  <button @click="job.salary++">涨薪</button>
</template>

<script>
import {reactive, toRef} from "vue";
export default {
  name:"Demo",
  setup(){
    let person = reactive({
      name:"张三",
      age:18,
      job:{
        salary:30
      }
    })

    return {
      name:toRef(person,"name"),
      age:toRef(person,"age"),
      job:toRef(person,"job")
    }
  }
}
</script>

• 测试效果
  点击涨薪，薪酬的数值会递增。
  

使用shallowReactive

• Demo.vue

<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪酬：{{job.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>&nbsp;
  <button @click="age++">增长年龄</button>&nbsp;
  <button @click="job.salary++">涨薪</button>
</template>

<script>
import {shallowReactive, toRef} from "vue";
export default {
  name:"Demo",
  setup(){
    let person = shallowReactive({
      name:"张三",
      age:18,
      job:{
        salary:30
      }
    })

    return {
      name:toRef(person,"name"),
      age:toRef(person,"age"),
      job:toRef(person,"job")
    }
  }
}
</script>

• 测试效果

点击涨薪，薪酬的数值不会递增。因为salary是person的job的属性，而shallowReactive只能处理浅层次的响应式，即只能处理对象最外层属性的响应式。

ref与shallowRef

使用ref

• Demo.vue

<template>
  <h2>当前和为：{{sum}}</h2>
  <button @click="sum++">点我加1</button>
  <hr>
  <h2>当前信息为：{{msg}}</h2>
  <button @click="msg+='!'">修改信息</button>
</template>

<script>
import {ref, toRef} from "vue";
export default {
  name:"Demo",
  setup(){
    let sum = ref(0);
    let response = ref({
      msg:"你好"
    })

    return {
      sum,
      msg:toRef(response.value,"msg")
    }
  }
}
</script>

• 测试效果
  点击点我加1，sum值递增。
  点击修改信息，obj的msg属性变化了。
  

使用shallowRef

• Demo.vue

<template>
  <h2>当前和为：{{sum}}</h2>
  <button @click="sum++">点我加1</button>
  <hr>
  <h2>当前信息为：{{msg}}</h2>
  <button @click="msg+='!'">修改信息</button>
</template>

<script>
import {shallowRef, toRef} from "vue";
export default {
  name:"Demo",
  setup(){
    let sum = shallowRef(0);
    let response = shallowRef({
      msg:"你好"
    })

    return {
      sum,
      msg:toRef(response.value,"msg")
    }
  }
}
</script>

• 测试效果
  点击点我加1，sum值递增。
  点击修改信息，obj的msg属性没有变化。
  这是因为shallowRef只能处理基本类型的响应式，不能处理对象类型的响应式。