AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue3基础ref,reactive,toRef ,toRefs 使用和理解

2024-08-20 119
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【8月更文挑战第4天】

在 Vue 3 中，ref、reactive、toRef 和 toRefs 是用于响应式数据管理的重要工具。理解它们的使用方式和区别对于有效地利用 Vue 3 的响应式系统至关重要。以下是对这些工具的详细解释和示例。

一. ref

ref 是 Vue 3 中用于创建响应式数据的一种方法。它主要用于处理基本数据类型（如字符串、数字、布尔值）以及简单的对象和数组。ref 允许你将一个普通的值变成响应式的，这样当这个值改变时，所有依赖于它的组件或计算属性也会自动更新。

基本用法

  1. 创建响应式引用：

    import {
      ref } from 'vue';

const count = ref(0); // 创建一个初始值为0的响应式引用

  2. 访问和修改值：

    count.value++; // 修改值
console.log(count.value); // 访问值

    注意：ref 创建的响应式数据需要使用 .value 属性来访问和修改。

在模板中使用

在 Vue 组件的模板中，ref 对象可以直接使用，而不需要 .value：

<template>
  <div>
    <p>Count: {
  { count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import {
     ref } from 'vue';

export default {
    
  setup() {
    
    const count = ref(0);

    const increment = () => {
    
      count.value++;
    };

    return {
     count, increment };
  }
};
</script>

ref 与 reactive 的区别

  • ref：适合用于基本数据类型（如字符串、数字、布尔值）。对于更复杂的数据结构，ref 也可以用于包装对象或数组，但在使用时需要通过 .value 访问内部数据。
  • reactive：用于创建一个响应式对象或数组，其中对象的每个属性都变成响应式的。reactive 更适合用于复杂的数据结构。

使用场景

  1. 简单的状态管理：

    import {
      ref } from 'vue';

const isLoggedIn = ref(false);
const username = ref('');

  2. 计算属性：

    import {
      ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => `${
       firstName.value} ${
       lastName.value}`);

  3. 响应式的 DOM 操作：

    import {
      ref } from 'vue';

const isVisible = ref(true);

    在模板中：

    <template>
  <div v-if="isVisible">Hello, World!</div>
</template>

二. reactive

reactive 是 Vue 3 中用于创建响应式对象的一个核心 API。与 ref 主要处理基本数据类型不同，reactive 主要用于将复杂的对象（如对象和数组）转换为响应式对象，从而使得对象内部的所有属性都具有响应性。这意味着，当对象的属性发生变化时，所有依赖于这些属性的组件或计算属性也会自动更新。

基本用法

  1. 创建响应式对象：

    import {
      reactive } from 'vue';

const state = reactive({
     
  count: 0,
  name: 'John',
  items: ['apple', 'banana']
});

  2. 访问和修改属性：

    state.count++; // 修改 count 属性
state.name = 'Doe'; // 修改 name 属性
state.items.push('orange'); // 修改 items 数组

    直接访问和修改 reactive 对象的属性时，无需使用 .value。属性会自动响应。

在模板中使用

在 Vue 组件的模板中，reactive 对象的属性可以直接使用：

<template>
  <div>
    <p>Count: {
  { state.count }}</p>
    <p>Name: {
  { state.name }}</p>
    <ul>
      <li v-for="item in state.items" :key="item">{
  { item }}</li>
    </ul>
    <button @click="increment">Increment</button>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
import {
     reactive } from 'vue';

export default {
    
  setup() {
    
    const state = reactive({
    
      count: 0,
      name: 'John',
      items: ['apple', 'banana']
    });

    const increment = () => {
    
      state.count++;
    };

    const addItem = () => {
    
      state.items.push('orange');
    };

    return {
     state, increment, addItem };
  }
};
</script>

reactive 与 ref 的区别

  • reactive：用于创建响应式对象或数组，使对象的所有属性都变成响应式。适合用于管理复杂的数据结构和多个相关的状态。
  • ref：用于创建响应式的单一值或基本数据类型。适合用于简单的数据，如数字、字符串或布尔值。ref 也可以包装对象或数组，但在访问时需要通过 .value。

使用场景

  1. 复杂的状态管理：

    import {
      reactive } from 'vue';

const state = reactive({
     
  user: {
     
    name: 'John',
    age: 30
  },
  todos: [
    {
      text: 'Buy groceries', done: false },
    {
      text: 'Clean the house', done: true }
  ]
});

// 修改嵌套对象的属性
state.user.name = 'Doe';
state.todos[0].done = true;

  2. 动态数组操作：

    import {
      reactive } from 'vue';

const state = reactive({
     
  items: ['apple', 'banana']
});

// 添加和删除数组元素
state.items.push('orange');
state.items.splice(1, 1); // 删除索引为1的元素

  3. 嵌套对象的响应式：

    import {
      reactive } from 'vue';

const state = reactive({
     
  user: {
     
    profile: {
     
      name: 'John',
      age: 30
    },
    settings: {
     
      theme: 'light'
    }
  }
});

// 修改嵌套属性
state.user.profile.name = 'Doe';
state.user.settings.theme = 'dark';

性能优化

  • 避免深层嵌套：reactive 对象的嵌套层级过深可能会影响性能。在处理非常复杂的嵌套结构时，考虑将状态拆分成多个较浅的对象。
  • 只创建必要的响应式数据：将数据分为响应式和非响应式部分，避免将所有数据都转化为响应式，特别是当某些数据不会发生变化时。

三. toRef

toRef 是 Vue 3 中的一个实用工具函数，用于将普通对象的属性转换为响应式引用（ref）。这对于将嵌套对象或组件的响应式状态转换为单一的 ref 对象特别有用。

基本用法

toRef 将一个对象的特定属性转换为一个 ref 对象。ref 对象是 Vue 中用于创建响应式基本数据类型或对象的工具，它的 .value 属性持有实际的值，并且可以在模板中直接访问。

示例

假设你有一个响应式对象，你想将其中的某个属性单独提取为 ref，可以使用 toRef：

import {
    reactive, toRef } from 'vue';

// 创建一个响应式对象
const state = reactive({
   
  count: 0,
  name: 'John'
});

// 将 state 对象中的 count 属性转换为 ref
const countRef = toRef(state, 'count');

// 使用 countRef
console.log(countRef.value); // 输出: 0
countRef.value++; // 修改 count 的值

// 更新后的值
console.log(state.count); // 输出: 1

在组件中的应用

toRef 在 Vue 组件中非常有用，尤其是在 setup 函数中。它允许你将响应式对象的属性以 ref 的形式暴露给模板或其他函数。

<template>
  <div>
    <p>Count: {
  { countRef }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import {
     reactive, toRef } from 'vue';

export default {
    
  setup() {
    
    const state = reactive({
    
      count: 0
    });

    // 将 count 属性转换为 ref
    const countRef = toRef(state, 'count');

    const increment = () => {
    
      countRef.value++;
    };

    return {
     countRef, increment };
  }
};
</script>

主要用途

  1. 解耦和重用：

    • toRef 可以将响应式对象的单个属性转换为 ref，使得这些属性能够在组件中独立使用。这对于需要将某些属性传递给子组件或者进行解耦操作时特别有用。

  2. 简化组合式 API 的使用：

    • 当使用组合式 API (setup 函数) 时，可能会需要将复杂的响应式对象中的某些属性单独处理。toRef 使得这个过程更加简洁明了。

  3. 与 ref 配合使用：

    • 将对象属性转化为 ref 可以在模板中直接使用，避免了使用 .value 的繁琐操作。

对比 ref 和 toRef

  • ref：用于创建一个新的响应式引用，无论是基本数据类型还是对象。当用于对象时，ref 会创建一个新的响应式引用对象，该对象的 .value 属性持有实际值。

  • toRef：用于将现有响应式对象的单个属性转换为 ref。这不会创建新的对象，而是直接转换现有对象的属性为 ref，从而简化属性的管理和访问。

注意：toRef 可以使你将 reactive 对象的属性提取为 ref，这样可以单独处理这个属性，并保持其响应性。

四. toRefs

toRefs 是 Vue 3 中的一个实用工具函数，用于将一个响应式对象的所有属性转换为 ref。这对于将一个响应式对象中的属性逐一转换为独立的 ref 对象，方便在组件的 setup 函数中使用非常有用。

基本用法

toRefs 函数接收一个响应式对象作为参数，并返回一个新的对象，其中的每个属性都是 ref 对象。这个新对象的属性保持了原有对象的属性名称，并且每个属性的值是对应的 ref 对象。

示例

假设你有一个响应式对象，并希望将它的属性逐一转换为 ref，可以使用 toRefs：

import {
    reactive, toRefs } from 'vue';

// 创建一个响应式对象
const state = reactive({
   
  count: 0,
  name: 'John'
});

// 将响应式对象的属性转换为 ref
const {
    count, name } = toRefs(state);

// 使用转换后的 refs
console.log(count.value); // 输出: 0
console.log(name.value);  // 输出: 'John'
count.value++;            // 修改 count 的值

// 更新后的值
console.log(state.count); // 输出: 1

在组件中的应用

在 Vue 组件的 setup 函数中，toRefs 可以帮助将响应式对象的属性方便地暴露给模板：

<template>
  <div>
    <p>Count: {
  { count }}</p>
    <p>Name: {
  { name }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import {
     reactive, toRefs } from 'vue';

export default {
    
  setup() {
    
    const state = reactive({
    
      count: 0,
      name: 'John'
    });

    // 将响应式对象的属性转换为 ref
    const refs = toRefs(state);

    const increment = () => {
    
      refs.count.value++;
    };

    return {
     ...refs, increment };
  }
};
</script>

主要用途

  1. 解耦和重用：

    • toRefs 可以将整个响应式对象的属性转换为 ref，使得这些属性可以独立使用。这对于需要将响应式对象的所有属性解耦并传递到模板中特别有用。

  2. 简化代码：

    • 当你有一个响应式对象，使用 toRefs 可以避免手动将每个属性转换为 ref。这使得代码更加简洁和易读。

  3. 与模板配合：

    • 在模板中使用 toRefs 转换后的属性时，可以直接访问这些属性，而无需再通过 .value 访问。这有助于保持模板的清晰性和简洁性。

对比 ref 和 toRefs

  • ref：用于创建单个响应式引用，可以用于基本数据类型或对象。对于对象类型，ref 会创建一个新的响应式引用对象，该对象的 .value 属性持有实际值。

  • toRefs：用于将整个响应式对象的属性逐一转换为 ref。它返回一个新对象，其中的每个属性都是 ref 对象。这不会创建新的响应式对象，而是保持原有对象的结构，并将其属性转换为 ref。

注意：toRefs 将 reactive 对象的每个属性转换为独立的 ref，这样每个属性都可以单独处理，并且保持响应性。

总结

  • ref：用于基本数据类型的响应式引用，访问和修改需要使用 .value。
  • reactive：用于创建响应式对象或数组，直接访问和修改其属性。
  • toRef：将 reactive 对象的某个属性转换为 ref，适用于单个属性。
  • toRefs：将整个 reactive 对象的属性转换为 ref 对象，适用于需要解构响应式对象的场景。

这些工具在 Vue 3 的响应式系统中互相配合使用，可以帮助你更灵活地管理和使用响应式数据。

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。

文章标签：
JavaScript
API
前端开发
数据管理
关键词：
torefs VUE.js
vue3 ref reactive VUE.js
vue3 reactive toref VUE.js
vue3 ref VUE.js
ref torefs VUE.js
肥晨
目录
相关文章
蓝易云
|
10天前
|
JavaScript API 数据处理
vue3使用pinia中的actions，需要调用接口的话
通过上述步骤，您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store，都能轻松实现高效的状态管理和数据处理。
蓝易云
39 3
mao29955
|
2月前
|
存储 JavaScript 数据管理
除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
需要注意的是，在实际开发中，应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时，要综合考虑代码的可读性、可维护性和性能等因素，以确保系统的稳定和高效运行。
mao29955
33 1
mao29955
|
2月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性，在处理一些复杂的组件间通信问题时，可以提供一种灵活的解决方案。通过合理使用它们，可以帮助我们更好地避免`v-model`的循环引用问题，提高代码的质量和可维护性。
mao29955
42 1
小宋1021
|
4天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
小宋1021
39 1
阿里巴巴叫我来巡山
|
14天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
116 17
雨溪-yuxi
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
46 1
vue学习第一章
雨溪-yuxi
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
32 1
雨溪-yuxi
|
2月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
雨溪-yuxi
39 1
vue学习第四章
雨溪-yuxi
|
2月前
|
JavaScript 前端开发 算法
vue学习第7章(循环）
欢迎来到瑞雨溪的博客，一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令，包括遍历数组和对象、使用key以及数组的响应式方法等内容，并附有综合练习实例。关注我，将持续更新更多优质文章！🎉🎉🎉
雨溪-yuxi
30 1
vue学习第7章(循环）
雨溪-yuxi
|
2月前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
34 1
vue学习第九章(v-model)

热门文章

最新文章

  • 1
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
  • 2
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
  • 3
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
  • 4
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
  • 5
    Vue3中使用provide/inject来避免v-model的循环引用
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
  • 7
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
  • 8
    vue3使用pinia中的actions，需要调用接口的话
  • 9
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 10
    Vue3解析markdown解析并实现代码高亮显示
  • 1
    使用Vue.js构建交互式前端的技术探索
    93
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    171
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    136
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    156
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    206
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    118
  • 7
    vue3中使用动态组件
    115
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    148
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    77
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    128

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月