在 Vue 3 中,ref
的概念变得更加灵活,因为它不再仅限于模板中的 DOM 元素或组件引用。Vue 3 引入了 Composition API,其中包括一个名为 ref
的函数,它允许你在 JavaScript 中创建响应式引用。
以下是 Vue 3 中 ref
的两种主要用途:
- 模板中的
ref
属性
与 Vue 2 类似,Vue 3 中的模板仍然可以使用 ref
属性来注册对 DOM 元素或子组件的引用。不过,在 Vue 3 的组合式 API 中,你可能更多地会使用 setup()
函数中的 ref
函数来创建响应式数据,并在模板中使用这些数据。
在模板中设置 ref
的示例:
<template>
<div>
<input ref="inputRef" type="text" />
<button @click="focusInput">Focus Input</button>
</div>
</template>
<script>
export default {
mounted() {
// 访问 DOM 元素
this.$refs.inputRef.focus();
},
methods: {
focusInput() {
this.$refs.inputRef.focus();
}
}
};
</script>
注意,在 Vue 3 的组合式 API 中,你通常会使用 setup()
函数和 ref
函数来创建响应式数据,而不是直接在 data
函数中定义。
- Composition API 中的
ref
函数
在 Vue 3 的 Composition API 中,ref
是一个函数,用于创建一个响应式引用。这个引用包含一个值,并且当这个值改变时,视图会自动更新。
使用 ref
在 setup()
函数中的示例:
<template>
<div>
<input v-model="count.value" type="number" />
<p>Count: {{ count.value }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
// 你可以在这里定义其他逻辑,例如方法、计算属性等
return {
count // 暴露给模板
};
}
};
</script>
在这个示例中,count
是一个响应式引用,它包含一个初始值为 0 的值。你可以通过 count.value
来访问或修改这个值,并且当这个值改变时,视图会自动更新。
总结来说,Vue 3 中的 ref
可以用于模板中以注册对 DOM 元素或子组件的引用,也可以用于 Composition API 中以创建响应式引用。这两种用法在 Vue 3 中都是非常重要的。