前言
对比 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 概念及使用方法(详细教程)。