详细分析Vue3中的shallowReactive基本知识（附Demo）

前言

关于reactive的基本知识推荐阅读：详细分析Vue3中的reactive（附Demo）

1. 基本知识

在 Vue 3 中，shallowReactive 是一种创建响应式对象的方法，主要用于避免深度嵌套对象的响应式代理

与 reactive 不同，shallowReactive 仅对第一层属性进行响应式处理，而嵌套属性保持为普通对象

主要的特性有如下：

浅响应性：只对对象的第一层属性进行响应式处理
性能优化：适用于不需要深层响应的场景，减少开销
用途：适合处理简单对象或性能敏感的场合

对应的差异比较如下：

特性	reactive	shallowReactive
响应性深度	深度响应	浅层响应
性能	较低（对于深层对象）	较高（适用于简单对象）
嵌套属性响应性	所有嵌套属性都为响应式	嵌套属性为普通对象
用途	适用于需要追踪深层次变化的场景	适用于简单对象或性能优化场景

2. Demo

基本的Demo如下：

import { reactive, shallowReactive, watch } from 'vue';

const App = {
  setup() {
    // 使用 reactive 创建响应式对象
    const reactiveState = reactive({
      name: 'John',
      details: {
        age: 30,
        address: '123 Main St'
      }
    });

    // 使用 shallowReactive 创建浅响应对象
    const shallowReactiveState = shallowReactive({
      name: 'Jane',
      details: {
        age: 25,
        address: '456 Elm St'
      }
    });

    // 监视 reactiveState 的变化
    watch(() => reactiveState.details.age, (newAge) => {
      console.log(`reactiveState's age changed to: ${newAge}`);
    });

    // 监视 shallowReactiveState 的变化
    watch(() => shallowReactiveState.details.age, (newAge) => {
      console.log(`shallowReactiveState's age changed to: ${newAge}`);
    });

    // 模拟变化
    setTimeout(() => {
      reactiveState.details.age = 31; // 触发 reactive 的 watcher
    }, 1000);

    setTimeout(() => {
      shallowReactiveState.details.age = 26; // 不会触发 watcher
    }, 2000);

    return {
      reactiveState,
      shallowReactiveState
    };
  },
  template: `
    <div>
      <h2>Reactive State</h2>
      <p>Name: {{ reactiveState.name }}</p>
      <p>Age: {{ reactiveState.details.age }}</p>

      <h2>Shallow Reactive State</h2>
      <p>Name: {{ shallowReactiveState.name }}</p>
      <p>Age: {{ shallowReactiveState.details.age }}</p>
    </div>
  `
};

export default App;

为了更好的展示其两者的差异，制作一个Vue项目来展示

# 安装 Vue CLI（如果还没有安装的话）
npm install -g @vue/cli

# 创建一个新的 Vue 3 项目
vue create my-vue-app

# 进入项目目录
cd my-vue-app

在 src/components 目录下，创建一个新的 Vue 组件文件，例如 ReactiveDemo.vue：

<template>
  <div>
    <h2>Reactive State</h2>
    <p>Name: {{ reactiveState.name }}</p>
    <p>Age: {{ reactiveState.details.age }}</p>

    <h2>Shallow Reactive State</h2>
    <p>Name: {{ shallowReactiveState.name }}</p>
    <p>Age: {{ shallowReactiveState.details.age }}</p>
  </div>
</template>
  
<script>
import { reactive, shallowReactive, watch } from 'vue';

export default {
  setup() {
    // 使用 reactive 创建响应式对象
    const reactiveState = reactive({
      name: 'John',
      details: {
        age: 30,
        address: '123 Main St'
      }
    });

    // 使用 shallowReactive 创建浅响应对象
    const shallowReactiveState = shallowReactive({
      name: 'Jane',
      details: {
        age: 25,
        address: '456 Elm St'
      }
    });

    // 监视 reactiveState 的变化
    watch(() => reactiveState.details.age, (newAge) => {
      console.log(`reactiveState's age changed to: ${newAge}`);
    });

    // 监视 shallowReactiveState 的变化
    watch(() => shallowReactiveState.details.age, (newAge) => {
      console.log(`shallowReactiveState's age changed to: ${newAge}`);
    });

    // 模拟变化
    setTimeout(() => {
      reactiveState.details.age = 31; // 触发 reactive 的 watcher
    }, 1000);

    setTimeout(() => {
      shallowReactiveState.details.age = 26; // 不会触发 watcher
    }, 2000);

    return {
      reactiveState,
      shallowReactiveState
    };
  }
};
</script>

对应的App.vue如下：

<template>
  <div id="app">
    <ReactiveDemo />
  </div>
</template>

<script>
import ReactiveDemo from './components/ReactiveDemo.vue';

export default {
  components: {
    ReactiveDemo
  }
};
</script>