vue3的ref指令有哪些用途vue3的ref指令有哪些用途在 Vue 3 中，ref 是一个非常重要的指令和 API

vue3的ref指令有哪些用途

在 Vue 3 中，ref 是一个非常重要的指令和 API，它既可以用于模板中的 DOM 引用，也可以用于创建响应式数据。以下是 ref 的主要用途和详细说明：

ref 指令：获取 DOM 元素的引用

在 Vue 3 的模板中，ref 指令用于获取 DOM 元素或组件实例的引用。通过 ref，可以直接访问 DOM 元素或组件实例，从而操作 DOM 或调用组件方法。

获取 DOM 元素的引用

<template>
  <div>
    <input ref="inputRef" type="text" />
    <button @click="focusInput">聚焦输入框</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const inputRef = ref(null); // 创建一个 ref 来存储 DOM 元素

function focusInput() {
  inputRef.value.focus(); // 访问 DOM 元素并调用其方法
}
</script>

获取组件实例的引用

<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const childRef = ref(null); // 创建一个 ref 来存储组件实例

function callChildMethod() {
  childRef.value.someMethod(); // 访问组件实例并调用其方法
}
</script>

ref API：创建响应式数据

在 Vue 3 的 Composition API 中，ref 是一个函数，用于创建一个响应式的数据。ref 通常用于包装基本类型的值（如 string、number、boolean），但也可以用于包装对象或数组。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0); // 创建一个响应式的 count

function increment() {
  count.value++; // 修改 ref 的值
}
</script>

特点：

访问值：

通过 .value 访问 ref 的值。
在模板中，Vue 会自动解包 ref，因此可以直接使用 count 而不是 count.value。

响应式更新：

当 ref 的值发生变化时，视图会自动更新。

包装对象或数组：

虽然 ref 通常用于基本类型，但它也可以用于包装对象或数组。
如果需要深度响应式，可以使用 reactive。

ref 的高级用法

结合 v-for 使用

在 v-for 中，可以使用 ref 来获取列表中的每个元素的引用。

<template>
  <div>
    <div v-for="item in items" :key="item.id" ref="itemRefs">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
]);

const itemRefs = ref([]); // 存储多个 DOM 元素的引用

onMounted(() => {
  console.log(itemRefs.value); // 访问所有 DOM 元素
});
</script>

结合 watch 监听 ref 的变化

可以使用 watch 监听 ref 的变化。

<script setup>
import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变为 ${newVal}`);
});
</script>

结合 computed 创建计算属性

可以使用 computed 基于 ref 创建计算属性。

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);
</script>

总结

ref 指令：用于获取 DOM 元素或组件实例的引用。
ref API：用于创建响应式数据，通常用于包装基本类型的值。
ref 与 reactive：ref 更适合包装单个值，reactive 更适合处理复杂对象。
高级用法：结合 v-for、watch、computed 等使用，可以实现更复杂的逻辑。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github