【vue3】关于ref、toRef、toRefs那些事

简介: ref、toRef、toRefs那些事

【前言】我们在上一节的学习当中,使用了reactive()函数将vue3中的数据变成响应式的数据,本文中所讲的三个方法也能实现将数据转化为响应式数据。话不多说,让我们来学习下这三个方法怎么用,以及与reactive的区别。

⭐一、ref

ref 函数,可以把简单数据类型包裹为响应式数据(复杂类型也可以),注意 JS 中操作值的时候,需要加 .value 属性,模板中正常使用即可。

举个例子:

ref包装基本类型数据

App.vue

<template>
  <div class="container">
      <div>{{ name }}</div>
      <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
      name: 'App',
      setup() {
          const name = ref('初映')
          const updateName = () => {
              name.value = '初映CY的前说'
          }
          return { name, updateName }
      },
  }
</script>

44f5b247c5ac4c13a065e41c674ab01c.gif

可看见写法与reactive()一样,不过是在js中书写的时候需要额外加一个.value即可

ref包装复杂类类型数据

注意:ref 其实也可以包裹复杂数据类型为响应式数据,一般对于数据类型未确定的情况下推荐使用 ref,例如后端返回的数据。

<template>
    <div class="container">
        <div>{{ data?.name }}</div>
        <button @click="updateName">修改数据</button>
    </div>
</template>
<script>
    import { ref } from 'vue'
    export default {
        name: 'App',
        setup() {
            // 初始值是 null
            const data = ref(null)
            setTimeout(() => {
                // 右边的对象可能是后端返回的
                data.value = {
                    name: '初映',
                }
            }, 1000)
            const updateName = () => {
                data.value.name = 'CY'
            }
            return { data, updateName }
        },
    }
</script>

dbb2f930c0ab4e698110a76a0490112a.gif

如何选择?

ref()和reactive()都是Vue.js3.0中提供的两个响应式API。

ref()主要用于创建一个响应式数据,它会将一个普通的JavaScript对象转换为一个响应式的对象,从而使数据的变化可以被Vue实例所追踪,当数据发生变化时,Vue会自动更新相关视图。ref()创建的响应式数据可以通过.value属性来访问和修改。

reactive()则主要用于创建一个响应式对象,可以用作包含多个值的状态对象,通常用于管理复杂的状态。它可以将一个普通的JavaScript对象转换为一个响应式对象,并且支持嵌套属性,即使嵌套属性发生变化也会被Vue实例所追踪。当响应式对象中有任何一个属性发生变化时,Vue也会自动更新相关的视图。

当你明确知道需要包裹的是一个对象,那么推荐使用 reactive,其他情况使用 ref 即可。

Vue3.2 之后,更推荐使用 ref,性能得到了很大的提升。

⭐二、toRef

toRef 函数的作用:转换响应式对象中某个属性为单独响应式数据,并且转换后的值和之前是关联的(ref 函数也可以转换,但值非关联)。

先看下面这个例子:

<template>
  <div class="container">
      <h2>name: {{ obj.name }} age: {{obj.age}}</h2>
      <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { reactive } from 'vue'
  export default {
      name: 'App',
      setup() {
          const obj = reactive({
              name: '初映',
              age: 18,
              address: '江西',
              sex: '男',
          })
          const updateName = () => {
              obj.name = '初映CY的前说'
          }
          return { obj, updateName }
      },
  }
</script>

bfdad3aca94345159e5fe4ebc4a733b3.gif

这样写也可以将数据进行更改成为响应式的数据,但是带来了两个问题:

问题 1:模板中都要使用 obj. 进行获取数据,麻烦。

问题 2:明明模板中只用到了 name 和 age,却把整个 obj 进行了导出,没必要,性能浪费。

<template>
  <div class="container">
      <h2>name: {{ name }} </h2>
      <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { reactive,toRef  } from 'vue'
  export default {
      name: 'App',
      setup() {
          const obj = reactive({
              name: '初映',
              age: 18,
              address: '江西',
              sex: '男',
          })
          const name = toRef(obj, 'name')
          const updateName = () => {
              obj.name = '初映CY的前说'
          }
          return { name, updateName }
      },
  }
</script>

这样把我们需要的数据放进return即可,节约了性能与在模板中的写法,有点点了‘按需导入’的意思

⭐三、torefs

toRefs 函数的作用:转换响应式对象中所有属性为单独响应式数据,并且转换后的值和之前是关联的。

<template>
  <div class="container">
      <h2>{{ name }} {{ age }}</h2>
      <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { reactive, toRefs } from 'vue'
  export default {
      name: 'App',
      setup() {
          const obj = reactive({
              name: '初映',
              age: 10,
          })
          const updateName = () => {
              obj.name = '初映CY的前说'
              obj.age = 18
          }
          return { ...toRefs(obj), updateName }
      },
  }
</script>

541b6a5aaaaa4970835715f6739fc218.gif

toRefs将我们所有的响应式数据都进行return出去了,届时直接用上数据名称即可,记得加上…喔



相关文章
|
13天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
149 11
|
5月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
750 5
|
2月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
272 1
|
2月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
149 0
|
3月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
99 0
|
5月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
423 17
|
5月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1509 0
|
15天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
134 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
571 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能

热门文章

最新文章