vue3 + ts项目
创建的还是vite
项目,之前没有使用ts,所以创建项目命令: yarn create vite first-vite-demo --template vue
。 现在如果要在项目中添加ts,只需要在命令最后加上-ts: yarn create vite demo-name --template vue-ts
这样创建出来的项目,main.js也已经变成了main.ts
项目结构:
然后现在的.vue
组件中,<script>
上需要添加lang="ts
。
因为使用命令创建完项目后,会自动生成tsconfig.json
。不过这里关于tsconfig.json
配置也可以根据自己需求调整,可以参考
- vue3官网文档:v3.cn.vuejs.org/guide/types…
- typescript中文网:www.tslang.cn/docs/handbo…
TS模块声明
在ts中,有类型声明的特性,在vue3+ts项目中,会看到一个env.d.ts
文件,此文件中声明了*.vue
declare module '*.vue' {import type { DefineComponent } from 'vue'// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-typesconst component: DefineComponent<{}, {}, any>export default component
}
如果将其注释掉,会发现main.ts
中出现红色波浪线报错:
resolve.alias别名
在引用文件时,可以使用相对路径的方式,但是这样嵌套的页面非常复杂,有可能会造成多个层级../../../
这种引用情况,所以有时候可以通过配置resolve.alias
别名来进行缓解。
在vite.config.ts
文件中,引入path
中的resolve
,然后在defineConfig
写入配置的相对路径:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': resolve(__dirname, './src')}}
})
这样调用路径时就可以使用@
来引入
PS:如果这样在ts项目中还未成功,可以在
tsconfig.json
的compilerOptions
进行配置"baseUrl": ".", "paths": { "@/*":["src/*"] }
ref和reactive
ref: 接受一个内部值并返回一个响应式且可变的 ref
对象,ref
底层其实还是reactive
,所以当运行时系统会自动根据传入的ref
转换成reactive
这是为了实现数据响应式,如果单纯对变量定义为一个数据,是不会在template
中实现数据响应式变动的。
比如:
<template>
{{ count }}
</template>
<script setup lang="ts"> import { ref, reactive } from "vue";let count = 10setInterval(()=>{count++;}, 1000) </script>
最终界面上依旧是10,setInterval产生的变动并没有实时更新。
而如果count做ref的定义,那么界面上数据就会实时更新
<script setup lang="ts">import { ref, reactive } from "vue";// ref就是某个元素,简单数据类型,reactive对象let count = ref(10)setInterval(()=>{count.value++;}, 1000)
</script>
如果想要像以前Vue2一样,通过refs.refname获取元素,也要稍作改变
<template><div class="Box" ref="Box"></div>
</template>
<script setup lang="ts"> import { ref, reactive, onMounted } from "vue";// 名称要与节点上ref名称一致let Box = ref(null)onMounted(()=>{// setup执行时机比mounted早,此时界面dom还没形成console.log(Box.value)}) </script>
而reactive
是用来定义更复杂的数据类型的,以下是reactive的具体示例
<template><div class="Box" ref="Box">{{ users[0] }}</div>
</template>
<script setup lang="ts"> import { ref, reactive, onMounted, toRefs } from "vue";interface personInfo {name: string,age: number,hobby: ()=>void}let users: personInfo[] = reactive([{name: '张三',age: 18,hobby: ()=>{ console.log('打李四') }}])let refUsers = toRefs(users);setInterval(()=>{refUsers[0].value.age++;},1000) </script>
效果:
以上是使用reactive
定义对象,实际上reactive
也可以包裹ref,比如:
<template><div class="Box" ref="Box">{{ count }}</div>
</template>
<script setup lang="ts"> import { ref, reactive, onMounted, toRefs } from "vue";let count = ref(10)let countRef = reactive({count})console.log(countRef)setInterval(()=>{countRef.count++;},1000) </script>