开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2天点击查看活动详情

前言

听说v2要停止维护了，现在外面的招聘都是百分百的要求你v3必会的，讲真，你不会你都不好意思去面试。之前的项目也是经常使用到v3的，不过现在一直在维护v2的项目，今天纯属是来复习一下的

再见了this

vue中的this到底是个什么东西，为什么我就要用this呢

答：this它不是个东西，它就是个指向上下文的实例。看过源码的同学应该很容易理解this这个东西都包含了什么。

v3中如何拿到这个this

答：在vue中提供了一个方法供你拿到this,具体代码如下：

` import { getCurrentInstance, onMounted } from "vue";

export default {
setup( ) {
const { ctx } = getCurrentInstance(); // ctx=vue2的this
onMounted(() => {
console.log("ctx",ctx);
});
},
`

[getCurrentInstance]代表上下文，即当前实例。ctx相当于Vue2的this, 但是有点小问题，这个this只适用于开发环境，等你打包时就会报错。

解决方案如下：

`1. import { getCurrentInstance } from 'vue'

export default ({
name: '',
setup(){
const { proxy } = getCurrentInstance() // 使用proxy代替ctx
onMounted(() => {
console.log(proxy, "proxy");
});
} `

切记：ctx只在开发环境有效

v3为什么要摒弃this

答：为了拒绝耦合性，官网说法是这样的：在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。

来简单分析下：

v2中this是非常好用的，不管是什么东西，你基本99%都可以用this取到，但是他的耦合性太大，各种this遍地存在，变量和方法之间有时候比较混淆。
v3的setup它的生命周期是在created之前的，所以你在setup中是取不到this，我们在用到this的地方也是将他写在mounted中。

nextTick

这个东西不是常用吧，但是在某些时刻还是要用到的，在v2中这个东西是绑在vue实例上的，直接this.nextTick就可以使用

v3中nextTick使用

import { nextTick } from 'vue'

setup () {

const visible = ref(false)
    
nextTick(()=>{
    
	visible.value = true
})
    
return {
	visible
}

}

就是这样简单，你只需要把它引入就可以使用了。

setup参数

props

吐槽：为什么你setup写了props还要我再写个props去接收你的参数，你就不能让我只写一次吗，你下次能不能简化它。当然如果有小伙伴觉得我说的不对，欢迎你来纠正。

context

2.1. const { attrs,slots,emit } = context

// attrs 获取组件传递过来的属性值，

// slots 组件内的插槽

// emit 自定义事件子组件

这三个属性实是我们常见的属性，只不过是统一的放在了context中了。

注意：context不止是这么多的属性

这是打印context的结果，我们可以看到其中还包含了listeners parent refs root这些属性，所以在我们平常用到的时候只有三种，但是当一些其他情况发生时我们也可以从context中解构出其他属性来使用

注：

context.refs.xxx = this.refs.xxx

context.listeners = this.listeners

v3之常用函数和参数梳理

前言

再见了this

nextTick

setup参数