在 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" 绑定
    };
  }
};

---

主要变化总结

Options API	Composition API
this.$emit()	emit() (从 context 获取)
this.$props	props (setup 参数)
this.$attrs	attrs (从 context 获取)
this.$slots	slots (从 context 获取)
this.$el	模板引用 (ref)
this.$parent	避免使用，考虑 Provide/Inject

---

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