shallowRef和shallowReactive的使用?

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、 shallowRef？

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

二、 shallowReactive？

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

在什么时候使用？

• shallowReactive：如果只有一个对象数据，结构比较深，但是变化时只是外层属性的变换
• shallowRef：如果只有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来进行替换

三、案例

1、shallowRef

<template>
  <div>
    <h2>姓名：{{ person }}h2>
    <h2>姓名2：{{ obj.msg.name }}h2>
    <h2>描述：{{ obj.msg.context }}h2>
    <button @click="changePerson">修改namebutton>
    <button @click="changeContext">修改描述button>
  div>
template>

<script>
import { toRefs, shallowRef } from "vue";
export default {
  setup() {
    const person = shallowRef("jiajia11");
    const obj = shallowRef({
      msg: {
        name: "jiajia222",
        context: "真好看",
      },
    });

    const changePerson = () => {
      person.value += "&";
      console.log(person.value,'Person数据');
    };

    // 当使用shallowReactive来进行修改的时候，修改是不成功的
    //结论：shallowReative与shallowRef在某些特殊的应用场景下,是可以提升性能的；
    // 前者针对对象,用于浅层作用的响应式数据处理,而后者只处理基本数据类型的响应式,不进行对象的响应式处理
    const changeContext = () => {
      obj.value.msg.context += "对";
    };

    return {
      person,
      obj,
      changePerson,
      changeContext,
      obj,
    };
  },
};
script>

当使用shallowReactive来进行修改的时候，修改是不成功的

2、shallowReactive

<template>
  <div>
    <h2>浅姓名：{{ name }}h2>
    <h2>深年龄：{{ msg.age }}h2>
    <h2>浅层：{{a}}h2>
    <button @click="reactiveBtn">修改namebutton>
    <button @click="changeAge">修改agebutton>
    <button @click="changeA">修改abutton>
  div>
template>

<script>
import {toRefs,shallowReactive,shallowRef} from 'vue'
export default {
    setup(){
        const person = shallowReactive(
            {
                name:"Reactive",
                a:0,
                msg:{
                    age:20
                }
            }
        )

        const reactiveBtn = ()=>{
            person.name += '&'
        }

// 当使用shallowReactive来进行修改的时候，修改是不成功的
        const changeAge = ()=>{
            person.msg.age += 1
        }
        // 修改浅层
        const changeA = ()=>{
            person.a+=1
        }

        return {
            ...toRefs(person),
            reactiveBtn,
            changeAge,
            changeA
        }
    }
};
script>

<style lang="scss" scoped>
style>

点击修改年龄时不会发生改变，当触发修改a时才会进行改变