Vue中的Ref和Reactive：你必须知道的变量处理神器

前端

2023-12-11 03:19:29

Vue 中的 Ref 和 Reactive：管理组件数据

简介

在 Vue 中，Ref 和 Reactive 是两大重要工具，用于管理和更新组件数据。它们各有独特的用途和场景，让我们深入探讨它们之间的区别以及各自的最佳实践。

Ref：引用 DOM 元素和组件实例

Ref 是一个特殊的内置对象，允许我们在组件中使用 ref 属性来引用 DOM 元素或组件实例。这在以下情况下非常有用：

引用 DOM 元素： 使用 ref 引用 DOM 元素，使我们能够在组件中使用 this.$refs.元素ID 访问该元素。这对于需要直接操作 DOM 元素的情况很有帮助，比如：
- 动态添加样式
- 获取元素尺寸或位置
- 触发 DOM 事件
引用组件实例： 同样，我们可以使用 ref 引用组件实例。这在组件之间需要通信时非常方便，比如：
- 父组件调用子组件方法
- 子组件向父组件传递数据

代码示例

<template>
  <input ref="input" />
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.input); // 输出：<input>
  }
};
</script>

Reactive：管理复杂数据

Reactive 是一个函数，可以将一个普通对象或数组转换为一个响应式对象。这意味着当对象或数组中的数据发生变化时，Vue 会自动更新视图。Reactive 适用于管理复杂数据，例如：

表单数据： 表单数据通常包含多个字段和验证规则，使用 Reactive 可以轻松跟踪和更新数据。
分页数据： 分页数据包含当前页码、总页数等信息，Reactive 可以帮助我们在页面之间切换时更新视图。
图表数据： 图表数据通常是动态变化的，Reactive 可以确保图表随着数据变化而实时更新。

代码示例

<template>
  <ul>
    <li v-for="item in formData" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const formData = reactive([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]);

    return {
      formData
    };
  }
};
</script>