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

最新推荐文章于 2025-12-24 15:02:00 发布

转载最新推荐文章于 2025-12-24 15:02:00 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_44590591/article/details/122687822?ops_request_misc=&request_id=&biz_id=102&utm_term=vue3%20%E7%BB%84%E4%BB%B6%E4%B8%ADthis&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-2-122687822.142^v65^ope

文章标签：

#前端 #vue.js #javascript

Vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍Vue3中如何替代使用this。由于新的组合式API不再使用this，文章提供了两种替代方法：一种是利用getCurrentInstance()方法获取当前组件实例；另一种推荐方法是通过useStore等组合API直接访问状态管理和路由。

Vue3.0中this的替代方法_周围都是小趴菜的博客-优快云博客_vue3的this中this的替代方法

在vue3中，新的组合式API中没有this，我们可以通过以下方法替代this
setup 在生命周期 beforecreate 和 created 前执行，此时 vue 对象还未创建，所以我们无法使用 this

方法一

getCurrentInstance() 方法，获取当前组件的实例，通过 ctx 或 proxy 属性获得当前上下文，从而就能在setup中使用router和vuex

export default {
	setup() {
    	let { proxy } = getCurrentInstance();
    	console.log(proxy)
    }
}

getCurrentInstance 方法去获取组件实例来完成一些主要功能，在项目打包后，会报错（不推荐使用）

方法二（推荐使用）

import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'

export default {
  setup () {
    const store = useStore()
	const route = useRoute()
    const router = useRouter()
    return {
      // 访问 state  函数
      count: computed(() => store.state.count),
      // 访问 getter函数
      double: computed(() => store.getters.double)
	  // mutation
      increment: () => store.commit('increment'),
      // 使用 action
      asyncIncrement: () => store.dispatch('asyncIncrement')
    }
  }
}