vue3 setup中使用this

dly@

于 2025-08-04 10:22:26 发布

阅读量117

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/donglingyan/article/details/149899725

import { ComponentInternalInstance, getCurrentInstance } from 'vue';
setup() {
    const { proxy, ctx } = (getCurrentInstance() as ComponentInternalInstance)
    const _this = ctx
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dly@

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3中如何优雅地在 setup 使用 globalProperties

仰望星空的代码

09-15

1万+

一、前言 vue3 已经发布到 v3.2.x 版了，在项目中也使用上了 vue3，总体感觉还是不错的。vue3 中使用Proxy 来实现响应式数据，解决了 vue2 中的部分性能损耗、无法监听动态添加的属性的值变化、无法监听数组元素对象的属性的值的变化问题。vue3 中的模板可以包含多个根节点、v-model 参数化等等特性也很值得肯定。还没有使用 vue3 的开发者，推荐赶快上手试用。二、令人困惑的 globalProperties vue3 中每个 vue 的实例都会对外暴露一个包含此应用实例的

Vue3 - this 概念及使用方法（详细教程）

🏆 前端领域优质创作者

11-15

7430

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 概念及使用方法（详细教程）。

参与评论您还未登录，请先登录后发表或查看评论

Vue 组件的 setup 函数中如何访问 this？为什么不推荐这样做？

最新发布

前端大白话

06-01

1528

前端小伙伴们，有没有在Vue3的setup函数里疯狂找`this`的经历？就像在海底捞针，结果发现针不见了！今天咱们就聊聊Vue3的这个"玄学"——setup函数里为啥不能用`this`，以及该怎么优雅地替代它！看完这篇，你不仅能避开坑，还能和面试官唠明白背后的逻辑～

Vue3关于setup的总结

missCheney的博客

10-13

1758

Vue3 Setup

在Vue3的setup中如何使用this

qq_37485170的博客

04-20

4176

但是Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。可以看到，2者有所区别。ctx是普通对象，proxy是Proxy对象。2、使用：由vue提供，官方文档现已找不到此api，可寻找其他替代方案，可能也不推荐使用。中使用this， Vue为我们提供了getCurrentInstance（）方法，这个方法返回了ctx和proxy。1、概述：一个很重要的方法，获取当前组件的实例、上下文来操作router和vuex等。

vue3还用this吗？getCurrentInstance获取当前组件实例

头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。

11-24

6505

在Vue3中，我们发现this是undefined，那我们真的没法使用this了吗？vu3给我们提供了一个getCurrentInstance函数：用于获取当前组件实例。身上有个ctx属性有点类似this,通过代码可以看到如何使用。

vue 3.0怎么使用 this

weixin_49826079的博客

07-28

1711

在vue3.0中在setup函数中不能使用this，应为this为关键字。getCurrentInstance函数可以获取当前组件实例对象，而ctx则是一个包含了props、attrs、emit等属性和方法的上下文对象。

vue3的setup中this

m0_47743942的博客

05-12

692

在Vue3的setup函数里输出this，可以看到其值为undefined。如果setup里面定义一个函数，输出其this呢？

vue3 setup语法中如何使用this（setup中无法使用this）

qq_31744201的博客

07-26

1173

所以使用element-ui的时候，就遇到了很艹蛋的事，代码里面有一个this.$refs，结果死活都没有值，查了半天。你可以在选项式 API 中访问组合式 API 暴露的值，但反过来则不行。自身并不含对组件实例的访问权，即在。使用proxy代替this。

【踩坑】Vue3 setup中如何使用$refs

m0_67402774的博客

03-09

8272

Vue3 引导大家使用 setup 方法以同步的方式组织逻辑，实质上编写方式与2.X时代发生了巨大变化。同步意味着 setup 方法中无法使用 this（ this 并不指向当前组件实例），我们需要使用 vue3 中暴露出来的方法来实现vue的一些功能（比如computed）如下： <script setup> import {computed,ref} from 'vue' const num = ref(10) const status = computed(()=>num.val

vue3 setup 使用 beforeRouteEnter 组件内路由守卫

桃李不言下自成蹊

05-30

1万+

setup 中只有onBeforeRouteLeave、onBeforeRouteUpdate两个钩子函数，没有beforeRouteEnter对应的钩子函数，所以无法在setup中直接使用

Vue3.0 setup的使用及作用

m0_60970928的博客

02-09

2302

setup用来写组合式api，从生命周期的角度，相当于取代了beforeCreate()1. 这个函数会在created之前执行2. setup内部没有this，不能挂载相关的东西3. setup内部的属性和方法，必须return暴露出来。(语法糖不需要)4. setup内部的属性都不是响应式的5. setup不能调用生命周期相关函数，但生命周期相关函数可以调用setup以上就是Vue3.0 setup的使用及作用。希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一一解答。

Vue3【六】setup的使用和setup的返回值

Ggome的博客

06-07

1192

setup函数的使用，和vue2的选项式不同 vue3的组合式使用的是setup函数通过返回值将数据和方法传到页面返回值也可以是一个箭头函数setup先于 data和method执行所有无法读取到this和data，method的内容，反之可以。

如何在Vue3中使用this

最是人间留不住，朱颜辞镜花辞树。

11-18

3956

getCurrentInstance代表上下文，即当前实例。ctx相当于Vue2的this, 但是需要特别注意的是ctx代替this只适用于开发阶段，如果将项目打包放到生产服务器上运行，就会出错，ctx无法获取路由和全局挂载对象的。此问题的解决方案就是使用proxy替代ctx，代码参考如下。

Vue3中如何使用this

热门推荐

happygirl0917的博客

09-07

1万+

在v3中，使用setup()来代替了以前data、methods函数等。因为，setup执行是在created之前。所以，没有this。但是又想使用$parent,$refs等方法 import { getCurrentInstance, ComponentInternalInstance } from 'vue' setup() { // as ComponetInternalInstance表示类型断言，ts时使用。否则报错，proxy为null const { proxy } =

Vue3 中如何使用this

PhilipJ0303的博客

03-21

1万+

官方是这样说的：在 setup() 内部，this 不会是该活跃实例的引用（即不指向vue实例），因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。所以Vue为了避免我们错误的使用，直接将setup函数中的this修改成了 undefined。Vue2升级到Vue3，有很大的改变，其中最明显的就是以前的this，在新版本中无法使用了，这是为什么呢？所以想要在Vue3中使用this， Vue为我们提供了。

vue3中如何使用this相关属性

天高任鸟飞

06-10

1105

vue3怎么使用this属性

Vue3 setup 怎么使用this.$refs

12-11

根据提供的引用内容，Vue3的setup中没有绑定this，因此无法使用this.$refs来获取节点。但是，我们可以使用以下两种方法来获取节点：方法一： ```vue <template> <p ref="myRef">hello</p> </template> <script> import { ref, onMounted } from 'vue' export default { setup() { const myRef = ref(null) onMounted(() => { console.log(myRef.value) // 输出： <p>hello</p> }) return { myRef } } } </script> ``` 方法二： ```vue <template> <p ref="myRef">hello</p> </template> <script setup> import { onMounted, getCurrentInstance } from 'vue' const p = getCurrentInstance() const { proxy } = getCurrentInstance() onMounted(() => { console.log(p.refs.myRef) // 输出： <p>hello</p> console.log(proxy.$refs.myRef) // 输出： <p>hello</p> }) </script> ```