在Vue3的setup中如何获取this？

在Vue2中,我们经常会在组件的方法里通过“this”来访问组件实例的各种属性和方法，比如data里的数据、computed计算属性、methods里的其他方法等等，当我们切换到Vue3的setup函数写法时，会发现情况有所不同，很多人就会疑惑，在Vue3的setup中怎么获取类似Vue2里那种“this”的效果呢？下面就来详细解答一下这个问题。

为什么setup中不能直接用this？

Vue3引入setup函数主要是为了让组件的逻辑更加内聚和清晰,它在组件初始化阶段就被调用，比传统的Vue2的生命周期钩子更早执行，在setup函数内部，此时组件实例还没有完全创建好，所以是无法直接访问到Vue2那种完整的组件实例“this”的，如果在setup里直接尝试使用“this”，会得到“undefined”的结果，这是因为它的执行上下文和Vue2里基于实例的方法执行上下文是不一样的。

通过参数获取组件实例相关内容

虽然在setup里不能直接用this,但Vue3给我们提供了其他方式来获取我们需要的类似于“this”所承载的那些信息，setup函数接受两个参数，第一个参数是props，它包含了父组件传递过来的属性值，我们可以像这样在setup中使用：

export default {
  setup(props) {
    // 这里可以直接使用props里的值
    console.log(props.someProp);
  }
}

第二个参数是context,它是一个包含了一些组件上下文信息的对象，其中比较常用的有attrs、slots和emit，attrs可以获取到父组件传递过来但没有在props里声明的属性；slots可以用来访问组件的插槽内容；emit则用于在子组件中触发父组件监听的事件。

export default {
  setup(props, context) {
    const { attrs, slots, emit } = context;
    // 使用attrs获取未声明的属性
    console.log(attrs.someAttr);
    // 使用slots访问插槽内容
    const defaultSlotContent = slots.default();
    // 使用emit触发事件
    const handleClick = () => {
      emit('someEvent', '传递的数据');
    }
    return {
      handleClick
    }
  }
}

通过这种方式,我们虽然没有一个类似Vue2里完整的“this”，但可以分别获取到我们所关心的组件相关的各种信息，从而实现类似的功能。

使用getCurrentInstance获取组件实例（谨慎使用）

Vue3还提供了一个getCurrentInstance函数,它可以在setup函数内部获取到当前组件的实例，这个方法是有一定限制和需要谨慎使用的情况。

首先来看怎么使用它：

import { getCurrentInstance } from 'vue';
export default {
  setup() {
    const instance = getCurrentInstance();
    if (instance) {
      // 这里可以通过instance访问一些组件实例的属性和方法
      console.log(instance.proxy.$data.someData);
    }
    return {
      // 可以返回一些基于实例获取到的值或者方法等
    }
  }
}

官方文档其实是不推荐在大多数情况下使用getCurrentInstance来获取组件实例的,因为它打破了Vue3基于组合式API所倡导的逻辑清晰和可维护性的原则，使用它可能会导致代码更加难以理解和维护，尤其是在大型项目中，只有在一些非常特殊的场景下，比如需要在setup函数内部访问组件实例上挂载的一些非响应式的第三方库相关的属性或者方法时，才可以考虑谨慎使用它，而且要注意，在使用它获取到实例后，访问实例上的属性和方法的方式也和Vue2里直接用this有所不同，需要通过instance.proxy来访问，就像上面代码里展示的那样。

在Vue3的setup中不能像Vue2那样直接使用“this”来获取组件实例相关信息，但我们可以通过setup函数的参数props和context来分别获取父组件传递的属性、未声明的属性、插槽内容以及触发事件等功能，而getCurrentInstance虽然可以获取组件实例，但要谨慎使用，一般情况下优先选择通过props和context来满足我们在组件逻辑编写中的需求，这样可以让我们的代码更加符合Vue3组合式API的设计理念，保持代码的清晰性、可维护性和可扩展性，在实际开发中，要根据具体的场景合理选择获取组件相关信息的方式，而不是一味地去寻找类似Vue2里“this”的替代品，而是要适应Vue3新的API设计思路，更好地完成项目开发。