Vue3 组合式 API 中获取 DOM 节点的问题

模板引用

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中定义的函数无法被按钮绑定。

解决方案：

1. 在setup中定义对象 methods（或者其他你喜欢的变量名）；
2. 在onMounted函数中这样使用：

const demo = ref(null);
const methods = {};

onMounted(() => {
  methods.onclickButton = () => {
    demo.value.style.fontSize = "20px";
  }
});