Vue学习记录之五（组件/生命周期）

一、组件

在每一个.vue文件可以看作是一个组件，组件是可以复用的，每个应用可以看作是一棵嵌套的组件树。

在Vue3中，组件导入以后即可直接使用。

二、组件的生命周期

生命周期就是从诞生(创建)到死亡(销毁) 的过程。

Vue3 组合式API中(setup语法糖模式)，是没有beforeCreate 和 created 这两个过程的。可以使用setup去代替。

运行流程

ts 复制代码

<template>
    <div>
    </div>
</template>
<script setup lang='ts'>
import { ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
console.log("setup")
//创建
onBeforeMount(()=>{
  console.log("创建之前==========")
})
onMounted(()=>{
  console.log("创建完成==========")
})
//更新的钩子
onBeforeUpdate(()=>{
  console.log("更新组件之前==========")
})
onUpdated(()=>{
  console.log("更新组件完成==========")
})
// 销毁的钩子
onBeforeUnmount(()=>{
  console.log("销毁之前==========")
})
onUnmounted(()=>{
  console.log("销毁完成==========")
})

</script>
<style scoped>

</style>

ts 复制代码

<template>
    <div ref="getdiv">{{ name }}</div>
    <button @click="change">修改name</button>
</template>
<script setup lang='ts'>
import { ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
console.log("setup")
const name = ref("lvmanba")
const getdiv = ref<HTMLDivElement>()  //注意这里的变量名要和上面的ref属性的名称一致。
const change = () =>{
  name.value = "bird"
}
/*
1、在onMounted之前读取不到dom, onMounted可以读取到。
2、有内容更新的时候，才能触发onBeforeUpdate 和 onUpdated, 如上面点击修改内容的时候
3、onBeforeUpdate 是获取更新之前的dom,onUpdated才能获取更新之后的内容
*/
//创建
onBeforeMount(()=>{
  console.log("创建之前==========",getdiv.value)  //创建之前是undefined
})
onMounted(()=>{
  console.log("创建完成==========",getdiv.value) //这里可以获取到值
})
//更新的钩子
onBeforeUpdate(()=>{
  console.log("更新组件之前==========",getdiv.value?.innerHTML) //更新之前是lvmanba,也就是内容还没有被修改。
})
onUpdated(()=>{
  console.log("更新组件完成==========",getdiv.value?.innerHTML) // 更新之后是bird
})
// 销毁的钩子
onBeforeUnmount(()=>{
  console.log("销毁之前==========")
})
onUnmounted(()=>{
  console.log("销毁完成==========")
})

</script>

使用销毁功能：

下面的是插件A.vue

ts 复制代码

<template>
    <div ref="getdiv">{{ name }}</div>
    <button @click="change">修改name</button>
</template>
<script setup lang='ts'>
import { ref,
    onBeforeMount,onMounted,
    onBeforeUpdate,onUpdated,
    onBeforeUnmount,onUnmounted,
    onRenderTracked,onRenderTriggered
 } from 'vue'
console.log("setup")
const name = ref("lvmanba")
const getdiv = ref<HTMLDivElement>()  //注意这里的变量名要和上面的ref属性的名称一致。
const change = () =>{
  name.value = "bird"
}
/*
1、在onMounted之前读取不到dom, onMounted可以读取到。
2、有内容更新的时候，才能触发onBeforeUpdate 和 onUpdated, 如上面点击修改内容的时候
3、onBeforeUpdate 是获取更新之前的dom,onUpdated才能获取更新之后的内容
*/
//创建
onBeforeMount(()=>{
  console.log("创建之前==========",getdiv.value)  //创建之前是undefined
})
onMounted(()=>{
  console.log("创建完成==========",getdiv.value) //这里可以获取到值
})
//更新的钩子
onBeforeUpdate(()=>{
  console.log("更新组件之前==========",getdiv.value?.innerHTML) //更新之前是lvmanba,也就是内容还没有被修改。
})
onUpdated(()=>{
  console.log("更新组件完成==========",getdiv.value?.innerHTML) // 更新之后是bird
})
// 销毁的钩子
onBeforeUnmount(()=>{
  console.log("销毁之前==========")
})
onUnmounted(()=>{
  console.log("销毁完成==========")
})
onRenderTracked((e)=>{
    console.log("onRenderTracked:",e)
})
onRenderTriggered((e)=>{
    console.log("onRenderTriggered:",e)
})

</script>

入口文件App.vue

引入组件，并展示组件。

ts 复制代码

<template>
    <div>
      <!--
        当一个组件绑定了v-if,会触发组件的创建和销毁。v-show 无此功能。
      -->
      <A v-if="flag"></A> <br><br>
      <button @click="flag = !flag">{{ flag == true? "销毁":"创建"}}</button>
    </div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
import A from './components/A.vue';
const flag = ref<boolean>(false)
</script>

下面是有一个完整的生命周期：

其次还有 onRenderTracked,onRenderTriggered 两个钩子，主要是用来调试使用的。