Vue 3 中的 ref() 用法回顾
在 Vue 3 中，ref() 函数是 Composition API 的一部分，用于创建响应式引用。它允许您跟踪变量的变化，并在组件中以反应性的方式使用这些变量。
基本用法
要使用 ref()，您需要先从 Vue 包中导入它。然后，您可以使用 ref() 函数来创建一个响应式引用，并将其初始化为一个特定的值。
import { ref } from 'vue'; const count = ref(0);
在这个例子中，count 是一个响应式引用，它的初始值是 0。
访问和修改 ref 的值
要访问或修改 ref 的值，您需要使用 .value 属性。这是因为 ref() 实际上返回的是一个包含 value 属性的对象，而不是直接返回变量的值。
// 读取 ref 的值 console.log(count.value); // 输出: 0 // 修改 ref 的值 count.value = 1; console.log(count.value); // 输出: 1
在 Vue 模板中，您不需要显式地使用 .value，因为 Vue 会自动处理它：
<template> <div>{{ count }}</div> </template>
使用场景和注意事项
ref() 主要用于创建基本数据类型（如字符串、数字和布尔值）的响应式引用。但是，它也可以用于复杂数据类型，尽管在这种情况下，您可能需要考虑使用 reactive() 来创建响应式对象。
当使用 ref() 创建对象或数组的响应式引用时，请注意，Vue 不会使这些对象或数组的内部属性/元素自动成为响应式的。如果您需要创建响应式对象或数组，并且希望它们的属性/元素也是响应式的，您应该使用 reactive()。
与其他响应式 API 一起使用
ref() 可以与其他 Vue 3 响应式 API（如 computed 和 watch）一起使用，以创建计算属性或观察响应式数据的变化。
import { ref, computed, watch } from 'vue'; const count = ref(0); const doubleCount = computed(() => count.value * 2); watch(count, (newValue, oldValue) => { console.log(`count changed from ${oldValue} to ${newValue}`); });
在这个例子中，computed() 用于创建一个计算属性 doubleCount，它依赖于 count 的值。watch() 用于观察 count 的变化，并在控制台中记录这些变化。
希望这次的回答更符合您的要求，并且清晰地解释了 Vue 3 中 ref() 的用法。
ref来引用页面元素
在react hooks中，有一个保存引用值的方法useRef，其实跟vue3中的ref很像，难免让我感觉他们的用法也差不多，下面是在react中的写法：
const myswiper = useRef(null); <Swiper ref={myswiper}/>
小伙伴们是不是恍然大悟？是不是vue中也这么用？
在vue3中，在setup函数中使用ref来引用页面元素
- 封装一个抽屉组件。
<template> <a-drawer v-model:visible="visible" class="custom-class" style="color: red" title="Basic Drawer" placement="right" @after-visible-change="afterVisibleChange" > <p>Some contents...</p> <p>Some contents...</p> <p>Some contents...</p> </a-drawer> </template> <script> import {ref} from 'vue'; export default { name: "rightPanel", setup() { const visible = ref(false); const afterVisibleChange = (bool) => { console.log('visible', bool); }; const showDrawer = () => { visible.value = true; }; return { visible, afterVisibleChange, showDrawer, }; }, } </script> <style scoped> </style>
showDrawer这个方法用来展示这个抽屉。
- 在其他组件中通过ref的方式来调用上面注册的抽屉组件。
<template> <div style="position: relative" @click="openProcess"> <right-panel ref="rightDrawer"></right-panel> </template> <script> import kricon from "./KeyResultIdx.vue" import popState from "./popState.vue"; import {toRef, inject, ref, onMounted,} from 'vue' import rightPanel from "./rightPanel.vue"; export default { name: "okr-item", components: { rightPanel }, setup() { const rightDrawer = ref(null) function openProcess() { console.log(rightDrawer) rightDrawer.value.showDrawer() } return { openProcess, rightDrawer, } }, } </script>
其他方式
通过在setup中获取this的方式，其实是属于歪门邪道了。但是也提供了相应方式，在生产环境中可能会出现问题。
import { getCurrentInstance, } from vue const instance = getCurrentInstance() instance.proxy.$refs['vForm']
