Vue3 中如何使用this

最新推荐文章于 2024-09-26 18:04:52 发布

PhilipJ0303

最新推荐文章于 2024-09-26 18:04:52 发布

阅读量9.7k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/PhilipJ0303/article/details/129682470

版权

Vue3中移除了setup函数内的this，以避免混淆。为替代this，Vue提供了getCurrentInstance方法，它在setup和生命周期函数中返回当前实例。通过currentInstance，开发者可以模拟Vue2中this的使用场景，但不应将其视为常规的this替代品。

摘要由CSDN通过智能技术生成

Vue2升级到Vue3，有很大的改变，其中最明显的就是以前的this，在新版本中无法使用了，这是为什么呢？

官方是这样说的：在 setup() 内部，this 不会是该活跃实例的引用（即不指向vue实例），因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。

因此setup函数中不能使用this。所以Vue为了避免我们错误的使用，直接将setup函数中的this修改成了 undefined

所以想要在Vue3中使用this， Vue为我们提供了getCurrentInstance（）方法，这个方法返回了ctx和proxy。

具体使用如下：

<script setup>
    import {getCurrentInstance} from '@vue/runtime-core'


    const currentInstance = ref()


    onMounted(() => {

        /**
         * 此处这样使用时因为Vue3不同于Vue2，在 Vue3的setup中我们是无法访问到this的，所以我们需要借助一个方法，
         * 那就是getCurrentInstance，该方法返回了当前的实例对象
         *
         * 注意！！！！！
         * 不要把该函数当作是optionsApi中来获取 this 使用。
         * 该方法只在 setup、生命周期函数中有效，在方法中是无效的
         * */
        currentInstance.value = getCurrentInstance()
    });
</script>

这样我们就可以借助currentInstance 来完成在Vue2中this的使用场景了