Vue3之组件及生命周期

组件：项目中所有.vue的文件都视为组件

生命周期：相对于vue2，没有beforeCreated和created钩子，用setup代替

vue3钩子函数：

onBeforeMount, onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted

onBeforeMount：无法获取根元素

onMounted：可以获取根元素

onBeforeUpdate： 获取数据更新之前的数据

onUpdated：获取数据更新之后的数据

onBeforeUnmount：销毁组件之前调用

onUnmounted：销毁组件之后调用

以官网的HelloWorld组件为例

<script setup lang="ts">

import { ref, onBeforeMount, onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'

console.log('setup beforeCreated created')

const btn =ref<HTMLDivElement>()

//创建

onBeforeMount(()=>{

  console.log('挂载之前====>',btn.value) //无法获取根元素

})

onMounted(()=>{

  console.log('挂载之后====>',btn.value); //可以获取根元素

})

//更新

onBeforeUpdate(()=>{

  console.log('跟新之前====>',btn.value?.innerText); //获取数据更新之前的数据

})

onUpdated(()=>{

  console.log('跟新之后====>',btn.value?.innerText); //获取数据更新之后的数据

})

//销毁

onBeforeUnmount(()=>{

  console.log('卸载之前====>',);

})

onUnmounted(()=>{

  console.log('卸载之后====>',);

})

defineProps<{ msg: string }>()

const count = ref(0)

</script>

<template>

  <h1>{{ msg }}</h1>

  <div ref="btn">{{count}}</div>

  <div class="card" ref="card">

    <button type="button" @click="count++">count is {{ count }}</button>

  </div>

</template>

<style scoped>

.read-the-docs {

  color: #888;

}

</style>

app.vue

<template>

    <div>

        <HelloWorld msg="Hello World" v-if="flag"></HelloWorld>

        <button @click="flag = !flag">创建+销毁</button>

    </div>

</template>

<script setup lang="ts">

import HelloWorld from './components/HelloWorld.vue';

import {ref} from 'vue'

 let flag = ref<boolean>(true)

</script>

<style scoped lang="less">

</style>