Vue3+TypeScript组件按钮回调报错：无法读取undefined属性

问题原因 #

在Vue3的<script setup>语法糖中，定义的函数不会自动绑定组件实例的this。开发环境下代码未压缩，可能因上下文兼容让this侥幸指向组件实例，但生产环境经Vite压缩优化后，this实际指向undefined或全局对象，导致访问this.myComputedVar抛出错误。你给函数声明的this: any仅为类型标注，不会改变运行时的this指向。

修复方案 #

直接使用<script setup>中定义的myComputedVar变量即可，无需通过this访问——这也是<script setup>的设计初衷：所有顶层声明的变量、函数、计算属性都可直接在模板和函数中使用。

修正后的代码如下：

<template>
    <div v-on:click="displayWhatever(index)">SOME CONTENT HERE</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { event } from 'vue-gtag'

// 假设someVar是已定义的响应式变量
const someVar = ref([/* 初始化数据 */])

let selected = ref(-1);

const myComputedVar = computed(() => {
  return someVar.value.slice(/* 你的处理逻辑 */);
})

// 移除this类型声明，直接使用myComputedVar
function displayWhatever(index: number): void {
  selected.value = index;
  // 直接访问myComputedVar，不需要this
  event('myCustomEvent', {
    value1: myComputedVar.value[index].value1,
    value2: myComputedVar.value[index].value2
  })
}
</script>

额外注意点 #

• 计算属性myComputedVar是Ref对象，在<script>中必须通过.value访问其值（模板中会自动解包）
• 确保someVar是用ref或reactive定义的响应式变量，否则computed不会触发更新
• 移除函数的this: any类型声明，避免类型混淆

内容的提问来源于stack exchange，提问作者lpares12