(vue3 this) Vue3中使用this的详细教程
在 Vue3 中，由于使用了 Composition API，因此我们不能像在 Vue2 中那样，在 setup 函数中直接使用 this，这是因为 this 在 setup 函数中是未定义的。以下是详细的解决、开发以及配置流程：
创建新项目
首先，我们需要使用 Vue CLI 创建一个新的 Vue 3 项目：
vue create vue3-project接着，会出现一个提示，选择 “Manually select features” 并按 Enter键，然后选择 “Vue 3 Preview”，最后创建项目。
使用 setup()
在使用 Vue 3 创建的新组件中，你将马上会发现没有 data(), methods 等选项。相反，你会看到一个新的 setup() 函数。这个 setup() 函数是新加入的 Composition API 的一部分，在其中我们不能使用 this。
拿之前在 Vue 2.x 中的一个例子来说，你会这样在组件中使用 this：
export default {
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
greet() {
alert(this.message);
}
}
}在 Vue 3 中，由于不能在 setup() 中使用 this，上述代码的 Vue 3 版本会是这样的：
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello Vue!');
const greet = () => {
alert(message.value);
};
return {
message,
greet,
};
}
}在上述的 Vue 3 代码中，我们首先从 ‘vue’ 中引入了 ref。在 setup() 函数中，我们使用 ref() 创建了一个响应式的数据源，替代了 Vue 2 中 data() 的工作。同样，我们也创建了一个新的方法 greet。在这个 greet 方法中，为了获取并使用 message，我们用 message.value 而不是像 Vue 2 中那样使用 this.message。最后，我们返回了这两个属性以使得他们能在模板中被访问到。
这就是如何在 Vue 3 中替代 this 的方式。希望这个答案能帮助到你！如果有进一步的问题，欢迎继续提问。
(云顶辅助) 云顶之弈自动牌王多功能辅助(MVP云顶之弈辅助工具) v13.24 最新免费版 云顶之弈自动牌王MVP辅助工具v13.24最新免费版 全网首发(图文详解1)
(javascript import) 一文带你搞懂JS中导入模块import和require的区别 模块化JavaScript：Import与Require 全网首发(图文详解1)
