vue3+ts 踩坑之路[1]_vue3 ts this-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41700532/article/details/125175365

在拥抱Vue3和TypeScript的新技术旅程中，开发者遇到了一些挑战。在尝试实现获取IP地址功能时，虽然解决了TS报错，但发现第三方库定位不准的问题。在路由跳转传递包含数组的参数时，遇到了TS类型检查的错误。此外，挂载全局变量和使用getCurrentInstance()，以及理解ref和reactive在响应式数据中的应用，都是开发者在实践过程中遇到的难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拥抱新的技术之旅，充满了坎坷！官方文档yyds…
typescript文档
 vue3文档

坑1场景：最近各大软件展示ip地址的功能大火，于是我自己搭建项目，想用上这个功能，一般都是后台获取返回到前端，但前端也有方法获取;
网上top1【简便】：引入搜狐家的

在index.html引入:
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
var curIp = returnCitySN["cname"]//获取

以上是常规写法，但是ts会报红【Cannot find name ‘returnCitySN’】;正确写法如下【这只是其中一种，还有别的，可自行百度】

var curIp = (window as any).returnCitySN;

虽然代码是没问题了，但是吧，经过测试，这就是一个坑，定位不那么准，换了部笔记本，换了所在位置，嘿，定位返回的地址直接CHINA，但是ip还是正确的，由于没有找到它家官方文档，所以也不知道为什么会这样！所以还是换一个！！！

坑2场景：路由跳转传参；数据当时是在a页面直接用params传的，里面有一个数组，所以数组用JSON.stringify转了，b页面接收用JSON.parse转回去；

a页面(vue3里，this.$router变成了useRouter())
const router = useRouter();
let data = {a:1,b:[1,2,3]};
data["b"] = JSON.stringify(data.b);
router.push({name:'b',params:data});
b页面
let routeParams = {};
Object.keys(route.params).forEach(item => {
    if(item!=='b'){
        routeParams[item] = route.params[item];
    }else{
        routeParams["b"] = JSON.parse(route.params.b);
    }
})

这种b页面接收的时候ts是不通过的；需要先去判断b；
【Argument of type ‘string | string[]’ is not assignable to parameter of type ‘string’.Type ‘string[]’ is not assignable to type ‘string’.】

b页面正确写法：
let routeParams = {};
Object.keys(route.params).forEach(item => {
    if(item!=='b'){
        routeParams[item] = route.params[item];
    }else{
    	if(!Array.isArray(route.params.process)) {
        	routeParams["b"] = JSON.parse(route.params.b);
        }else{
        routeParams["b"] = route.params.b;
        }
    }
})

坑3场景：挂载全局变量并在页面使用；
vue3写法：

main.js
app.config.globalProperties.$xxx= xxx;

页面上使用的时候必要用getCurrentInstance()

const instance = getCurrentInstance()；
const cur = instance.appContext.config.globalProperties.$xxx;

坑4场景:vue3响应数据；ref跟reactive;
ref改变值：

const visible = ref<boolean>(false);
visible.value = true;

reactive改变值：

const dataJson= reactive<{a:string,b:boolean}>({
   a:'1',
   b:false
});
dataJson.a= '2;
这里可以用接口
interface jsonType{
   a:string,
   b:boolean
}
const dataJson= reactive<jsonType>({
   a:'1',
   b:false
});
dataJson.a= '2;

需要注意的是reactive的参数只能是对象，不然是无法响应的；
ref跟reactive分别的应用场景，用的不多，体会还不大

暂时就踩了这么多，踩坑之路无尽头。。