在 Vue 3 中，ref 和 refs 是与响应式数据相关的概念，用于处理组件中的数据和 DOM 元素。
- ref:
ref 是一个函数，用于创建响应式对象。它接收一个参数，该参数可以是任意 JavaScript 数据类型，然后返回一个具有 value 属性的对象。这个对象是响应式的，当 value 属性发生变化时，与之相关的视图会被更新。
import { ref } from 'vue';
// 创建一个 ref
const myValue = ref('Hello');
// 获取 ref 的值
console.log(myValue.value); // 输出 'Hello'
// 修改 ref 的值
myValue.value = 'Vue 3 is awesome!';
- refs:
refs 是一个对象，用于存储组件中所有带有 ref 特性的 DOM 元素或子组件的引用。每个引用的名称对应于 ref 特性的值。
<template>
<div>
<!-- 使用 ref 指定引用名称 -->
<input ref="myInput" />
<button @click="focusInput">Focus Input</button>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
// 创建一个 ref 来存储 input 元素的引用
const myInput = ref(null);
// 在组件挂载后，聚焦 input 元素
onMounted(() => {
myInput.value.focus();
});
// 提供给模板的方法，用于聚焦 input 元素
const focusInput = () => {
myInput.value.focus();
};
return {
myInput,
focusInput
};
}
}
</script>
