Vue3：shallowRef与shallowReactive

news2024/9/25 8:31:26

一.shallowRef 和 shallowReactive

1.shallowRef

2.shallowReactive

二.ref 和 reactive

1. ref

2. reactive

三.各自使用场景

1.shallowRef

2.shallowReactive

3.ref

4.reactive

四.shallowRef 使用

五.shallowReactive使用

六.效果

一.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>