Vue3:shallowRef与shallowReactive

目录

[一.shallowRef 和 shallowReactive](#一.shallowRef 和 shallowReactive)

1.shallowRef

2.shallowReactive

[二.ref 和 reactive](#二.ref 和 reactive)

[1. ref](#1. ref)

[2. reactive](#2. reactive)

三.各自使用场景

1.shallowRef

2.shallowReactive

3.ref

4.reactive

[四.shallowRef 使用](#四.shallowRef 使用)

五.shallowReactive使用

六.效果


一.shallowRefshallowReactive

1.shallowRef

用于创建一个基本类型的响应式引用。它只对该引用本身进行响应式处理,不会深入到引用所指向的对象内部。这意味着如果引用的值是一个对象或数组,那么这个对象或数组内部的变化将不会触发视图更新。

2.shallowReactive

用于创建一个对象的响应式包装。与reactive类似,但它只会使对象的第一层属性变为响应式,而不会递归地使所有嵌套属性变为响应式。这可以减少不必要的性能开销,特别是在处理大型对象时。

二.refreactive

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>

六.效果

相关推荐
EricWang13587 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning7 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
测试界的酸菜鱼9 分钟前
Python 大数据展示屏实例
大数据·开发语言·python
晴天飛 雪16 分钟前
React 守卫路由
前端框架·reactjs
web行路人17 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00118 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
晨曦_子画18 分钟前
编程语言之战:AI 之后的 Kotlin 与 Java
android·java·开发语言·人工智能·kotlin
Black_Friend26 分钟前
关于在VS中使用Qt不同版本报错的问题
开发语言·qt
子非鱼92136 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂39 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax