说明：本篇文章基础说明一下vue3.2项目使用typescript的使用问题，文档链接↓
说明2： 为什么使用是vue3.2？因为3.2以后直接可以在script标签上使用setup声明；推荐直接看文档
vue3.x初始化数据
- 使用ref进行声明
vue3可以通过ref和reactive进行数据的初始化，官方建议ref进行简单数据类型的声明，reactive进行复杂数据类型的声明，例如：对象
具体声明如下(ts版本):
<template>
<div>
<div>ref初始化声明示例:</div>
<div>{{name}} ---- {{age}} ---- {{lineState}}</div>
</div>
</template>
<script setup lang="ts">
// 也可以使用泛型这种声明方式，但是泛型这种声明方式在reactive类型中解构会出现问题，所以可以统一使用下面的类型声明方式
// const age = ref<number>(30)
import { ref } from 'vue';
import type { Ref } from 'vue' // vue官方的type
const name: Ref<string> = ref('tree')
const age: Ref<number> = ref(30)
const lineState: Ref<boolean> = ref(false)
</script>
编辑切换为居中
添加图片注释，不超过 140 字（可选）
- 使用reactive声明
<template>
<div>
<ul>
<li v-for="(item, i) of book" :key="i">{{item}}</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
interface Book {
title: string // 书名
price: number // 价格
desc: string // 描述
}
// 注意：对象这种现在可以使用of的迭代器方法进行渲染
const book:Book = reactive(
{
title: "百年孤独",
price: 30.3,
desc: "他是个强有力的作家，有着丰富的想象。他继承了欧洲政治小说的伟大传统，其结果是历史剧与个人戏剧合二为一"
}
)
</script>
编辑切换为居中
添加图片注释，不超过 140 字（可选）
vue3.x中事件的触发(ts参数类型限制)
<template>
<div>
<div>reactive声明示例:</div>
<ul>
<li
v-for="(item, i) of book"
:key="i"
@click="getBook(item)"
>{{item}}</li>
</ul>
<elButton @click="handleButton">trigger</elButton>
<elButton @click="handleButtonParam('construct')">triggerParam</elButton>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
interface Book {
title: string // 书名
price: number // 价格
desc: string // 描述
}
const book:Book = reactive(
{
title: "百年孤独",
price: 30.3,
desc: "他是个强有力的作家，有着丰富的想象。他继承了欧洲政治小说的伟大传统，其结果是历史剧与个人戏剧合二为一"
}
)
// 如果是获取多个参数，可以使用interface或者type对类型进行限制
const getBook = (book: Book) => {
console.log(book)
}
// 无参数
const handleButton = () => {
console.log("事件已触发")
}
const handleButtonParam = (name: string) => {
console.log(`有参数触发${name}`)
}
</script>
vue3.x computed计算属性的使用
<template>
<div>
<div>computed计算属性的示例：</div>
<div>ref声明的属性：{{num}} --- computed 计算之后的属性值:{{double}}</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import type { Ref } from 'vue'
const num: Ref<number> = ref(11)
const double = computed<number>(() => num.value * 2) // 可以点进去看一下源码是怎样实现的
</script>
编辑切换为居中
添加图片注释，不超过 140 字（可选）
vue3.x defineProps的使用(接收传过来的属性)
父组件：
<template>
<div>
<Second bookName="百年孤独" :price="55" />
</div>
</template>
<script setup lang="ts">
import Second from './Second.vue'
</script>
子组件：
<template>
<div>
Second组件接收参数
<div>{{bookName}} -- {{price}}</div>
</div>
</template>
<script setup lang="ts">
import { defineProps } from "vue";
interface book {
bookName?: string
price?: number | string
}
const props = defineProps<book>()
console.log(props.bookName, props.price)
</script>
编辑切换为居中
添加图片注释，不超过 140 字（可选）
vue3.x setup 生命周期使用
setup 生命周期的使用cn.vuejs.org/api/composition-api-lifecycle.html
vue3.x provice/inject 使用注入的的方式获取属性
父组件：
<template>
<div>
</div>
</template>
<script setup lang="ts">
import { provide } from "vue";
/*provide inject*/
provide<string>("keys", "provide数据")
provide<Array<number>>("lists", [0, 1, 2])
</script>
子组件：
<template>
<div>
</div>
</template>
<script setup lang="ts">
import { inject } from "vue";
const foo = inject<string>("keys")
console.log(foo) // provide数据
const lists = inject<Array<number>>("lists")
console.log(lists) // [0, 1, 2]
</script>
vue3.x 使用defineEmits
子组件 goods组件：
<template>
<div>
<div>Goods</div>
<el-button @click="changeEmit">Home son button emit</el-button>
</div>
</template>
<script setup lang="ts">
import { defineEmits } from "vue";
const emit = defineEmits(['changeEmits'])
const changeEmit = () => {
emit('changeEmits', "son的数据")
}
</script>
父组件 Home组件：
<template>
<div>
<div>Homes</div>
<Goods @changeEmits="getchangeEmits" />
</template>
<script setup lang="ts">
import Goods from "./Goods.vue"
const getchangeEmits = (data:string) => {
console.log("子组件", data)
}
</script>
vue3.x 使用接口请求并渲染数据(使用ref声明和reactive两种声明方式获取数接口返回的数据)
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import type { Ref } from "vue";
onMounted(() => {
getFetchSource()
})
type resType = {
avatar_url: string
events_url: string
followers_url: string
following_url: string
gists_url: string
gravatar_id: string
html_url: string
id:number
login: string
node_id: string
organizations_url: string
received_events_url: string
repos_url: string
site_admin: boolean
starred_url: string
subscriptions_url: string
type: string
url: string
}[]
const dataList = reactive({list: [] as resType || null})
const dataListRef = ref<resType>([])
const getFetchSource = async() => { // 实际开发需要处理不同code
const res = await fetch("https://api.github.com/users?since=100")
const result = await res.json()
dataList.list = result
dataListRef.value = result
}
</script>
<template>
<div>
<div>Homes</div>
<i>dataList reactive 🍃</i>
<ul>
<li v-for="item in dataList.list" :key="item.id">
{{ item.id }}--{{ item.login }}--{{ item.node_id }}
</li>
</ul>
<br/>
<i>dataListRef 🍃</i>
<ul>
<li v-for="item in dataListRef" :key="item.id">
{{ item.id }}--{{ item.login }}--{{ item.node_id }}
</li>
</ul>
</div>
</template>
持续更新中......
