Vue 中的 ref 与 reactive：让你的应用更具响应性（上）

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

一、引言

介绍 ref 与 reactive 的背景和重要性

ref 和 reactive 是 Vue 3 中引入的新特性，它们的背景和重要性如下：

1. ref 的背景和重要性：

• 在 Vue 2 中，通过使用 v-bind 和 v-on 等指令来实现数据的双向绑定。但是，在某些情况下，需要直接操作 DOM 元素或组件实例，这时候就需要使用 ref 属性。
• ref 允许你通过引用的方式访问 DOM 元素或组件实例，从而方便地进行直接操作。在 Vue 3 中，ref 有了一些改进，它现在可以引用任何类型的值，包括组件实例、函数、对象等。

2. reactive 的背景和重要性：

• 在 Vue 2 中，响应式系统是基于对象的属性监听实现的。当一个对象的属性发生变化时，Vue 会自动触发更新。
• 然而，在某些情况下，需要对一个基本数据类型的值进行响应式处理，这时候就需要使用 reactive 方法。
• reactive 方法可以将一个基本数据类型的值转换为响应式对象，从而使其能够参与到 Vue 的响应式系统中。

总的来说，ref 和 reactive 都是 Vue 3 中重要的新特性，它们提供了更强大和灵活的方式来处理 DOM 元素和数据，从而提高了开发效率和代码质量。

二、 ref 的基本概念

解释 ref 的定义和作用

在 Vue 3 中，ref 用于引用 DOM 元素或组件实例。它允许你通过引用的方式直接访问和操作 DOM 元素或组件实例。

ref 的定义如下：

const ref = Vue.createRef()

或

const ref = useRef()

其中，Vue.createRef() 是 Vue 实例方法，用于创建一个引用对象；useRef() 是Composition API 中的一个函数，也用于创建引用对象。

ref 的作用有以下几个方面：

1. 获取 DOM 元素：通过 ref，你可以获取对应的 DOM 元素，并进行直接操作，如修改元素的属性、调用元素的方法等。
2. 引用组件实例：除了 DOM 元素，你还可以使用 ref 来引用组件实例，从而直接访问和操作组件的属性和方法。
3. 传递引用：通过将 ref 传递给其他组件或函数，你可以在其他地方访问和操作对应的 DOM 元素或组件实例。

需要注意的是，使用 ref 时要遵循一些最佳实践，如避免在多个地方使用同一个 ref 来引用同一个元素或组件实例，以免引发意外行为。此外，在组件中使用 ref 时，要确保组件的生命周期方法（如 created、mounted 等）已经执行完毕，以确保引用的元素或组件实例已经准备好。

展示如何创建和使用 ref

在 Vue 3 中，创建和使用 ref 的方法与 Vue 2 类似，但有一些细微的差别。下面是一个简单的示例，展示了如何在 Vue 3 中创建和使用 ref。

1. 首先，在 Vue 3 中，你需要使用 defineComponent 方法来定义一个组件，例如：

import { defineComponent } from 'vue';

export default defineComponent({
 name: 'MyComponent',
 setup() {
   // 在这里编写组件的逻辑
 },
});

2. 接下来，你可以使用 ref 方法来创建一个引用，例如：

import { ref } from 'vue';

export default defineComponent({
 name: 'MyComponent',
 setup() {
   const count = ref(0);

   // 你可以使用这个引用，例如：
   return {
     count,
   };
 },
});

在这个示例中，我们创建了一个名为 count 的引用，并将其初始值设置为 0。然后，我们将这个引用返回给组件，以便在模板中使用它。

3. 在模板中，你可以使用 v-bind 指令将引用绑定到 DOM 元素，例如：

<template>
 <div>
   <p>Count: {{ count }}</p>
   <button v-bind="count">Increment</button>
 </div>
</template>

在这个示例中，我们将 count 引用绑定到 <p> 元素和一个按钮上。当用户点击按钮时，count 的值会增加。

4. 最后，你可以使用 ref 引用来操作组件或元素的属性，例如：

import { ref } from 'vue';

export default defineComponent({
 name: 'MyComponent',
 setup() {
   const count = ref(0);

   function increment() {
     count.value++;
   }

   return {
     count,
     increment,
   };
 },
});

在这个示例中，我们定义了一个名为 increment 的函数，用于增加 count 的值。然后，我们将这个函数返回给组件，以便在模板中使用它。

总的来说，在 Vue 3 中使用 ref 方法非常简单，你可以使用它来获取对组件或元素的引用，操作组件或元素，并避免直接修改属性。

讨论 ref 的一些常见用例

ref 在 Vue 3 中是一个非常有用的特性，它提供了一种方便的方式来引用 DOM 元素或组件实例。以下是一些常见的用例：

1. 获取 DOM 元素：通过使用 ref，你可以获取到特定的 DOM 元素，并直接操作它的属性、方法或监听其事件。这对于执行一些与 DOM 相关的操作非常方便。例如：

// 创建一个 ref 来引用元素
const myElement = ref(null);

// 在模板中使用 ref
<template>
  <div ref="myElement"></div>
</template>

// 获取引用的 DOM 元素
const element = myElement.value;

2. 引用组件实例：除了引用 DOM 元素，你还可以使用 ref 来引用组件实例。这使得你能够直接访问和操作组件的属性和方法。例如：

// 创建一个 ref 来引用组件实例
const myComponent = ref(null);

// 在模板中使用 ref
<template>
  <MyComponent ref="myComponent"></MyComponent>
</template>

// 获取引用的组件实例
const component = myComponent.value;

3. 传递引用：通过将 ref 传递给其他组件或函数，你可以在不同的地方共享对同一个 DOM 元素或组件实例的引用。这有助于在组件之间进行通信和协同工作。例如：

// 创建一个 ref
const myElement = ref(null);

// 将 ref 传递给子组件
<ChildComponent :element="myElement" />

// 在子组件中使用传递的 ref
const { element } = props;

4. 处理生命周期事件：你可以使用 ref 来监听 DOM 元素或组件实例的生命周期事件。通过在 ref 的回调函数中处理这些事件，可以在特定的生命周期阶段执行相应的操作。例如：

// 创建一个 ref 来引用元素
const myElement = ref(null);

// 监听 ref 对应的元素的 click 事件
myElement.value.addEventListener('click', handleClickEvent);

// 处理点击事件的函数
function handleClickEvent() {
  console.log('点击事件触发');
}

总之，ref 提供了一种方便的方式来引用和操作 DOM 元素、组件实例，并在组件之间传递引用。它在一些常见的场景中非常有用，例如与 DOM 交互、处理组件通信和监听生命周期事件等。

三、 reactive 的基本概念

解释 reactive 的定义和作用

在 Vue 3 中，reactive 是一个用于创建响应式数据的函数。它将一个普通的对象转换为响应式对象，使其能够与 Vue 的响应式系统进行集成。

reactive 的定义如下：

import { reactive } from 'vue'
const myObject = reactive({ data: 123 })

reactive 的作用是使对象的属性具有响应性。当你修改响应式对象的属性时，Vue 会自动检测到变化，并触发相应的更新。这使得在 Vue 组件中使用响应式数据变得更加方便和高效。

通过使用 reactive 创建响应式对象，你可以将复杂的数据结构（如对象、数组等）与 Vue 的模板进行双向绑定，实现数据的实时更新和视图的自动渲染。

需要注意的是，reactive 只对对象的属性修改进行响应，而不对对象的整体替换进行响应。如果你需要对整个对象进行替换，可以使用 Vue.set 或 vm.$set 方法。

展示如何创建和使用 reactive 对象

在 Vue 3 中，你可以使用 reactive 方法来创建一个响应式对象，以便在组件或元素中使用。下面是一个简单的示例，展示了如何在 Vue 3 中创建和使用 reactive 对象。

1. 首先，在 Vue 3 中，你需要使用 defineComponent 方法来定义一个组件，例如：

import { defineComponent } from 'vue';

export default defineComponent({
name: 'MyComponent',
setup() {
  // 在这里编写组件的逻辑
},
});

2. 接下来，你可以使用 reactive 方法来创建一个响应式对象，例如：

import { reactive } from 'vue';

export default defineComponent({
name: 'MyComponent',
setup() {
  const state = reactive({
    count: 0,
    message: 'Hello, Vue 3!',
  });

  // 你可以使用这个对象，例如：
  return {
    state,
  };
},
});

在这个示例中，我们使用 reactive 方法创建了一个名为 state 的响应式对象，并将其初始值设置为 { count: 0, message: 'Hello, Vue 3!' }。然后，我们将这个对象返回给组件，以便在模板中使用它。

3. 在模板中，你可以使用 v-bind 指令将响应式对象绑定到 DOM 元素，例如：

<template>
<div>
  <p>Count: {{ state.count }}</p>
  <p>Message: {{ state.message }}</p>
  <button v-bind="state">Increment</button>
</div>
</template>

在这个示例中，我们将 state 对象绑定到 <p> 元素和一个按钮上。当用户点击按钮时，state 对象的 count 属性会增加，而 message 属性不会改变。

4. 最后，你可以使用 reactive 对象的属性来操作对象，例如：

import { reactive } from 'vue';

export default defineComponent({
name: 'MyComponent',
setup() {
  const state = reactive({
    count: 0,
    message: 'Hello, Vue 3!',
  });

  function increment() {
    state.count++;
  }

  return {
    state,
    increment,
  };
},
});

在这个示例中，我们定义了一个名为 increment 的函数，用于增加 state 对象的 count 属性。然后，我们将这个函数返回给组件，以便在模板中使用它。

总的来说，在 Vue 3 中使用 reactive 方法非常简单，你可以使用它来创建一个响应式对象，以便在组件或元素中使用。

讨论 reactive 的一些常见用例

reactive 在 Vue 3 中是一个非常重要的特性，它提供了一种创建响应式数据的简洁方式。以下是一些常见的用例：

1. 创建响应式对象：使用 reactive 可以将一个普通对象转换为响应式对象。当响应式对象的属性发生变化时，相关的组件会自动更新。这对于处理复杂的数据结构非常有用。例如：

// 创建一个响应式对象
const myObject = reactive({ data: 123 });

// 修改对象的属性
myObject.data += 1;

console.log(myObject.data); 

2. 创建响应式数组：reactive 也可以用于创建响应式数组。响应式数组的元素变更时，相关的组件也会自动更新。例如：

// 创建一个响应式数组
const myArray = reactive([1, 2, 3]);

// 修改数组的元素
myArray.push(4);

console.log(myArray); 

3. 与 Computed 属性结合使用：通过将 reactive 对象与计算属性（Computed Properties）结合使用，可以创建基于响应式数据的动态计算。例如：

// 创建一个响应式对象
const myObject = reactive({ data: 123 });

// 创建一个计算属性
const computedData = computed(() => myObject.data * 2);

console.log(computedData); 

4. 在组件之间传递响应式数据：通过使用 reactive 创建响应式数据，可以在组件之间传递数据，并且当数据发生变化时，相关的组件会自动更新。这有助于保持组件之间的数据一致性。例如：

// 创建一个响应式对象
const myObject = reactive({ data: 123 });

// 在子组件中使用响应式数据
<ChildComponent :data="myObject.data" />

总之，reactive 提供了一种简单而高效的方式来创建响应式数据，使你的 Vue 应用更加动态和灵活。