Vue 中无法在 {{ }} 插值表达式里使用 $event.target，因其仅适用于事件处理器；正确方式是通过 ref 获取元素引用，再在函数中操作 DOM。
vue 中无法在 `{{ }}` 插值表达式里使用 `$event.target`，因其仅适用于事件处理器；正确方式是通过 `ref` 获取元素引用，再在函数中操作 dom。
在 Vue 模板中，$event 是专为事件处理上下文设计的隐式参数，仅在 v-on（如 @click）等指令中有效。而双大括号 {{ function() }} 属于响应式渲染逻辑，执行时机在组件挂载/更新时，此时并无触发事件的上下文，因此 $event 不可用，直接写 {{ function($event.target) }} 会报错或返回 undefined。
✅ 正确解法：使用 Template Ref（模板引用）——这是 Vue 官方推荐的、安全且响应式的 DOM 元素访问方式。
以下是在 <script setup></script> 语法下的标准实现：
<script setup>
import { ref, onMounted } from 'vue'
const something = ref(null)
function someFunction() {
// 注意：此处不应直接操作 DOM（如修改 innerHTML），除非必要
// 因为插值函数应在纯计算场景下使用；若需 DOM 操作，建议移至生命周期钩子或事件中
if (something.value) {
console.log('当前 p 元素:', something.value)
// 示例：动态添加 class（但更推荐用 :class 响应式控制）
something.value.classList.add('processed')
}
return '渲染内容'
}
// ✅ 更佳实践：DOM 操作建议放在 onMounted 或 watch 中
onMounted(() => {
if (something.value) {
something.value.style.color = 'blue'
}
})
</script>
<template>
<p ref="something">{{ someFunction() }}</p>
</template>⚠️ 重要注意事项：
立即学习“前端免费学习笔记（深入）”；
-
ref="something"将 DOM 元素绑定到something.value，初始值为null，需确保在元素挂载后访问（如onMounted或条件判断）； - 避免在
{{ }}内部函数中执行副作用（如 DOM 修改、API 调用），这违背 Vue 的声明式渲染原则，易导致不可预测的更新行为； - 若目标是动态控制样式或属性，优先使用响应式数据 +
:class/:style，例如<p :class="{ active: isActive }"></p>； - 在
<script setup></script>中，ref变量名（如something）会自动暴露给模板，无需return。
总结：Vue 的设计哲学强调“数据驱动视图”，直接操作 DOM 应作为补充手段而非首选。当确实需要访问元素时，template ref 是唯一可靠、与 Vue 响应系统协同工作的方案。
