Vue3 事件处理涉及到对 DOM 的操作，而获取 DOM 必须在 setup 中进行，该怎么办？

事件处理函数定义在setup()中，因为模板 ref 必须要在组件挂载之后才可以访问，而现在对于事件处理函数来说，span 这个变量的初始值是 null，所以 Vue 报错。

let span = ref(null)是官方文档获取节点的方式。起始值就是 null，且 ref 在组件挂载之后才可访问，因此，必须要在 onMounted 函数之后（包括 onMounted 函数）的生命周期函数中进行操作。

此时，Vue 就报无法找到对应的属性错误：

<script setup>
import { ref } from 'vue';

let span = ref(null);

function onclickButton() {
	span.value.style.color = 'red';
}
</script>

<template>
	<div class="demo">
		<span ref="span">Hello Vue!</span>
		<button @click="onclickButton">Click</button>
	</div>
</template>

事件处理函数不得不定义在onMounted函数里，只有这样按钮才可以绑定函数。解决方案：在setup()函数定义一个存储事件处理函数的对象：

<script>
// ......

let methods = {}

onMounted(() => {
	methods.onclickButton = () => {
		span.value.style.color = 'red';
	};
});
</script>

<template>
	<div class="demo">
		<span ref="span">Hello Vue!</span>
		<button @click="methods.onclickButton">Click</button>
	</div>
</template>

标签：事件处理,span,函数,DOM,setup,onMounted,null,ref
来源： https://www.cnblogs.com/shiramashiro/p/16546688.html