最近在练手vue3的项目,然后就接触了ts。其实并没有使用过ts也没有看过文档,就开始动手了,结果就是一堆报错。
1、使用import引入会报错,找不到模块
还没解决,后期应该解决再更新。
2、数组的定义
一开始使用js的写法写了以下代码
const list= [{name:'111',text:'22222'},{name:'3333',text:'22222'}]
const temp = []
onMounted(() => {
list.forEach(async (item:any,index)=>{
temp.push(item)
})
})
输出报错:Argument of type ‘‘ is not assignable to parameter of type ‘never‘.
然后,我就在想是不是要用ref或者reactive定义,没错,此刻我还觉得是我vue3的语法错误,直到我使用ref和reactive依然报错时,我才意识到可能是ts语法的错误。
然后就是一顿百度,才知道,原来ts初始化的时候要完善一下定义类型,我就给item加上了类型,还是报错,我就把目光移向了我定义的数组,一顿操作:
const list: any[] = [{name:'111',text:'22222'},{name:'3333',text:'22222'}]
const temp: any[] = []
onMounted(() => {
list.forEach(async (item:any,index)=>{
temp.push(item)
})
})
return{
list,temp
}
不报错了!此处vue3需要注意的是,定义的数据要放在onMounted的外面,否则可能访问不到。
3、使用nextTick
//vue2的写法
this. $nextTick(()=>{
})
//vue3的写法
import {defineComponent, ref, reactive,onMounted,nextTick} from 'vue';
export default defineComponent({
setup() {
nextTick(()=>{
})
}
})