在 Vue 3 的 setup 函数中，无法直接访问 this，因为 setup 执行时组件实例尚未创建。这是 Vue 3 设计上的改变，旨在避免 this 指向的混乱问题。但你可以通过以下方式替代 this 的功能：
1. 获取组件实例（不推荐）
仅限高级场景（如开发库），谨慎使用：
import { getCurrentInstance } from 'vue';setup() {const instance = getCurrentInstance();console.log(instance.proxy); // 类似 this，但可能为 null// 注意：instance.ctx 包含内部属性（不稳定），instance.proxy 在开发环境为 Proxy 对象 }⚠️ 警告：
- 官方不推荐在应用代码中使用，因为违反 Composition API 设计原则
- 未来版本可能变更内部实现，导致代码不可维护
2. **替代 this 的推荐方案
(1) 获取 Props
setup(props) {// props 是响应式对象（不要解构！）console.log(props.message);
}
(2) 访问插槽（Slots）与属性（Attrs）
setup(props, context) {const { attrs, slots, emit } = context;// attrs: 非 props 的属性（类似 this.$attrs）// slots: 插槽对象（类似 this.$slots）// emit: 触发事件（类似 this.$emit）
}
(3) 暴露组件方法（Expose）
import { ref } from 'vue';setup(props, { expose }) {const count = ref(0);// 暴露给父组件调用的方法expose({increment: () => count.value++});
}
(4) 模板引用（Refs）
<template><div ref="rootEl">Hello</div>
</template><script>
import { ref, onMounted } from 'vue';setup() {const rootEl = ref(null); // 必须同名onMounted(() => {console.log(rootEl.value); // 获取 DOM 元素});return { rootEl };
}
</script>
3. 生命周期钩子替代
使用独立的生命周期函数：
import { onMounted, onUpdated } from 'vue';setup() {onMounted(() => {console.log('替代 this.$onMounted');});
}
4. 替代 this.$route / this.$store
import { useRoute, useStore } from 'vue-router';
import { useStore } from 'vuex';setup() {const route = useRoute(); // 替代 this.$routeconst store = useStore(); // 替代 this.$store
}
总结
Vue 2 (this) | Vue 3 (setup) 替代方案 |
|---|---|
this.$props | setup(props) 参数 |
this.$emit | context.emit |
this.$slots | context.slots |
this.$attrs | context.attrs |
this.$refs | ref() + 同名模板引用 |
this.$store (Vuex) | useStore() 组合式函数 |
this.$route (Vue Router) | useRoute() 组合式函数 |
| 生命周期钩子 | onMounted() 等独立 API |
最佳实践：避免使用 getCurrentInstance()，优先使用 Composition API 提供的参数和函数式替代方案！
)
