vue3核心语法【二】ref系列：ref与reactive、shallowRef与shallowReactive、toRefs与toRef、storeToRefs、ref标签

已于 2024-05-28 15:19:30 修改
阅读量2.5k 收藏 33
点赞数 30
分类专栏： VUE 文章标签： javascript vue.js 前端 vue
于 2024-05-28 10:24:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxz947462113/article/details/139253009
版权

文章目录

二、Vue3核心语法之ref系列：ref与reactive、shallowRef与shallowReactive、toRefs与toRef、storeToRefs、ref标签

1、ref与reactive

（1）ref ：创建【基本类型】的响应式数据

  • 作用： 定义响应式变量。
  • 语法：let xxx = ref(初始值)。
  • 返回值： 一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
  • 注意点：
    • JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。
    • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。
<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import {ref} from 'vue'
  // name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
  let name = ref('张三')
  let age = ref(18)
  // tel就是一个普通的字符串，不是响应式的
  let tel = '13888888888'

  function changeName(){
    // JS中操作ref对象时候需要.value
    name.value = '李四'
    console.log(name.value)

    // 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。
    // name = ref('zhang-san')
  }
  function changeAge(){
    // JS中操作ref对象时候需要.value
    age.value += 1 
    console.log(age.value)
  }
  function showTel(){
    alert(tel)
  }
</script>

（2）reactive ：创建【对象类型】的响应式数据

  • 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）
  • 语法：let 响应式对象= reactive(源对象)。
  • 返回值： 一个Proxy的实例对象，简称：响应式对象。
  • 注意点：reactive定义的响应式数据是“深层次”的。
<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive } from 'vue'

// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

function changeCarPrice() {
  car.price += 10
}
function changeFirstGame() {
  games[0].name = '流星蝴蝶剑'
}
function test(){
  obj.a.b.c.d = 999
}
</script>

（3）ref 创建【对象类型】的响应式数据

  • 其实ref接收的数据可以是：基本类型、对象类型。
  • 若ref接收的是对象类型，内部其实也是调用了reactive函数。
    在这里插入图片描述
<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref,reactive } from 'vue'

// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive ({
  x:999
})

console.log(car)
console.log(obj )

function changeCarPrice() {
  car.value.price += 10
}
function changeFirstGame() {
  games.value[0].name = '流星蝴蝶剑'
}
function test(){
  obj.value.a.b.c.d = 999
}
</script>

（4）ref 与 reactive 对比

  • 宏观角度看：

  1. ref用来定义：基本类型数据、对象类型数据；

  2. reactive用来定义：对象类型数据。

  • 区别：
  1. ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。
    在这里插入图片描述
  2. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
    在这里插入图片描述
  • 使用原则：
  1. 若需要一个基本类型的响应式数据，必须使用ref。
  2. 若需要一个响应式对象，层级不深，ref、reactive都可以。
  3. 若需要一个响应式对象，且层级较深，推荐使用reactive。

2、shallowRef与shallowReactive

（1）shallowRef

  1. 作用：创建一个响应式数据，但只对顶层属性进行响应式处理。

  2. 用法：

    let myVar = shallowRef(initialValue);

  3. 特点：只跟踪引用值的变化，不关心值内部的属性变化。

在这里插入图片描述

（2）shallowReactive

  1. 作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的

  2. 用法：

    const myObj = shallowReactive({ ... });

  3. 特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。

在这里插入图片描述

（3）官网总结

通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。

3、toRefs 与 toRef

  • 作用：将一个响应式对象中的每一个属性，转换为ref对象。
  • 备注：toRefs与toRef功能一致，但toRefs可以批量转换。
  • 缺陷：toRefs会转换目标对象中的全部内容，包括数据+方法。若只想转换目标对象中的数据，则需要引入pinia提供的storeToRefs
  • 语法如下：
<template>
  <div class="person">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>性别：{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,reactive,toRefs,toRef} from 'vue'

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
	
  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')

  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>

4、storeToRefs

storeToRefs也常与pinia一起使用，详情参考【vue3之pinia】http://t.csdnimg.cn/IeTc7

  • 借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。
  • 注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据（包括数据+方法）。
<template>
	<div class="count">
		<h2>当前求和为：{{sum}}</h2>
	</div>
</template>

<script setup lang="ts" name="Count">
  import { useCountStore } from '@/store/count'
  /* 引入storeToRefs */
  import { storeToRefs } from 'pinia'

	/* 得到countStore */
  const countStore = useCountStore()
  /* 使用storeToRefs转换countStore，随后解构 */
  const {sum} = storeToRefs(countStore)
</script>

5、标签的 ref 属性

作用：用于注册模板引用。

  • 用在普通DOM标签（即：HTML）上，获取的是DOM节点。

  • 用在组件标签上，获取的是组件实例对象。

（1）用在【普通DOM】标签上

<template>
  <div class="person">
    <h1 ref="title1">CSDN</h1>
    <h2 ref="title2">前端</h2>
    <h3 ref="title3">Vue</h3>
    <input type="text" ref="inpt"> <br><br>
    <button @click="showLog">点我打印内容</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref} from 'vue'
	
  let title1 = ref()
  let title2 = ref()
  let title3 = ref()

  function showLog(){
    // 通过id获取元素
    const t1 = document.getElementById('title1')
    // 打印内容
    console.log((t1 as HTMLElement).innerText)
    console.log((<HTMLElement>t1).innerText)
    console.log(t1?.innerText)
    
		/************************************/
		
    // 通过ref获取元素
    console.log(title1.value)
    console.log(title2.value)
    console.log(title3.value)
  }
</script>

补充：不在vue中使用id获取元素的原因——当在父子组件中同时存在id名一致时，会默认取页面最先渲染完毕的那个id元素。

（2）用在【组件】标签上

<!-- 父组件App.vue -->
<template>
  <Person ref="ren"/>
  <button @click="test">测试</button>
</template>

<script lang="ts" setup name="App">
  import Person from './components/Person.vue'
  import {ref} from 'vue'

  let ren = ref()

  function test(){
    console.log(ren.value.name)
    console.log(ren.value.age)
  }
</script>


<!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">
  import {ref,defineExpose} from 'vue'
	// 数据
  let name = ref('张三')
  let age = ref(18)
  /****************************/
  /****************************/
  // 使用defineExpose将组件中的数据交给外部
  defineExpose({name,age})
</script>
【Vue3 知识第七讲】reactive、shallowReactive、toRef、toRefs 等系列方法应用与对比
前端知识分享喵
09-04 2095
reactive、shallowReactive 等系列方法应用与对比
【Vue3】组件通信之$refs
又言又语
08-04 3476
本文介绍 Vue3 中如何使用$refs实现父组件向子组件传数据。父组件向子组件传数据，实现方案有：propsv-model$refs默认插槽 / 具名插槽子组件向父组件传数据propsv-model$parent自定义事件作用域插槽父组件向子组件的子组件传数据，即向孙子组件传数据$attrsproviderinject任意组件间传数据mittPinia$refs的使用场景是：父组件向多个子组件同时传数据，本质还是组件标签的ref属性；子组件需要使用。
Vue3 中 shallowRef 的神奇用法，让你的代码更加优雅！
最新发布
Jacklx888的博客
05-05 313
✨宝子们，今天给大家带来一个Vue3中的神器——shallowRef！如果你已经厌倦了深度响应式的繁琐操作，那么shallowRef绝对是你的菜。让我们一起来看看它是如何让我们的代码变得简洁又高效的吧！
Vue3实战笔记（44）—vue3组件的ref属性
山花的博客
05-26 3563
之前学习过ref声明响应式对象，前几天读代码遇到了发懵的地方，详细学习了一下才发现，用法还有很多，遂总结一下ref的用法备忘。Vue3 中的 ref 是一种创建响应式引用的方式，它在Vue生态系统中扮演着重要角色。以下是Vue3中ref属性及其相关API的几个关键点：创建响应式变量：使用 ref 函数可以创建一个响应式的数据引用，返回的对象包含 .value 属性，该属性既可以读取也可以写入，并且是响应式的。Javascript2// 创建一个响应式引用，初始值为0// 输出0。
Vue3 中的 ref 详解 - 看完你就懂了
jiajia651304的博客
03-20 1964
refref的作用：为基本数据类型（以及需要单独引用的对象）提供响应性，简化状态管理。使用场景：当需要一个简单的、单一的响应式数据时，优先选择ref；处理复杂对象时，则考虑使用reactive。模板与 JavaScript 中的区别：模板中 Vue 自动解包ref，而在 JavaScript 中需通过.value来访问和修改数据。最佳实践：避免解构ref导致的响应性丢失，灵活搭配 Composition API 的其他响应式工具构建健壮的业务逻辑。通过本文，你应当能更好地理解 Vue 3 中ref。
详细分析Vue3中的ref（附Demo）
码农研究僧的博客
05-14 2900
ref 是 Vue 3 中用于创建响应式数据的函数 接收一个初始值并返回一个包含了该值的响应式引用对象 与 Vue 2.x 中的 data 属性不同，ref 返回的是一个对象，而不是一个直接的值
【Vue3】深入理解Vue中的ref属性
null18的博客
03-01 3690
ref是Vue提供的一个特殊属性，用来在模板或组件中给子元素或组件注册引用信息。这个引用信息可以是一个指向DOM元素或组件实例的引用，通过这个引用，我们可以直接操作对应的DOM元素或组件实例总结一下* 用在普通DOM标签上，获取的是DOM节点。用在组件标签上，获取的是组件实例对象。挑战与创造都是很痛苦的，但是很充实。
vue3.0学习笔记（二）——生命周期与响应式数据（ref,reactive,toRef,toRefs函数）
weixin_56370772的博客
07-22 1163
组合API的生命周期钩子有7个，可以多次使用同一个钩子，执行顺序和书写顺序相同。
Vue reactive ref v-bind 语法示例演示代码
07-17
Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码...
Vue3 -- ref & reactive & toRefs & toRef响应式引用
Sun_blog
07-11 1134
文章目录响应式原理refreactive数据未解构时尝试对数据进行解构toRefstoRefs响应式引用toRefs封装不存在数据toRefreadonly完整代码总结 响应式原理 通过 proxy 对数据进行封装，当数据变化时，触发模板内容更新。 ref 作用：接受一个内部值并返回响应式对象； 处理：一般用于处理基础数据类型； 引用：ref需要从Vue中引入才能使用； 使用：通过value属性获取，使用数据时不需要使用value； // 模板中使用时，vue底层自动调用 .value
Vue（五）：2.0语法转3.0、setup函数、reactive函数、ref函数、isRef和toRefs方法、路由配置
Start_Simple的博客
03-14 1550
依赖Composition API、菜单分栏子路由
reactive和ref有什么区别
weixin_46945750的博客
07-16 1万+
reactive 和 ref 是 Vue 3 中的两种响应式数据绑定方式，ref 适用于简单的响应式数据，而 reactive 则适用于复杂对象或数组的响应式数据。
vue3中ref的理解
热门推荐
weixin_47886687的博客
01-21 5万+
1.什么是ref? ref和reactive一样,也是用来实现响应式数据的方法 由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦 所以Vue3提供了ref方法实现简单值得监听 2.ref本质 ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive. 3.ref注意点 在vue中使用ref的值不用通过value获取 在js中使用ref的值必须通过value获取 ...
Vue3使用ref属性访问子组件的方法
ChuXin_0817的博客
06-13 520
Vue3使用ref属性访问子组件的方法
Vue3组件通信之使用ref实现组件通信
weixin_73368873的博客
06-23 699
vue3相比vue2真的提升很多，比如这个ref实现组件通信，确实是个非常不错的东西。所谓的ref实现组件通信是指通过ref挂在组件的实例，这样父子组件就可以通过ref实现组件通信了。
Vue 3 中的 ref 完全指南
2301_79858914的博客
11-15 7069
Vue 3 引入了 Composition API，其中 ref 是关键的一部分。ref 可以让我们更方便地在组件中定义响应式数据，在模板中使用 语法糖时尤为简洁。
Vue3+ts(day05：ref、props、生命周期、hook)
weixin_51591826的博客
05-02 919
Vue3+ts中的ref、props、生命周期、hook
Vue3 中的各种ref
weixin_45403802的博客
02-04 1839
ref(): 接收一个值并返回一个响应式的对象，可以使用.value 属性来访问和修改这个值。toRef(obj, key):根据一个响应式对象中的一个属性，创建一个响应式的 ref，并且该 ref 和原对象中的属性保持同步。toRefs(obj): 将一个响应式对象转换成一个普通对象，其中普通对象的每个属性都是响应式的 ref。isRef(value): 判断某个值是否是 ref 对象。unref(value): 用于解除响应式引用。
Vue3关于组件通信、动态组件、组件的ref和$refs、webpack分包、组件中v-modal使用
Litt_White的博客
04-19 2642
组件通信，插槽slot的使用，具名插槽，作用域插槽，动态组件，webpack分包，异步组件，组件的ref和$refs使用，组件的v-modal的使用
前端vue3ref、isRef、toRefs、shallowReactive
03-30
### Vue 3 中 `ref`、`isRef`、`toRefs` 和 `shallowReactive` 的功能及用法 #### 1. `ref` `ref` 是 Vue 3 提供的一个核心 API，用于创建一个响应式的引用对象。这个对象内部会自动追踪其值的变化并通知视图更新。 - **语法**: ```javascript import { ref } from &#39;vue&#39;; const count = ref(0); console.log(count.value); // 访问值时需通过 `.value` count.value++; // 修改值也需要通过 `.value` ``` - **特点**: - 可以包装基本数据类型（如字符串、数字等），也可以包装复杂数据结构。 - 需要通过 `.value` 来访问或修改它的值[^1]。 --- #### 2. `isRef` `isRef` 是用来检测某个变量是否是一个由 `ref()` 创建的响应式引用对象。 - **语法**: ```javascript import { ref, isRef } from &#39;vue&#39;; const myRef = ref(42); console.log(isRef(myRef)); // true console.log(isRef(42)); // false ``` - **用途**: - 帮助开发者判断当前处理的对象是否是由 `ref` 构建而成，从而决定如何操作该对象。 --- #### 3. `toRefs` `toRefs` 将一个响应式对象转换为普通对象，其中每个属性都是指向原始对象相应属性的 `ref`。 - **语法**: ```javascript import { reactive, toRefs } from &#39;vue&#39;; const state = reactive({ name: &#39;Alice&#39;, age: 25, }); const refsState = toRefs(state); refsState.name.value = &#39;Bob&#39;; // 同样会影响原对象中的 name 属性 console.log(state.name); // 输出 Bob ``` - **优点**: - 当需要解构响应式对象时，可以保持每个属性的响应性[^2]。 --- #### 4. `shallowReactive` `shalogReactive` 是一种浅层响应式机制，只会在顶层对象上设置代理器，而不会递归地使嵌套对象也变成响应式。 - **语法**: ```javascript import { shallowReactive } from &#39;vue&#39;; const nestedObject = { user: { name: &#39;Charlie&#39;, age: 30, }, }; const shallowObj = shallowReactive(nestedObject); // 浅层响应仅作用于顶层对象本身 shallowObj.user = { name: &#39;David&#39;, age: 35 }; // 这里会触发响应 console.log(shallowObj.user.age); // 输出 35 // 不会对深层对象进行监控 shallowObj.user.name = &#39;Eve&#39;; // 此处不会触发响应 console.log(shallowObj.user.name); // 输出 Charlie (未改变)[^3] ``` - **适用场景**: - 如果不需要对深层次的数据变化做出反应，则可以选择使用 `shallowReactive` 节省性能开销。 --- ### 功能对比总结表 | 特性/API | 是否支持深拷贝 | 如何访问值 | 主要用途 | |------------------|--------------------|--------------------|----------------------------| | `ref` | 支持 | 通过 `.value` | 单独封装基础类型的响应式变量 | | `isRef` | N/A | 判断是否为 `ref` | 辨识变量是否来自 `ref` | | `toRefs` | 支持 | 自动映射到 `ref` | 解构响应式对象的同时保留响应能力 | | `shallowReactive` | 不完全支持 | 直接访问属性名 | 实现浅层次的响应式状态管理 | --- ### 示例代码综合演示 以下是结合上述四个特性的实际应用案例： ```javascript import { ref, isRef, toRefs, shallowReactive } from &#39;vue&#39;; // 使用 ref 定义单个响应式变量 const counter = ref(0); if (isRef(counter)) { console.log(&#39;counter 是一个 ref:&#39;, counter.value); } // 使用 toRefs 处理响应式对象 const userInfo = reactive({ username: &#39;JohnDoe&#39;, score: 98 }); const userRefs = toRefs(userInfo); userRefs.score.value += 2; console.log(`新分数：${userInfo.score}`); // 使用 shallowReactive 设置浅层响应式对象 const deepData = { details: { title: &#39;Example&#39; } }; const shallowData = shallowReactive(deepData); deepData.details.title = &#39;Updated Title&#39;; // 不会触发响应 shallowData.details = {}; // 触发响应 ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值