vue3 怎么用ref

在Vue3中，你可以使用`ref`函数来创建一个响应式的引用。你可以将`ref`函数应用于任何值，包括DOM元素。在`setup`函数中，你可以声明一个`ref`变量，并将其赋值为`ref(null)`来创建一个初始值为`null`的引用。然后，你可以将这个引用赋给模板中的元素的`ref`属性，以便在后续的代码中获取到这个元素。在`onMounted`生命周期方法中，你可以通过访问`ref`变量的`value`属性来获取到这个元素。例如：

import { ref, onMounted } from "vue";

export default {
  setup() {
    const box = ref(null);

    onMounted(() => {
      console.log(box.value);
    });

    return {
      box
    };
  }
};

这样，你就可以在`setup`函数中通过`box.value`来获取到模板中的元素了。请注意，在Vue3中，不再需要使用`$refs`来访问元素，而是直接通过`ref`变量的`value`属性来获取元素。
#### 引用[.reference_title]
- *1* [vue3 ref函数用法](https://blog.csdn.net/wuxing164/article/details/109800885)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue3 ref 理解与用法](https://blog.csdn.net/sinat_37792529/article/details/124375393)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue------vue3中ref函数的使用(ref获取元素undefined)](https://blog.csdn.net/COCOLI_BK/article/details/125478733)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]