目录
[一.shallowRef 和 shallowReactive](#一.shallowRef 和 shallowReactive)
[二.ref 和 reactive](#二.ref 和 reactive)
[1. ref](#1. ref)
[2. reactive](#2. reactive)
[四.shallowRef 使用](#四.shallowRef 使用)
一.shallowRef 和 shallowReactive
1.shallowRef
用于创建一个基本类型的响应式引用。它只对该引用本身进行响应式处理,不会深入到引用所指向的对象内部。这意味着如果引用的值是一个对象或数组,那么这个对象或数组内部的变化将不会触发视图更新。
2.shallowReactive
用于创建一个对象的响应式包装。与reactive类似,但它只会使对象的第一层属性变为响应式,而不会递归地使所有嵌套属性变为响应式。这可以减少不必要的性能开销,特别是在处理大型对象时。
二.ref 和 reactive
1.ref
用于创建一个响应式引用,它可以用于任何类型的值(包括对象、数组等)。当引用的值发生变化时,会触发视图的更新。
2.reactive
用于创建一个对象的响应式包装,它会递归地使所有嵌套属性变为响应式。这使得对嵌套属性的任何更改都会触发视图的更新。
三.各自使用场景
1.shallowRef
当你需要创建一个基本类型的响应式引用,并且希望避免深度监听时,可以使用 shallowRef
。例如,如果你有一个布尔值或数字作为状态,并且不希望这些值的变化导致整个对象被重新渲染,可以使用 shallowRef
。
2.shallowReactive
当你需要创建一个对象的响应式包装,但只关心第一层属性的变化,并且希望减少性能开销时,可以使用 shallowReactive
。例如,如果你有一个包含大量嵌套属性的大型对象,但只需要监视顶层属性的变化,可以使用 shallowReactive
。
3.ref
当你需要创建一个可以包含任何类型值的响应式引用时,可以使用ref
。例如,如果你有一个复杂的对象或数组作为状态,并且希望对其整体进行响应式处理,可以使用 ref
。
4.reactive
当你需要创建一个对象的完全响应式包装,并希望所有嵌套属性的变化都能触发视图更新时,可以使用reactive
。例如,如果你有一个包含多个嵌套属性的对象,并且希望每个属性的变化都能引起视图的更新,可以使用 reactive
。
四.shallowRef 使用
求和与修改整个人可成功修改
修改名字无法成功修改
五.shallowReactive使用
修改汽车品牌可成功修改
修改汽车颜色和引擎无法成功修改
六.代码
<template>
<h2>求和为:{{ sum }}</h2>
<h2>名字为: {{ person.name }}</h2>
<h2>年龄为:{{ person.age }}</h2>
<button @click="ChangeSum">求和加一</button>
<button @click="ChangeName">修改名字</button>
<button @click="ChangePerson">修改整个人</button>
<span></span>
<h2>汽车品牌: {{ car.brand }}</h2>
<h2>汽车颜色:{{ car.options.color }}</h2>
<h2>汽车引擎:{{ car.options.engine }}</h2>
<button @click="ChangeBrand">修改汽车品牌</button>
<button @click="ChangeColor">修改汽车颜色</button>
<button @click="ChangeEngine">修改引擎</button>
</template>
<script lang="ts" setup name="App">
import { options } from 'node_modules/axios/index.cjs';
import { ref , reactive, shallowRef , shallowReactive} from 'vue';
let car = shallowReactive({
brand:'宝马',
options:{
color:'红色',
engine:'V6',
}
})
function ChangeBrand(){
car.brand = '奔驰'
}
function ChangeColor(){
car.options.color = '白色'
}
function ChangeEngine(){
car.options.engine = 'V16'
}
let sum = shallowRef(0)
let person = shallowRef(
{name:'小明',
age:18}
)
function ChangeSum(){
sum.value += 1
}
function ChangeName(){
person.value.name = '小红'
}
function ChangePerson(){
person.value = {name:'小兰',age:28}
}
</script>
<style>
button{
width: 150;
height: 40;
}
</style>