Vue 3 Setup中this为什么是undefined？

先了解Vue 3的setup函数特点

在Vue 3中，setup函数是一个新的组件选项，它为我们提供了一种在组件初始化阶段设置组件的响应式数据、计算属性、方法等的方式，和Vue 2的一些写法有很大不同哦。

在Vue 2中，我们在组件的methods、data等选项里可以很自然地使用this来访问组件实例的各种属性和方法，比如在methods里写个函数,通过this就能拿到组件里的数据呀。

但是到了Vue 3的setup函数里，情况就变啦，这里的this是undefined哦,这是为啥呢？

this为undefined的原因

其实呀，setup函数在设计上就有它独特的执行上下文，它是在组件实例被创建之前就执行的，也就是说，当setup函数运行的时候，那个完整的组件实例还没完全准备好呢，所以自然就不存在我们熟悉的那个可以通过this来访问的组件实例啦,于是this就变成了undefined。

你可以想象一下，setup函数更像是在为组件实例的诞生做前期准备工作，在这个准备阶段,还没法像组件已经完全创建好之后那样通过this去拿东西呢。

那在setup里怎么实现原本用this做的事呢？

别担心，虽然setup里没有this可用，但Vue 3给我们提供了其他好用的办法哦。

比如说要访问组件的props吧，在setup函数里，它会把props作为第一个参数传进来哦,像这样：

export default {
  props: {
    message: String
  },
  setup(props) {
    console.log(props.message);
  }
}

这样就能轻松拿到props里的值啦,根本不需要this哦。

要是想定义一些可以在模板里使用的变量或者函数呢,直接在setup里return出去就行啦。

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment
    };
  }
}

在模板里就能直接用{{ count }}和@click="increment"这样的方式来使用啦,也不用this哦。

对于访问组件的上下文相关的一些东西，比如emit事件发射函数等，setup函数的第二个参数就是一个上下文对象（context），里面就有emit呀,像这样：

export default {
  emits: ['custom-event'],
  setup(props, context) {
    const emit = context.emit;
    const handleClick = () => {
      emit('custom-event', 'some data');
    };
    return {
      handleClick
    };
  }
}

所以呀，虽然在Vue 3的setup函数里this是undefined，但通过Vue 3提供的这些巧妙的参数传递和返回值的方式，我们完全可以很好地完成原本在Vue 2里靠this做的那些事儿,而且还让代码结构更加清晰明了呢。