vue3（二）

1、ref标签
2、TS中的接口、泛型、自定义类型
3、props父子组件传递数据
4、组件的生命周期
5、初识axios
6、自定义Hooks
7、配置路由的步骤

1、ref标签
ref放在普通html标签上拿到的是DOM元素，放在组件标签上拿到的是组件实例对象
假设有如下代码，要求输出h2标签里的内容

<template>
    <div class = "person">
        <h1 id="title1">China</h1>
        <h2 id="title2">beijing</h2>
        <button @click="showLog">点击此处输出h2标签的内容</button>
    </div>
</template>

以下做法是错误的，因为id为title2的标签可能有多个，可能出现在别的vue文件中

    function showLog(){
        console.log(document.getElementById('title2'));
    }

正确做法：

<template>
    <div class = "person">
        <h1 id = "title1">China</h1>
        <h2 ref = "title2">beijing</h2>
        <button @click="showLog">点击此处输出h2标签的内容</button>
    </div>
</template>

<script lang = "ts">
import { ref } from 'vue';
export default{
    name: "Person",
    setup(){
        let title2 = ref();
        function showLog(){
            console.log(title2.value);
            //试试把<style>改成<style scoped>，看看输出的结果会是什么
        }
        return {
            title2,
            showLog,
        }
    }
}
</script>

<style>
div.person{
    margin: 50px;
}
</style>

2、TS中的接口、泛型、自定义类型

//文件Person.ts
export interface PersonInter {
    id: string,
    name: string,
    age: number,
}

//文件Person.vue
<script lang = "ts">
import { type PersonInter } from '@/types/Person';
export default{
    name: "Person",
    setup(){
        //用接口定义一个对象
        let person_z:PersonInter = {id: 'Lihua', name: "李华", age: 18 };
        //以下是泛型的写法：
        let personList:Array<PersonInter> = [
            {id: 'LiMing', name: "李明", age: 22 },
            {id: 'LiXiang', name: "李想", age: 23 }
        ];
    }
}
</script>

自定义类型的写法：

//在文件Person.ts中后面加上内容：
export type Persons = Array<PersonInter>
//并在Person.vue中做相应修改

3、props父子组件传递数据
（后面有详细讲数据传递）
父组件向子组件传递数据
defineProps只能用于<script lang = "ts" setup name="Person">标签！！！

//父组件：App.vue
<template>
  <Person :mylist = "personList" /> <!--写在标签里的变量是要传给子组件的变量-->
</template>

<script lang = "ts">
import Person from './components/Person.vue';
import { reactive } from 'vue'
export default{
  setup(){
    let personList = reactive([
      {id: 'LiMing', name: "李明", age: 22 },
      {id: 'LiXiang', name: "李想", age: 23 },
      {id: 'Lihua', name: "李华", age: 18 }
    ]);
    return{
      personList,
    } 
  },
  components:{
    Person,
  }
}
</script>

//子组件：Person.vue
<template>
    <div class = "person">
        {{ mylist }}
    </div>
</template>

<script lang = "ts">
import { toRaw } from 'vue';
export default{
    name: "Person",
    props: ['mylist'],//props里的数据是只读的
    setup(props){
        let x = toRaw(props.mylist);//toRaw的作用是把proxy数据转化成普通javascript数据
        console.log(x[0]);
    }
}
</script>

<style>
div.person{
    margin: 50px;
}
</style>

4、组件的生命周期

在vue2中的每个阶段，都会调用指定的生命周期函数

创建	beforeCreate	created
挂载	beforeMounted	mounted
更新	beforeUpdate	updated
销毁	beforeDestory	destoryed

在vue3中的每个阶段，都会调用生命周期函数指定的函数，这些生命周期函数被称为钩子函数，这些生命周期函数的参数是一个回调函数。也就是说，在vue3的每个生命周期阶段都会调用钩子函数所指定的回调函数。

创建	setup
挂载	onBeforeMounted	onMounted
更新	onBeforeUpdate	onUpdated
卸载	onBeforeUnmount	onUnmounted

先挂载的是子组件，后挂载父组件。

5、初识axios

<template>
    <div class = "person">
        <img class="img-dog" v-for="(i,index) in doglist" :key="index" :src="i">
        <br>
        <button @click="display">huang</button>
    </div>
</template>

<script lang = "ts">
import { reactive } from 'vue';
import axios from 'axios';

export default{
    name: "Person",
    setup(){
        let doglist = reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_4796.jpg']);
        
        function display(){
            getDog();
        }

        async function getDog(){
            try{
                let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random');            
                console.log(result)
                doglist.push(result.data.message)
            }catch(error){
                alert("获取失败")
            }
        }
        return {
            doglist,
            display,
        }
    }
}
</script>

<style>
div.person{
    margin: 50px;
}
img.img-dog{
    margin-right: 5px;
}
</style>

6、自定义Hooks
使用hooks进行模块化开发，把一种或一类的数据和方法组合起来，这正是vue3组合式API与vue2的选项式API的不同之处

//本文件存储在src/hooks/useDog.ts中
import { reactive } from 'vue';
import axios from 'axios';

export function useDog() {
    let doglist = reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_4796.jpg']);
            
    function display(){
        getDog();
    }

    async function getDog(){
        try{
            let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random');
            doglist.push(result.data.message)
        }catch(error){
            alert("获取失败")
        }
    }

    return {
        doglist,
        display
    }
}

//本文件存储在src\components\Person.vue中
<template>
    <div class = "person">
        <img class="img-dog" v-for="(i,index) in doglist" :key="index" :src="i">
        <br>
        <button @click="display">点击此处获取狗</button>
    </div>
</template>

<script lang = "ts">
import { useDog } from '@/hooks/useDog';
export default{
    name: "Person",
    setup(){
        const { doglist,display } = useDog();
        return {
            doglist,
            display,
        }
    }
}
</script>

<style>
div.person{
    margin: 50px;
}
img.img-dog{
    margin-right: 5px;
}
</style>

7、配置路由的步骤
（1）安装路由命令npm i vue-router

（2）编写各路径对应的各种component

（3）编写index.ts文件，一般格式如下。

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';

const router = createRouter({
    history: createWebHistory(),    //  路由器的工作模式
    routes: [   //  路由规则
        {
            path: '/home',
            name: 'home',
            component: HomeView
        }
    ]
})
export default router

（4）在vue的入口（main.ts）里引入路由

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'  //  本行新加的

const app = createApp(App)
app.use(router)                //  本行新加的
app.mount('#app')

（5）在App.vue中放置路由

//本文件是App.vue
<template>
    <RouterLink to="/home" active-class="xiao">点击此处回主页</RouterLink>
    <br>
    <RouterLink to="/about" active-class="zhu">点击此处显示关于</RouterLink>
    <br>
    <RouterLink to="/news" active-class="peiqi">点击此处显新闻</RouterLink>
  `    <!-- 普通标签写herf，RouterLink标签写to，或者 :to="{name:""}" -->`
   <router-view />
</template>

<script lang = "ts">
import RouterView from 'vue-router'
export default{
}
</script>