vue3通过ref获取盒子

在 Vue 3 中，`ref` 是一种响应式的数据绑定组件，它可以用来存储和管理组件的可变数据。如果你想通过 `ref` 获取一个 DOM 元素（如一个盒子），你可以这样做：

1. 首先，在模板中声明一个 `ref`，例如一个用于存储元素的变量：

<template>
  <div ref="myBoxRef">
    这是一个动态的盒子
  </div>
</template>

这里的 `myBoxRef` 就是一个 `ref`，它会关联到 `<div>` 元素。

2. 在你的 Vue 实例的 `setup` 函数或组件的方法里，你可以访问这个 `ref` 并获取对应的 DOM 元素：

import { ref } from 'vue';

export default {
  setup() {
    const myBoxRef = ref(null); // 或者直接写成 const myBoxRef = ref(document.querySelector('#myDiv')) 如果已有 id

    // 使用
    function handleButtonClick() {
      const boxElement = myBoxRef.value; // .value 是为了获取当前引用的对象
      console.log(boxElement);
    }

    return {
      handleButtonClick,
    };
  },
};

当你点击按钮并调用 `handleButtonClick` 时，它会打印出关联的 `<div>` 元素。如果 `myBoxRef` 是 `null`，说明元素还没有加载完成，可以在 `onMounted` 生命周期钩子里初始化。