Vue 中 {{ }} 插值内无法直接使用 $event.target，因其不处于事件上下文中；正确方式是通过 ref 获取元素引用，再在函数中操作 DOM。
vue 中 `{{ }}` 插值内无法直接使用 `$event.target`，因其不处于事件上下文中；正确方式是通过 `ref` 获取元素引用，再在函数中操作 dom。
在 Vue 模板中，v-on 指令（如 @click）天然提供事件对象 $event，因此可轻松通过 $event.target 访问触发事件的 DOM 元素：
<button @click="handleClick($event.target)">点击我</button>
但 {{ }} 插值表达式并非事件处理器——它属于响应式渲染逻辑，运行在模板求值阶段，此时没有事件上下文，$event 未定义，直接写 {{ myFn($event.target) }} 会报错（$event is not defined）。
✅ 正确解法：使用 Template Ref（模板引用）
Vue 提供了 ref 特性，允许你为任意元素声明一个响应式引用，从而在 JavaScript 中安全、精准地访问对应 DOM 节点：
<script setup>
import { ref, onMounted } from 'vue'
const pRef = ref(null)
function manipulateParagraph() {
// ✅ 安全访问：pRef.value 是真实的 <p> 元素
if (pRef.value) {
pRef.value.style.color = 'blue'
pRef.value.textContent = '内容已被 JS 动态修改！'
}
}
// 注意：首次渲染后 DOM 才可用，建议在 onMounted 中调用
onMounted(() => {
manipulateParagraph()
})
</script>
<template>
<p ref="pRef">{{ /* 不在此处调用函数操作 DOM */ }}</p>
</template>? 关键注意事项：
-
ref绑定的变量初始值为null，必须确保 DOM 已挂载（推荐在onMounted钩子中操作）； - 不要在
{{ }}中调用副作用函数（如 DOM 操作），这违反 Vue 的响应式设计原则，且可能导致重复执行或竞态问题； - 若需根据数据动态生成内容，应将逻辑放在
computed或方法中，返回纯数据，再由模板渲染——DOM 操作应作为独立副作用处理； - 在
<script setup></script>中，ref声明的响应式引用会自动解构到模板作用域，无需额外暴露。
总结：放弃在插值中“强行传入 $event”的思路，拥抱 Vue 的声明式思维——用 ref 显式获取元素，用生命周期钩子控制执行时机，既符合框架规范，也保障代码健壮性与可维护性。
立即学习“前端免费学习笔记（深入）”；
