模板引用
Vue 提供了许多指令让我们可以直接操作组件的模板。但是在某些情况下，我们仍然需要访问底层 DOM 元素。在模板中添加一个特殊的属性ref就可以得到该元素。
访问模板引用
<script setup>
import { ref } from 'vue';
const demo = ref(null);
onMounted(() => {
demo.value.style.width = '20px';
});
</script>
<template>
<div>
<span ref="demo">Hello Vue!</span>
</div>
</template>
访问模板引用的时机
访问的顺序上有讲究。因为ref本身是作为渲染函数的结果来创建的，必须等待组件挂载后才能对它进行访问。如果不再挂载之后进行访问，百分之九十九（还有百分之一是意外）都是 null 或 undefined 错误。看下图：
因此，在组合式 API 中获取了 ref 之后，最好在 onMounted 函数中进行后续的操作。把第四行代码const demo = ref(null)放到 onMounted 里进行，或者其他生命周期函数里都是不行的，必须要在 setup 里进行。（本人已经测试过了）
事件函数访问模板引用
这里的实际应用时的问题：模板中添加一个按钮，按钮绑定函数onclickButton，函数里访问模板引用，此时出现模板引用 null 和 undefined。正如上面所述，ref 要在组件挂载完成之后才可以访问，setup函数在组件挂载之前，因此事件函数定义在 setup 里就出现 null 或 undefined 错误。
并且，事件函数也许只能定义在 setup 里，按钮才可以绑定该函数。这是我测试过的，在onMounted中定义的函数无法被按钮绑定。
解决方案：
- 在
setup中定义对象 methods（或者其他你喜欢的变量名）；在
onMounted函数中这样使用：const demo = ref(null);
const methods = {};
onMounted(() => {
methods.onclickButton = () => {
demo.value.style.fontSize = "20px";
}
});
