shallow-reactive与shallow-ref的用法

1.作用

shallow-reactive:只处理对象最外层属性响应式的处理

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

2.什么时候用?

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

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

3.实战

<template>
  <div>
    <h1>姓名：{{name}}</h1>
    <h2>年龄：{{age}}</h2>
    <h3>喜欢的水果：{{likeFood.fruits.apple}}</h3>
    <button @click="name += '~'">修改姓名</button>
    <button @click="age++">修改年龄</button>
    <button @click="likeFood.fruits.apple += '！'">修改水果</button>
  </div>
</template>
 
<script>
import {reactive, toRefs, shallowReactive} from 'vue'
export default {
  name: "App",
  setup() {
    // 定义了一段数据
    let person = shallowReactive({    // 只将第一层数据做了响应式处理 
      name: '张三',
      age: 18,
      likeFood: {
        fruits:{
          apple: '苹果'               // 深层次的数据将会是一个普通的对象
        }
      }
    })
    // 将数据返回出去
    return {
      ...toRefs(person)
    }
  }
};
</script>

会发现，深层次的数据失去了响应式，因为此时他们是普通数据