vue3-标签的ref属性,props的使用,vue3的生命周期详解

标签的ref属性

若ref加在HTML上面 获取的是DOM节点

<template>
    <div class="person">
        <h1 ref="title1">小聂</h1>
        <h2 ref="title2">学习</h2>
        <h3 ref="title3">vue3</h3>
        <button @click="show">点我输出h1这个元素</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import { ref} from 'vue';

    //创建title1  用于存储ref标记的内容
    let title1=ref()


    function show(){
        console.log(title1.value)
    }


</script>


<style>
    .person{
        background-color: rebeccapurple;
        box-shadow: 0 0 10px;
        padding: 20px;
        border-radius: 10px;
    }
    button{
        margin: 0 6px;
    }

    img{
        height: 100px;
    }
</style>

点击之后 成功展示出h1里面的内容

若ref加到组件上面的时候

注意 只有里面写了这个defineExpose({x,z}) 才能让父组件看到 x 和z 如果不写 则看不到 这是vue3的保护措施

<template>
    <h2 ref="title2">你好啊,小聂</h2>
    <button @click="showLog">测试展现</button>
    <Person ref="ren"/>
</template>

<script lang="ts" setup name="App">
import Person from './components/Person.vue';
import { ref } from 'vue';

    let title2 =ref()

    let ren=ref()

    function showLog(){
        console.log(ren.value)
    }
</script>

<style>

</style>

<template>
    <div class="person">
        <h1 ref="title1">小聂</h1>
        <h2 ref="title2">学习</h2>
        <h3 ref="title3">vue3</h3>
        <button @click="show">点我输出h1这个元素</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import { ref,defineExpose} from 'vue';

    //创建title1  用于存储ref标记的内容
    let title1=ref()
    let x=ref(0)
    let y=ref(1)
    let z=ref(2)

    function show(){
        console.log(title1.value)
    }

    //需要告诉父组件  你可以看什么
    defineExpose({x,z})
</script>


<style>
    .person{
        background-color: rebeccapurple;
        box-shadow: 0 0 10px;
        padding: 20px;
        border-radius: 10px;
    }
    button{
        margin: 0 6px;
    }

    img{
        height: 100px;
    }
</style>

如果不写这句话 defineExpose({x,z}) 的结果就是这样的

props的使用

App.vue的内容

<template>
    <Person :list="persons"/>
</template>

<script lang="ts" setup name="App">
    import Person from './components/Person.vue';
    import { reactive } from 'vue';
    import {type Persons} from '@/types';

    let persons =reactive<Persons>([
        {id:'dadadada1',name:'路飞',age:18},
        {id:'dadadada2',name:'索隆',age:19},
        {id:'dadadada3',name:'白胡子',age:50}
    ])

    

</script>

<style>

</style>

person.vue的内容

1-只接收

<template>
    <div class="person">
       <ul>
        <li v-for="item in list" :key="item.id">
            {{item.name}}--{{item.age}}
        </li>
       </ul>
    </div>
</template>

<script lang="ts" setup name="Person">
    import {type personInter} from '@/types'
    
    //1-只接收
    const props=defineProps(['list'])


    
</script>


<style>
    .person{
        background-color: aqua;
        box-shadow: 0 0 10px;
        padding: 20px;
        border-radius: 10px;
    }
    button{
        margin: 0 6px;
    }

    img{
        height: 100px;
    }
</style>

2-接收+限制类型

<template>
    <div class="person">
       <ul>
        <li v-for="item in list" :key="item.id">
            {{item.name}}--{{item.age}}
        </li>
       </ul>
    </div>
</template>

<script lang="ts" setup name="Person">
    import {type personInter, type Persons} from '@/types'
    
    //1-只接收
    // const props=defineProps(['list'])

    //2-接收+限制类型
    defineProps<{list:Persons}>()
    
</script>


<style>
    .person{
        background-color: aqua;
        box-shadow: 0 0 10px;
        padding: 20px;
        border-radius: 10px;
    }
    button{
        margin: 0 6px;
    }

    img{
        height: 100px;
    }
</style>

3-接收+限制类型+指定默认值+限制必要性

<template>
    <div class="person">
       <ul>
        <li v-for="item in list" :key="item.id">
            {{item.name}}--{{item.age}}
        </li>
       </ul>
    </div>
</template>

<script lang="ts" setup name="Person">
    import {type personInter, type Persons} from '@/types'
    
    //1-只接收
    // const props=defineProps(['list'])

    //2-接收+限制类型
    // defineProps<{list:Persons}>()

    //3-接收+限制类型+指定默认值+限制必要性
    let props = withDefaults(defineProps<{list?:Persons}>(),{
        list:()=>[{id:'asdasg01',name:'黑胡子',age:100}]
    })
    console.log(props)
    
</script>


<style>
    .person{
        background-color: aqua;
        box-shadow: 0 0 10px;
        padding: 20px;
        border-radius: 10px;
    }
    button{
        margin: 0 6px;
    }

    img{
        height: 100px;
    }
</style>

vue3的生命周期

• 创建阶段
  setup
• 挂载阶段
  挂载前 ------- 挂载完毕
  onBeforeMount ------- onMounted
• 更新阶段
  更新前 ------- 更新完毕
  onBeforeUpdate ------- onUpdated
• 卸载阶段
  卸载前 ------- 卸载完毕
  onBeforeUnmount ------- onUnmounted

<template>
    <div class="person">
        <h1>当前的高度为{{ height }}</h1>
        <button @click="addHeigtht">点我高度加一 </button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import { ref,onBeforeMount,onMounted,onBeforeUpdate ,onUpdated,onBeforeUnmount,onUnmounted} from 'vue';

    let height=ref(0)
    
    function addHeigtht(){
        height.value+=1
    }

    onBeforeMount(()=>{
        console.log('挂载前')
    })

    onMounted(()=>{
        console.log('挂载完毕')
    })

    onBeforeUpdate(() => {
        console.log('更新前')
    })

    onUpdated(()=>{
        console.log('更新完毕')
    })

    onBeforeUnmount(()=>{
        console.log('卸载前')
    })

    onUnmounted(()=>{
        console.log('卸载完毕')
    })
    

</script>


<style>
    .person{
        background-color: aqua;
        box-shadow: 0 0 10px;
        padding: 20px;
        border-radius: 10px;
    }
    button{
        margin: 0 6px;
    }

    img{
        height: 100px;
    }
</style>

当我们刚进入页面的时候 控制台打印挂载前 挂载完毕

当我们点击按钮的时候 控制台会答应更新前 更新完毕