Vue3学习 Day03

标签的ref属性

用ref标记dom元素

取代了用id来标识标签，因为用id来标识标签，如果父组件和子组件中有id一样的，会引起混淆。

用ref标记组件

子组件

向父亲暴露name，age，classroom（非响应式）            sex不暴露 

父组件

得到子组件的实例，测试按钮用于测试能否获取子组件的数据

测试 

TS中的接口，泛型

****************************************************************************************

在src中新建一个和组件文件夹同级的types文件夹，里面写ts文件

定义一个学生接口，用于规范学生内的成员（记得导出）

****************************************************************************************

使用接口规范数据格式

*****************************************************************************************************

 

集合可用泛型

 *************************************************************************************************

 age 加上一个 ? 表示这个字段是可选的

 

没有age也不报错 

***************************************************************************

reactive直接传泛型也可以

props的使用(父组件给子组件传数据)

第一种：接收并保存到props里面

父组件

子组件

 

测试 

第二种:接收+限制类型

父组件

同上

如果父组件给出的数据和子组件要求的不一样，会报错 

子组件

测试

同上

第三种:

父组件

故意不传myList 

子组件

怎么写：第二种情况的语句  作为withDefaults的 第一个参数，第二个参数用大括号包裹（因为有多个不同类型的数据，是对象）起来，里面 key: value   其中value要用返回值的形式给出（这里用箭头函数） 

测试

Vue的生命周期

总的概述

 测试Vue3的生命周期

父组件

<!-- 父组件App.vue -->
<template>
    <TestVueLifeCycle></TestVueLifeCycle>
</template>
  
<script lang="ts" setup name="App">
    import TestVueLifeCycle from './components/TestVueLifeCycle.vue';
    import { onBeforeMount,onMounted } from 'vue';


    onBeforeMount(()=>{
        console.log("父-挂载前")
            })
    onMounted(()=>{
        console.log("父-挂载完成")
    })
   </script>

子组件

<template>
<h2>{{ count }}</h2>
<button @click="f1">点我count+1</button>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import { onBeforeMount,onMounted } from 'vue';//挂载前，挂载完成
    import { onBeforeUpdate,onUpdated } from 'vue';//更新前，更新完成
    import { onBeforeUnmount,onUnmounted } from 'vue';//销毁前，销毁完成

    let count=ref(0)
    function f1(){
        count.value++
    }
    
    console.log("setup完成vue2中创建前，创建完成工作")


    onBeforeMount(()=>{
        console.log("子-挂载前")
            })
    onMounted(()=>{
        console.log("子-挂载完成")
    })

    onBeforeUpdate(()=>{
        console.log("更新前")
    })
    onUpdated((()=>{
        console.log("更新完成")
    }))

    onBeforeUnmount(()=>{
        console.log("销毁前")
    })
    onUnmounted(()=>{
        console.log("销毁完成")
    })
</script>

测试

更新的钩子函数的执行不难理解(执行了两次按钮点击的效果)，那前面的钩子为什么会这样执行呢？

答：

1.运行我们的vue工程，首先来到index.html，这是我们的入口html，它调用了main.ts

 2.来到main.ts，这里调用了App.vue，并尝试创建它并将它挂载到index.html的名为app的div标签下(输出 父-setup  父-挂载前)

 

 3.来到App.vue  它自上而下执行，所以会先执行所有孩子的创建和挂载工作，等所有的孩子都创建和挂载完成后，App.vue才执行onMounted函数