在 Vue 3 的 setup() 函数中，this 是 undefined。

Vue3的setup()函数中this为undefined，这是Composition API的重要改变。

---

替代方案包括：通过参数直接访问props和context（包含attrs、slots、emit等），使用解构语法简化写法。

---

相比Options API，Composition API不再依赖this，而是通过显式参数访问组件属性和方法，如用emit()替代this.$emit，用ref替代this.$el。

---

这种设计使代码更清晰明确，提升了TypeScript支持度，减少了this的"魔术性"访问。

在 Vue 3 的setup()函数中，this是undefined。

这是 Vue 3 Composition API 的一个重要改变。

为什么this是 undefined？

在setup()函数中，组件实例尚未被完全创建，所以this不可用。

替代方案

1.访问 Props

import { defineProps } from 'vue'; export default { props: ['title'], setup(props) { // props 作为第一个参数 console.log(props.title); // ✅ 正确 // console.log(this.title); // ❌ 错误！this 是 undefined } };

2.访问 Context（上下文）

export default { setup(props, context) { // context 作为第二个参数 // context 包含以下属性： console.log(context.attrs); // 非 props 的属性 console.log(context.slots); // 插槽 console.log(context.emit); // 触发事件的方法 console.log(context.expose); // 暴露公共属性 } };

3.使用解构语法

export default { setup(props, { attrs, slots, emit, expose }) { emit('myEvent', 'data'); // ✅ 触发事件 } };

4.完整示例

import { ref } from 'vue'; export default { props: ['initialCount'], emits: ['count-changed'], // 声明自定义事件 setup(props, { emit }) { const count = ref(props.initialCount || 0); const increment = () => { count.value++; emit('count-changed', count.value); // 使用 emit 而不是 this.$emit }; return { count, increment }; } };

与 Options API 的对比

// Options API (Vue 2 / Vue 3 兼容) export default { mounted() { console.log(this.$el); // ✅ 可以访问 console.log(this.$props); // ✅ 可以访问 this.$emit('event'); // ✅ 可以访问 } }; // Composition API export default { setup(props, { emit }) { onMounted(() => { // console.log(this.$el); // ❌ 错误！this 是 undefined console.log(props); // ✅ 使用 props 参数 emit('event'); // ✅ 使用 context.emit }); // 如果需要访问模板引用，使用 ref const myElement = ref(null); return { myElement // 在模板中通过 ref="myElement" 绑定 }; } };

主要变化总结

这种设计让代码更加明确，减少了this的魔术性，提高了 TypeScript 的支持度。