Vue 中的 ref 与 reactive：让你的应用更具响应性（上）
前端开发工程师（主业）、技术博主（副业）、已过CET6
阿珊和她的猫_CSDN个人主页
牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
文章目录
- 一、引言
-
- 介绍 ref 与 reactive 的背景和重要性
- 二、 ref 的基本概念
-
- 解释 ref 的定义和作用
- 展示如何创建和使用 ref
- 讨论 ref 的一些常见用例
- 三、 reactive 的基本概念
-
- 解释 reactive 的定义和作用
- 展示如何创建和使用 reactive 对象
- 讨论 reactive 的一些常见用例
一、引言
介绍 ref 与 reactive 的背景和重要性
ref 和 reactive 是 Vue 3 中引入的新特性，它们的背景和重要性如下：
ref的背景和重要性：
- 在 Vue 2 中，通过使用
v-bind和v-on等指令来实现数据的双向绑定。但是，在某些情况下，需要直接操作 DOM 元素或组件实例，这时候就需要使用ref属性。 ref允许你通过引用的方式访问 DOM 元素或组件实例，从而方便地进行直接操作。在 Vue 3 中，ref有了一些改进，它现在可以引用任何类型的值，包括组件实例、函数、对象等。
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 的作用有以下几个方面：
- 获取 DOM 元素：通过
ref，你可以获取对应的 DOM 元素，并进行直接操作，如修改元素的属性、调用元素的方法等。 - 引用组件实例：除了 DOM 元素，你还可以使用
ref来引用组件实例，从而直接访问和操作组件的属性和方法。 - 传递引用：通过将
ref传递给其他组件或函数，你可以在其他地方访问和操作对应的 DOM 元素或组件实例。
需要注意的是，使用 ref 时要遵循一些最佳实践，如避免在多个地方使用同一个 ref 来引用同一个元素或组件实例，以免引发意外行为。此外，在组件中使用 ref 时，要确保组件的生命周期方法（如 created、mounted 等）已经执行完毕，以确保引用的元素或组件实例已经准备好。
展示如何创建和使用 ref
在 Vue 3 中，创建和使用 ref 的方法与 Vue 2 类似，但有一些细微的差别。下面是一个简单的示例，展示了如何在 Vue 3 中创建和使用 ref。
- 首先，在 Vue 3 中，你需要使用
defineComponent方法来定义一个组件，例如：
import { defineComponent } from 'vue';
export default defineComponent({
name: 'MyComponent',
setup() {
// 在这里编写组件的逻辑
},
});
- 接下来，你可以使用
ref方法来创建一个引用，例如：
import { ref } from 'vue';
export default defineComponent({
name: 'MyComponent',
setup() {
const count = ref(0);
// 你可以使用这个引用，例如：
return {
count,
};
},
});
在这个示例中，我们创建了一个名为 count 的引用，并将其初始值设置为 0。然后，我们将这个引用返回给组件，以便在模板中使用它。
- 在模板中，你可以使用
v-bind指令将引用绑定到 DOM 元素，例如：
<template>
<div>
<p>Count: {{ count }}p>
<button v-bind="count">Incrementbutton>
div>
template>
在这个示例中，我们将 count 引用绑定到 元素和一个按钮上。当用户点击按钮时，count 的值会增加。
- 最后，你可以使用
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 元素或组件实例。以下是一些常见的用例：
- 获取 DOM 元素：通过使用
ref，你可以获取到特定的 DOM 元素，并直接操作它的属性、方法或监听其事件。这对于执行一些与 DOM 相关的操作非常方便。例如：
// 创建一个 ref 来引用元素
const myElement = ref(null);
// 在模板中使用 ref
<template>
<div ref="myElement"></div>
</template>
// 获取引用的 DOM 元素
const element = myElement.value;
- 引用组件实例：除了引用 DOM 元素，你还可以使用
ref来引用组件实例。这使得你能够直接访问和操作组件的属性和方法。例如：
// 创建一个 ref 来引用组件实例
const myComponent = ref(null);
// 在模板中使用 ref
<template>
<MyComponent ref="myComponent"></MyComponent>
</template>
// 获取引用的组件实例
const component = myComponent.value;
- 传递引用：通过将
ref传递给其他组件或函数，你可以在不同的地方共享对同一个 DOM 元素或组件实例的引用。这有助于在组件之间进行通信和协同工作。例如：
// 创建一个 ref
const myElement = ref(null);
// 将 ref 传递给子组件
<ChildComponent :element="myElement" />
// 在子组件中使用传递的 ref
const { element } = props;
- 处理生命周期事件：你可以使用
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 对象。
- 首先，在 Vue 3 中，你需要使用
defineComponent方法来定义一个组件，例如：
import { defineComponent } from 'vue';
export default defineComponent({
name: 'MyComponent',
setup() {
// 在这里编写组件的逻辑
},
});
- 接下来，你可以使用
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!' }。然后，我们将这个对象返回给组件，以便在模板中使用它。
- 在模板中，你可以使用
v-bind指令将响应式对象绑定到 DOM 元素，例如：
<template>
<div>
<p>Count: {{ state.count }}p>
<p>Message: {{ state.message }}p>
<button v-bind="state">Incrementbutton>
div>
template>
在这个示例中，我们将 state 对象绑定到 元素和一个按钮上。当用户点击按钮时，state 对象的 count 属性会增加，而 message 属性不会改变。
- 最后，你可以使用
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 中是一个非常重要的特性，它提供了一种创建响应式数据的简洁方式。以下是一些常见的用例：
- 创建响应式对象：使用
reactive可以将一个普通对象转换为响应式对象。当响应式对象的属性发生变化时，相关的组件会自动更新。这对于处理复杂的数据结构非常有用。例如：
// 创建一个响应式对象
const myObject = reactive({ data: 123 });
// 修改对象的属性
myObject.data += 1;
console.log(myObject.data);
- 创建响应式数组：
reactive也可以用于创建响应式数组。响应式数组的元素变更时，相关的组件也会自动更新。例如：
// 创建一个响应式数组
const myArray = reactive([1, 2, 3]);
// 修改数组的元素
myArray.push(4);
console.log(myArray);
- 与 Computed 属性结合使用：通过将
reactive对象与计算属性（Computed Properties）结合使用，可以创建基于响应式数据的动态计算。例如：
// 创建一个响应式对象
const myObject = reactive({ data: 123 });
// 创建一个计算属性
const computedData = computed(() => myObject.data * 2);
console.log(computedData);
- 在组件之间传递响应式数据：通过使用
reactive创建响应式数据，可以在组件之间传递数据，并且当数据发生变化时，相关的组件会自动更新。这有助于保持组件之间的数据一致性。例如：
// 创建一个响应式对象
const myObject = reactive({ data: 123 });
// 在子组件中使用响应式数据
<ChildComponent :data="myObject.data" />
总之，reactive 提供了一种简单而高效的方式来创建响应式数据，使你的 Vue 应用更加动态和灵活。