Vue3中的ref和reactive：揭开响应式机制的神秘面纱

2023-03-15 23:42:48

Vue3 响应式利器：深入解析 Ref 和 Reactive

在构建交互式、动态变化的 Web 前端页面时，响应式数据处理至关重要。Vue3 闪亮登场，带来了两个强大的响应式特性：Ref 和 Reactive 。

揭秘 Ref：便捷访问和修改数据

Ref 本质上是对 DOM 元素或组件实例的引用。它允许我们在模板中直接访问和修改这些元素或实例。例如，我们可以使用 Ref 来获取表单输入框的值，当用户输入时，数据会自动更新，无需手动触发事件。

示例代码：

<template>
  <input ref="inputRef" v-model="formData.name">
</template>

<script>
export default {
  methods: {
    updateName() {
      // 使用 Ref 获取输入框的值
      const name = this.$refs.inputRef.value;

      // 更新数据
      this.formData.name = name;
    },
  },
};
</script>

揭秘 Reactive：深度响应式数据对象

Reactive 更为强大，它可以将一个普通 JavaScript 对象转换为一个响应式对象。这意味着对象的任何属性的更改都会自动触发界面的更新。此外，这个响应式对象可以嵌套其他响应式对象，形成复杂的数据结构。

示例代码：

<template>
  <div v-for="item in reactiveList">
    <p>{{ item.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reactiveList: reactive([
        { name: 'Item 1' },
        { name: 'Item 2' },
      ]),
    };
  },
};
</script>

Ref vs Reactive：异同对比

尽管 Ref 和 Reactive 都是实现响应式的工具，但它们之间存在一些关键差异：

特性	Ref	Reactive
作用范围	DOM 元素或组件实例	任何 JavaScript 对象
数据类型	引用	响应式对象
更新机制	直接修改	触发组件重新渲染

Ref 和 Reactive 的应用场景

Ref 常用于需要直接操作 DOM 元素或组件实例的情况，例如获取表单输入值或控制组件的可见性。Reactive 适用于需要管理和更新复杂数据结构的情况，例如跟踪应用程序状态或处理嵌套数据。

Ref 和 Reactive 的实战演练

考虑以下示例：

我们有一个表单，用户可以在其中输入名称。我们需要在用户输入时更新一个响应式对象。

Ref 的用法：

<template>
  <input ref="nameInput" type="text">
</template>

<script>
export default {
  data() {
    return {
      formData: { name: '' },
    };
  },
  methods: {
    updateName() {
      // 获取输入值
      const name = this.$refs.nameInput.value;

      // 更新数据
      this.formData.name = name;
    },
  },
};
</script>

Reactive 的用法：

<template>
  <input v-model="formData.name" type="text">
</template>

<script>
export default {
  data() {
    return {
      formData: reactive({ name: '' }),
    };
  },
};
</script>