this和this.$router这个方法在setup()里使用竟然是undefined----使用composition-api踩到的坑总结篇

vue的版本是2，使用插件composition-api尝试组合式api

1. this和this.$router这个方法在setup()里直接使用竟然是undefined

我是这么写的

setup() {console.log(this)//undefinedconsole.log(this.$router)//error
}

控制台告诉我显然有问题，但是我在另一个完成的vue页面里在setup()的方法里使用了this.$router，发现可以正常使用

setup() {function routeBack() {this.$router.go(-1)console.log(this.$router)}
}

这是为什么呢？

当我在setup函数后，接上mounted()，发现this指向的函数又回来了

setup(){//...
},
mounted() {console.log(this)console.log(this.$router)
}

仔细想了下，在setup()直接使用相当于在created和oncreated时调用，此时this的值还没被挂载，应当就是undefined.但是第二段代码为什么生效呢？因为此时this已经被挂载，可以在函数中使用。

所以大家在尝试这个插件的时候，需要注意。

或许直接使用vue3.0和router就不需要这么麻烦啦。

this和this.$router这个方法在setup()里使用竟然是undefined----使用composition-api踩到的坑总结篇相关推荐

页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则
页面导航的两种方式 vue-router编程式导航编程式导航基本用法 <!DOCTYPE html> <html lang="en"><head&g ...
this.$router.push方法，父子如何传值和接收值
vue路由this.$router.push传参 query传参页面刷新会出现undefined的问题(仅针对query传参) params传参两种传参方式的区别 query传参点击一个按钮想跳 ...
vue3学习笔记 Composition API setup
一.Composition API优势相对于vue2的option API Vue3的Composition API设计更有优势 Composition(组合式)Api 功能分组 Compositi ...
Vue3 Composition API（三）——生命周期钩子、Provide函数和 Inject函数、封装Hook案例、setup顶层编写方式
一.生命周期钩子我们前面说过 setup 可以用来替代 data . methods . computed .watch 等等这些选项,也可以替代生命周期钩子. 那么setup中如何使用生命周期函 ...
Vue3 Composition API（二）——computed、watchEffect、setup中使用ref
一.computed 在前面我们讲解过计算属性computed:当我们的某些属性是依赖其他状态时,我们可以使用计算属性来处理在前面的Options API中,我们是使用computed选项来完成的: ...
Vue3 Composition API（一）——setup、reactive、ref、readonly
一.Options API的弊端在Vue2中,我们编写组件的方式是Options API: Options API的一大特点就是在对应的属性中编写对应的功能模块: 比如data定义数据.method ...
vue3组合式Composition API之setup函数的具体用法
vue3拉开序幕的setup 理解:Vue3.0中一个新的配置项,值为一个函数. setup是所有Composition API(组合API)" 表演的舞台 ". 组件中所用到的: ...
张宏：移动机器人全局定位技术与方法是啥？道翰天琼认知智能机器人平台API接口大脑为您揭秘。
张宏 :移动机器人全局定位技术与方法是啥?道翰天琼认知智能机器人平台API接口大脑为您揭秘. 人工智能不仅要复现人类的大脑,还要构建容纳智能大脑的身体,机器人将是人工智能的完全体.8月7日-8月9日, ...
软件方法（下）分析和设计第9章分析之分析类图——案例篇（20211228更新）
软件方法(下)分析和设计第8章分析之分析类图--知识篇(20211227更新) 鸳鸯扣,宜结不宜解 <身似摇红烛影>,词:唐涤生,曲:王粤生,唱:红线女,1954 可到此处下载本文档最 ...

this和this.$router这个方法在setup()里使用竟然是undefined----使用composition-api踩到的坑总结篇

这是为什么呢？

this和this.$router这个方法在setup()里使用竟然是undefined----使用composition-api踩到的坑总结篇相关推荐

最新文章

热门文章