Vue.js 3 中的 ref 和 reactive——揭秘它们的奥秘

2024-02-16 06:08:25

Vue.js 3 中的 ref 和 reactive：揭秘幕后魔法

前言

踏入 Vue.js 3 的精彩世界，我们将在本次探险中揭开 ref 和 reactive 这两个核心语法特性的神秘面纱。这些强大的工具在响应式数据、计算属性和组件通信中扮演着至关重要的角色，掌握它们将为你打开交互式应用程序开发的新天地。

ref：直达 DOM 元素的捷径

ref 是一个神器般的指令，让你能够直接从 Vue 实例中访问 DOM 元素。它在需要与 DOM 元素进行交互时大显身手。无论是获取表单值、控制元素可见性还是施展动画魔法，ref 都能轻松驾驭。

例如，我们使用 ref 获取一个 input 元素，然后就能在控制台中输出它的值：

<input ref="nameInput" type="text" placeholder="请输入姓名">

console.log(this.$refs.nameInput); // 输出: <input type="text" placeholder="请输入姓名">

reactive：让数据动起来

reactive 则是一个令人着迷的语法，它能将普通的 JavaScript 对象变成响应式对象。这意味着，对响应式对象的任何修改，Vue 都会自动更新视图。这为数据绑定提供了极大的便利，让你的应用程序充满动态性和交互性。

例如，我们将一个 person 对象转换为响应式对象：

const person = reactive({
  name: 'John Doe',
  age: 30
});

// 修改 person 对象时，视图也会自动更新
person.name = 'Jane Doe';
person.age = 31;

ref 和 reactive 的珠联璧合

当我们把 ref 和 reactive 结合起来时，它们就形成了一种强大的协同力量。我们使用 ref 获取 DOM 元素，再使用 reactive 监听它的属性变化。这样一来，实现交互式功能就变得无比方便。

例如，我们监听一个 input 元素的 value 变化：

<input ref="nameInput" type="text" placeholder="请输入姓名" @input="onNameInput">

// 获取 DOM 元素
const nameInput = this.$refs.nameInput;

// 将 DOM 元素的 value 属性转换为响应式对象
const name = reactive({
  value: nameInput.value
});

// 监听 name.value 的变化
name.value.watch((newValue, oldValue) => {
  // 当 name.value 发生变化时，更新视图
  console.log(`姓名已从 ${oldValue} 改为 ${newValue}`);
});