前言
对比 Vue2 ，引出并展开 Vue3 。
本文讲述了 this 概念及应用场景，以及使用方法和代码示例详细讲解。
回忆 Vue2
我们在
Vue2项目中，可能写得最多的单词就是 this 了，咱们无论是拿数据还是调方法，一律 this。
先来看个 Vue2 小示例：
export default {
data() {
return {
name: '月薪过万',
}
},
mounted() {
console.log(this.fun(), this.name)//我要 月薪过万
},
methods: {
fun() {
return '我要'
}
}
}
大家注意，Vue2 中这个 this，它的优点显而易见的同时，它的缺陷也非常明显，功能之间互相 this，变量和方法在各个方法混杂，无处不在的 this 耦合的非常强，遍布的 this 与互相耦合的 this 让人看着都头疼。
搞过 Vue2 稍微大点项目的同学，肯定深有体会。
切入 Vue3
注意：在
Vue3开发中，非常不提倡咱们使用 this。
我们来看一下在 Vue3 中，this 到底指向的是什么，Vue 实例？no no no！
export default {
setup() {
console.log(this)
}
}
很遗憾，是 undefined。
官方是这样说的：在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。
啥意思呢，就是 this 未指向当前的组件实例，在 setup 被调用之前，data，methods,computed 等都没有被解析，但事实是组件实例确实在执行 setup 函数之前就已经被创建好了，所以会与 Vue2 this 导致混淆。
但是呢，在 Vue3 中，我们还是有办法使用 this 的，一起来看下如何实现。
<template>
<button @click="getData()">获取data上的变量</button>
</template>
<script>
import { getCurrentInstance } from 'vue'
export default {
setup() {
// 获取this
const { ctx } = getCurrentInstance()
const _this = ctx
// 获取data上的变量
const getData = () => {
console.log(_this.d)
}
// return
return { getData }
},
data() {
return { d: '拿到了！' }
},
}
</script>
可以看到，成功拿到了 data 上的数据。
另外，大家不用纠结代码，稍微看一下就行了，不太提倡使用。
写在后面
既然出了这个，必然有它的意义。
正常什么情况下用呢，比如 ElementUI 框架，有一个消息提示组件。
它允许开发者使用 this.$message 进行调用并显示消息提示，此时呢 Vue3 很少一部分人就会通过咱们刚才说的方法，获取到 this，然后调用该方法。
咱们使用 Vue3 写代码，要远离无脑 this 行为。
SEO
vue3.js官方文档，vue3.js this 官方文档教程，vue3如何使用this，vue3项目中如何引用this？Vue3.0中this的替代方法，如何在Vue 3中使用“this”，Vue3中如何使用this-，Vue 3- 'this‘引用的是方法而不是app，vue3 this问题，vue3 中的methods 不支持this函数，为什么在 Vue 3 函数中未定义“this”，Vue3 - this 概念及使用方法（详细教程）。
