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

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

2024-08-20 65
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【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
肥晨
目录
相关文章
CamilleKing
|
18天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能，解决了Vue 2中响应式系统的一些局限性，同时在性能方面也有一定的提升，为开发者提供了更好的开发体验和性能保障。
CamilleKing
43 7
CamilleKing
|
18天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
36 1
CamilleKing
|
18天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
39 1
我是快乐的嘟嘟
|
9天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
83 26
html的七十二变
|
9天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
29 8
html的七十二变
|
9天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
24 7
html的七十二变
|
9天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
28 5
游客ady5kpv352g3u
|
8天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
19 3
html的七十二变
|
10天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
27 5
游客ady5kpv352g3u
|
8天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
16 2