首页 前端知识 初步使用vue3 ts的错误

初步使用vue3 ts的错误

2024-05-14 23:05:08 前端知识 前端哥 822 306 我要收藏

最近在练手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(()=>{
            })

        }
})
						
转载请注明出处或者链接地址:https://www.qianduange.cn//article/8676.html
标签
评论
发布的文章

video 自定义视频播放控件

2024-05-26 01:05:25

HTML5 画布绘制海报

2024-05-26 01:05:13

HTML5学习(三)

2024-05-26 01:05:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!