【Vue-Day12】Vue组件的生命周期

Vue2生命周期钩子：

创建前，创建完毕（beforeCreate，created）

挂载前，挂载完毕（beforeMount，mounted）

更新前，更新完毕（beforeUpdate，updated）

销毁前，销毁完毕（beforeDestroy，destroyed）

1.1 创建阶段（Create）

beforeCreate，组件实例刚创建。

特点：

data、methods 都还没有初始化

不能访问 this.data

TypeScript 复制代码

beforeCreate() {
  console.log('beforeCreate')
}

created,组件实例创建完成。

此时可以访问 data、methods，可以请求接口，初始化数据。

但不能访问 DOM

TypeScript 复制代码

created() {
  console.log(this.data)
}

1.2 挂载阶段（Mount）

beforeMount，组件挂载前。

模板编译完成，但还没渲染到页面 ， DOM还没有挂载到页面，拿不到真实DOM。

TypeScript 复制代码

beforeMount() {
  console.log('beforeMount')
}

mounted，组件挂载到实例上去之后。

DOM渲染完成。可以操作 DOM，获取元素，启动定时器。

TypeScript 复制代码

mounted() {
  console.log(document.querySelector('#app'))
}

1.3 更新阶段（Update）

当 响应式数据改变 时触发。

beforeUpdate，组件数据发生变化，数据更新前。

数据是新的，但页面时旧的，DOM还未更新完成。

TypeScript 复制代码

beforeUpdate() {
  console.log('beforeUpdate')
}

updated,数据更新之后。

DOM更新完成。页面和数据保持同步。

TypeScript 复制代码

updated() {
  console.log('updated')
}

1.4销毁阶段（Destroy）

beforeDestroy，组件实例销毁之前。

此时实例还可用，可以清除定时器，取消事件监听，解绑事件。

TypeScript 复制代码

beforeDestroy() {
  clearInterval(this.timer)
}

destroyed，组件实例销毁之后。

此时所有的数据，方法，指令都不可用。

TypeScript 复制代码

destroyed() {
  console.log('destroyed')
}

v-if 和 v-show 的区别：

共同点：都是控制DOM元素在页面中是否显示，用法也相同，表达式为true时，都会占据页面位置。表达式都为false时，都不会占据页面位置。

区别：

v-if是真正的条件渲染，他会将dom元素整个添加或删除，确保条件块内的监听事件和子组件适当的被销毁和重建。

v-show只是控制元素的css属性，为其设置display为none，但DOM元素依旧存在，他只是简单的基于css切换。

v-if有更高的切换消耗，v-show有更高的初始渲染消耗。

使用场景：

v-show：如果需要非常频繁的切换，使用v-show

v-if：如果运行时条件很少改变，使用v-if

三.Vue3生命周期

Vue3 生命周期和 Vue2 基本一致，但名字变化了 。(所有的生命周期钩子前面都加一个on).
Vue3取消了创建阶段的两个钩子（ beforeCreate，created**）**，并用setup代替这个阶段。
Vue3不再使用destory,改为unmount
使用钩子函数时需要从 vue 中导入函数使用。

TypeScript 复制代码

import { onBeforeUpdate } from 'vue'

onBeforeUpdate(() => {
  console.log('beforeUpdate')
})

Vue3的生命周期钩子：

创建阶段：setup

挂载阶段：onBeforeMount，onMounted

更新阶段：onBeforeUpdate，onUpdated

卸载阶段：onBeforeUnmount，onUnmounted

TypeScript 复制代码

<script setup lang="ts">
import { onMounted, onUpdated, onBeforeUnmount } from 'vue'

onMounted(() => {
  console.log('组件挂载完成')
})

onUpdated(() => {
  console.log('组件更新')
})

onBeforeUnmount(() => {
  console.log('组件即将卸载')
})
</script>

四.常用的生命周期

生命周期	用途
setup	初始化数据
onMounted	请求接口 / DOM操作
onUpdated	数据更新后的处理
onBeforeUnmount	清理定时器 / 事件

五.父子组件生命周期执行顺序

先说结论：父组件先创建，子组件先挂载，父组件在子组件挂载完毕之后才挂载自己。

整体流程：

父 beforeCreate ：父组件开始创建
父 created ：父组件实例被创建，数据初始化
父 beforeMount ：父组件开始挂载，此时Vue发现模板里有子组件，于是开始创建子组件
子 beforeCreate ：子组件开始创建
子 created
子 beforeMount
子 mounted ：子组件挂载完成，子组件DOM创建完毕
父 mounted ：父组件DOM生成

注意：

父组件必须等子组件DOM渲染完成才能算正真挂载完成，所以mounted必须是子组件先执行