1. vue3中refs
在 Vue 3 中，ref 是一个用于创建响应式数据的函数。
它可以帮助你将一个普通的 JavaScript 值转换成响应式的，并且可以追踪这个值的变化。
使用 ref 创建的变量会有一个 .value 属性，通过这个属性你可以获取或修改实际的值。
下面是一些关于如何在 Vue 3 中使用 ref 的基本示例：
1.1. 创建和使用 ref
import { ref } from 'vue';
// 创建一个响应式的计数器
const count = ref(0);
// 修改值
count.value++;
// 访问值
console.log(count.value); // 输出: 11.2. 在组件中使用 ref
当你在 Vue 组件中使用 ref 时，可以在 setup 函数内定义并返回它，这样就可以在模板中访问到该变量了。
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return {
count,
increment
};
}
}
</script>1.3. 将 ref 与 DOM 元素关联
ref 还可以用来引用 DOM 元素或者子组件实例。
这种情况下，你需要在模板中的元素上绑定 ref 属性，并在 setup 函数中通过 onMounted 钩子来访问它们。
<template>
<div>
<input ref="inputRef" type="text">
<button @click="focusInput">Focus Input</button>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const inputRef = ref(null);
const focusInput = () => {
inputRef.value.focus();
};
onMounted(() => {
console.log(inputRef.value); // 打印出真实的 DOM 元素
});
return {
inputRef,
focusInput
};
}
}
</script>在这个例子中，inputRef 被用来存储 <input> 元素的引用。当点击按钮时，focusInput 方法会被调用，使输入框获得焦点。
记住，对于复杂的对象，你可能需要使用 reactive 来代替 ref，因为 reactive 可以直接处理整个对象的响应性，而不需要通过 .value 属性来访问其属性。
不过，对于简单类型（如字符串、数字等），推荐使用 ref。
