前言
关于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>
运行项目：npm run serve
最终截图如下：
（可以清晰看到Reactive的Age会有变动，而shallowReactive是不会变动的）
