vue3 stup 语法糖 获取元素宽度

在 Vue 3 中，可以使用 `ref` 创建一个响应式的引用对象，然后通过 `value` 属性访问该对象的值。可以使用 `setup` 函数来创建引用对象，并通过 `onMounted` 钩子函数在组件挂载后获取元素宽度。

下面是一个示例代码：

<template>
  <div ref="myDiv">Hello, world!</div>
</template>

<script>
import { ref, onMounted } from 'vue';

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

    onMounted(() => {
      const width = myDiv.value.offsetWidth;
      console.log(`The width of myDiv is ${width}px.`);
    });

    return {
      myDiv,
    };
  },
};
</script>

在上面的代码中，我们创建了一个名为 `myDiv` 的引用对象，并将其绑定到 `div` 元素的 `ref` 属性上。在 `onMounted` 钩子函数中，我们通过 `myDiv.value.offsetWidth` 获取了 `div` 元素的宽度，并将其输出到控制台。

注意：在 Vue 3 中，需要从 `vue` 模块中导入 `ref` 和 `onMounted`。