Vue3中怎么替代this？探索长远尾解决方案

this不再指向组件实例，而是被替换为了一个新鲜对象。在Vue3中，怎么找到合适的替代方案呢？本文将深厚入探讨。

Vue3Composition API：怎么替代VueMixins

Vue3引入了Composition API，它彻底改变了我们用Vue的方式。在vue3+ts组合式api中，怎么用getCurrentInstance，以及用它替代？

Vue3中替代this的方法

在Vue3中， 新鲜的组合式API中没有，我们能通过以下方法替代。

Vue3中箭头函数的this指向

在Vue3中， 箭头函数的指向包含它的作用域，而不是运行时所在的作用域。所以呢，在箭头函数内部用会指向外层作用域，而非Vue实例本身。

setup函数中的this

setup 在生命周期 beforeCreate和 created前施行， 此时 vue对象还未创建，因无法用我们在 vue2.x常用的。解决办法是 Vue中的 getCurrentInstance方法返回了 ctx和 proxy， 控制台打印 ctx和 proxy找到和 Vue2.x中的等同，习惯用的同学能用 proxy进行替代。

Vue3中怎么用provide + inject注册全局变量

没有用 ctx基本上原因是 Vue3项目打包后 ctx会失效。也能在 App.vue用 provide + inject的方法注册全局变量。import {defineComponent, getCurrentInstance} from 'vue' export default defineComponent ({ set...

Vue3中怎么用getCurrentInstance

如下面的代码， 在Vue中用watch属性监听message的变来变去，当message改变时用.showMessage方法进行提示。

Vue3中怎么用this.message

如下面的代码，在Vue中用.message来引用message数据。

Vue3中怎么用Child组件

如下面的代码， 在Vue中定义一个Child组件，用来引用组件中的数据和方法。

Vue3中怎么用computed属性

在

前往体验 import { getCurrentInstance, onMounted } from vue ; export default { setup { const { ctx } = getCurrentInstance; //获取上下文实例,ctx=vue2的 onMounted = { console.log; ctx.http; }); }, };.getCurrentInstance代表上下文,即当前实例。ctx相当于Vue2的, 但是需要特别注意的是ctx代替只适用于开发阶段,如果将项目打包放到生产服务器上运行,就会出错,ctx无法获取路由和全局挂载对象的。

Vue3中怎么用watch属性监听变来变去

在watch属性中，同样表示当前组件实例。

Vue3中怎么用setup函数

我搞懂：在Vue3中， setup在生命周期 beforeCreate和 created前施行，此时 vue对象还未创建，所以呢，无法用我们在 vue2.x常用的。官方解说：在 setup内部， 不会是该活跃实例的引用，基本上原因是 setup是在解析其它组件选项之前被调用的，所以 setup内部的的行为与其它选项中的彻头彻尾不同。

Vue3中怎么用instance.proxy.$message

版权Vue文章已被社区收录本文探讨了在 Vue3 项目中怎么用指针， 特别是在处理元素状态时.vue3中获取url地址中的数据，比方说id细小熊汤圆：有没有具体步骤呢vue引入iconfont阿里字体图标库报错和优良决PM是山山啊：朋友你太厉害了我的问题解决了感谢。

在

在

Vue3中怎么用路由方法

你能探讨Vue3中的指向以及怎么正确用它， 还能分享自己在解决问题时遇到的困惑和优良决方案.instance.proxy.$message //类似于$.message在Vue2项目中能用$.router.push等方法进行路由的跳转，但是在Vue3的setup函数里并没有这玩意儿概念，所以呢怎么用路由方法。

本文深厚入探讨了Vue3中替代的方法， 包括用getCurrentInstance、setup函数、provide + inject等。希望这些个内容能帮你更优良地搞懂和应用Vue3。

欢迎验证观点

以上内容是不是对你有所帮？欢迎用实际体验验证观点。