Vue3中this的替代方案

最新推荐文章于 2024-12-12 17:38:45 发布

Luke.Du

最新推荐文章于 2024-12-12 17:38:45 发布

阅读量2.2w

点赞数 17

分类专栏：前端文章标签： vue js vue3 vue.js typescript

本文链接：https://blog.csdn.net/qq_45369827/article/details/116036665

版权

Vue3的setup方法在beforecreate和created之前执行，无法直接使用this。通过getCurrentInstance可以获取到ctx和proxy，其中proxy与Vue2.x的this功能相似，适合用于替代this。需要注意的是，ctx在vue3项目打包后可能失效。另外，可以通过provide+inject在App.vue中注册全局变量作为替代方案。

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

setup 在生命周期 beforecreate 和 created 前执行，此时 vue 对象还未创建，因无法使用我们在 vue2.x 常用的 this。

解决办法是 vue 中的 getCurrentInstance 方法返回了 ctx 和 proxy，控制台打印 ctx 和 proxy 发现和 vue2.x 中的 this 等同，习惯使用 this 的同学可以用 proxy 进行替代。没有用 ctx 因为 vue3 项目打包后 ctx 会失效。也可以在 App.vue 用 provide + inject 的方法注册全局变量。

import {
   defineComponent, getCurrentInstance} from 'vue'

export default defineComponent ({
   
  setup(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Luke.Du

关注关注

17
点赞
踩
38

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【vue3】使用pinia替代vuex

wusq的博客

04-18

3176

💡 pinia是vue团队推荐代替vuex的一款轻量级状态管理库。

Vue3从0到1开发组件前戏（中）：$emit,$on,$off替代方案

qq_35117063的博客

08-02

2438

本系列中会用到的第三方库一、起因上一篇文章中说过，在Vue的新版本，Vue3中删除了$on,$once,$off等方法，$emit仍然是现有 API 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序。但是既然是组件开发，那么组件与组件之间的通信，组件与父级之间的通信肯定是少不了的，$emit方法虽然已经能满足半数以上的通信需求，但是剩下满足不了的部分，就是满足不了。所以就要用到市面上的第三方库来作为平替方案了。 Vue3迁移文档中提及:在 Vue 3 中，已经不可能使用这些 API 从组件

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

vue3this的替换方法

fury的博客

03-01

1445

但是在vue3.0的时候如果用组合api，由于 setup 在生命周期 beforecreate 和 created 前执行，此时 vue 对象还未创建，因无法使用我们在 vue2.x 常用的 this。把封装的函数和api挂载在全局变量install方法里，之后导出。在main.js 引入，

Vue3 Vue2开发区别

Luka

12-12

907

这两都是用于创建响应式对象，ref 通常用于创建基础类型，reactive 通常用于创建响应式，这是官方推荐的，现实中也不尽然，有人也用 ref 来定义数组，也有人一个组件只定义一个 reactive，所有数据都放里面，就像 Vue2 的 data 一样，也有人都用。因为对象引用类型，可以用来做代理或劫持，如果只返回基础类型的话，存储在栈中，执行栈里执行完就回收了，没有办法添加代理或劫持，自然就没办法追踪后续的变化，所以不得不返回一个对象，这样才能有响应式。Vue3 里就可以怎么写。

Vue3.0中this的替代方法

热门推荐

weixin_44590591的博客

01-25

1万+

Vue3.0中this的替代方法在vue3中，新的组合式API中没有this，我们可以通过以下方法替代this setup 在生命周期 beforecreate 和 created 前执行，此时 vue 对象还未创建，所以我们无法使用 this 方法一 getCurrentInstance() 方法，获取当前组件的实例，通过 ctx 或 proxy 属性获得当前上下文，从而就能在setup中使用router和vuex import { getCurrentInstance } from "vue";

前端——Vue3.0中this的替代方法

helloyangkl的博客

11-18

1478

前端——Vue3.0中this的替代方法

vue中全局路由守卫中替代this操作(this.$store/this.$vux)

11-20

本文将讨论如何解决这个问题，并提供一种替代方案。首先，我们来看标题和描述中提到的问题：在Vue的全局路由守卫`router.beforeEach`中，试图使用`this.$vux.loading.hide()`时，可能会遇到`this`未定义或无法访问...

浅谈Vue3 Composition API如何替换Vue Mixins

10-15

在 Vue3 中，我们可以将其转换为组合式函数： ```javascript // Vue 3 Composition API import { ref, computed } from 'vue'; export function useValidation() { const isValid = ref(false); const ...

全栈-Vite3+Vue3+TS+Ant-design-vue3整合

11-07

vue3+ts 组合式api中（setup)如何使用getCurrentInstance，以及用它替代this

qq_59517599的博客

10-11

1132

getCurrentInstance是一个function方法，getCurrentInstance()是一个对象，proxy也是一个对象。proxy是getCurrentInstance()对象中的一个属性，通过对象的解构赋值方式拿到proxy。这种只适合本地调试，运行到线上就会报错，为ts的类型错误，类型“ComponentInternalInstance | null”上不存在属性“proxy”的错误。vue3的setup中没有this时需要使用getCurrentInstance()来获取。

vue3项目中开发阶段ctx代替this，生产阶段const { ctx } = getCurrentInstance()如何获取路由挂载问题

qq_33323381的博客

03-16

4023

解决方案一：开发阶段 const { ctx } = getCurrentInstance() 生产阶段 const {proxy} = getCurrentInstance() ctx相当于Vue2的this,我们都知道vue3中不支持this。所以把ctx改成proxy. 解决方案二：as any const {proxy} = getCurrentInstance() as any ...

Vue3.0在main.js配置全局属性,及其代替vue2的this、接口使用等等

qq_41769047的博客

01-20

1万+

注入全局api接口对比接口封装没什么区别，v2怎么封装，v3拿过来用就行了，主要是在main.js全局的注入使用有所区别 v2 //main.js import Vue from 'vue'; import App from './App.vue'; import api from './http/api/api.js'//数据接口 Vue.prototype.$api = api; new Vue({ render: h => h(App) }).$mount('#app') v3

Vue2/3中的this

muzidigbig的博客

06-25

1177

Vue3.0中this的替代方法，Vu3获取this getCurrentInstance() 方法，获取当前组件的实例，通过 ctx(开发)或 proxy(开发、生产) 属性获得当前上下文，从而就能在setup中使用router和vuex Vue2中，为什么this能直接获取到data和methods 通过this能直接获取到methods，是因为在new Vue的时候遍历了methods，为每一个methods方法通过bind指定了this，也就是指定了this为new Vue的实例（vm）。

vue3中getCurrentInstance不推荐使用以及在＜script setup＞中获取全局内容(三种方式)

阿飞的博客

10-23

1万+

官方解说：在 setup() 内部，this 不会是该活跃实例的引用（即不指向vue实例），因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。因为setup的生命周期是在beforeCreate，created之前执行的我们在beforeCreate时保存的this，所以要在beforeCreate之后获取，onBeforeMount是在beforeCreate之后执行的所以可以获取到 note。

Vue3组合式API之getCurrentInstance详解（在行为验证码之滑动验证AJ-Captcha遇到在开发环境可以，测试环境报错）

m0_52263688的博客

11-01

2010

ctx和proxy都是getCurrentInstance()对象中的属性，通过解构赋值的方式拿到。但是在Vue3中，在setup中无法通过this获取组件实例的。所以在Vue3中，我们可以通过getCurrentInstance()来获取当前组件实例。首先大家知道我们可以通过 getCurrentInstance这个函数来获取当前组件的实例对象,也就是当前vue这个实例对象。由于本人在使用AJ-Captcha插件的过程中发现在开发环境调试正常，但是测试环境会报错，获取不到组件实例。开发中只适用于调试！

vue3.0之全局变量app.config.globalProperties的使用

m0_67391401的博客

03-01

3703

globalProperties 类型：[key: string]: any 默认：undefined 用法添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。这可以代替 Vue 2.x Vue.prototype 扩展： // 之前(Vue 2.x) Vue.prototype.$http = () => {} // 之后(Vue 3.x) const app = Vue.createApp({}) app.config.glo

vue3 ts的this.$set()