typescript+vue3
typescript
typescript是微软推出的运行的时候. ts编译成JavaScript
typescript是静态类型的语言
typescript有三大特点
强类型
遵循ES6
遵循ES6
typescript变量声明
typescript有自己特有的声明变量方式
ts：any任意类型,void没有返回值,interface接口
<template>
<div class="home">
<h1>vue+ts+setup+volar</h1>
<button @click="addCount(2)">{{ count }}</button>
<button>{{ num }}</button>
<button v-if="flag">{{ str }}</button>
<div v-for="(item, index) in list" :key="index">{{ item }}</div>
</template>
<script lang="ts" setup>
import step from '@/components/StepCom.vue'
import {ref,reactive} from 'vue'
const count = ref<number>(10);
const num = ref(5);
const str = ref<string>("i love ts")
const flag = ref<boolean>(true)
//声明一个接口
interface Iuser {
name: string,
age: number,
pet: undefined | string
}
const list = reactive<Iuser>({ name: "mumu", age: 18, pet: "dog" })
setup
全局配置
app.config.globalProperties.xxx = yyy
setup 使用路由
import {useRouter,useRoute} from ‘vue-router’
const router = useRouter();
const route = useRoute()
//等同于this.$router 和this.$route
组合式api特点
1.更加直观，接近原生js
2.按需加载
3.没有this，降低了耦合性提高复用性
setup（）
相当于created生命周期
需要return返回，在模板中使用
ref值类型 响应对象
const count = ref(5)
在setup访问count值
count.value来访问
//可以作为dom引用
const inp = ref(null)
<p ref = 'inp'>
inp.value.innerText
setup生命周期
onBeforeCreate 创建前
onCreated 创建完毕
onBeforeMount 挂在前
onMounted 挂在完毕
onBeforeUpdate 更新前
onUpdated 跟新后
unBeforeUnmount 卸载前
onUnmounted 卸载完毕
setup(props,context)参数
props 传入参数 （响应式）
