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

文章目录

• • [一. `ref`](#一. ref)
  • • 基本用法
    • 在模板中使用
    • [`ref` 与 `reactive` 的区别](#ref 与 reactive 的区别)
    • 使用场景
  • [二. `reactive`](#二. reactive)
  • • 基本用法
    • 在模板中使用
    • [`reactive` 与 `ref` 的区别](#reactive 与 ref 的区别)
    • 使用场景
    • 性能优化
  • [三. `toRef`](#三. toRef)
  • • 基本用法
    • 示例
    • 在组件中的应用
    • 主要用途
    • [对比 `ref` 和 `toRef`](#对比 ref 和 toRef)
  • [四. `toRefs`](#四. toRefs)
  • • 基本用法
    • 示例
    • 在组件中的应用
    • 主要用途
    • [对比 `ref` 和 `toRefs`](#对比 ref 和 toRefs)
  • 总结

---

在 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 的响应式系统中互相配合使用，可以帮助你更灵活地管理和使用响应式数据。

您好，我是肥晨。

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