生命周期：composition

生命周期先后顺序为：

setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求

onBeforeMount-挂载前，可以请求后台数据

onMounted-挂载，可以获取DOM实例

onBeforeUpdate-更新前，可以在此更改数据

onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新

onBeforeUnmount-卸载组件实例之前，在这里可以清除定时器、监听之类的函数

onUnmounted-卸载组件实例之后，这个时候只剩下了 DOM 空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

onErrorCaptured-捕获组件中发生的错误：组件渲染、事件处理器、生命周期钩子、 setup() 函数、侦听器、自定义指令钩子、过渡钩子

<template><div ref="el" class="home">{{ title }}</div><el-button @click="updateSize">改变</el-button>
</template>
<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onUnmounted, onUpdated, ref } from 'vue';
​
// 生命周期钩子
const el = ref()
const title = ref('生命周期钩子的使用')
const colors = ['#FF66FF', '#FF0033', '#66CCCC', '#990066', '#00CC00']
// 注册一个回调函数，在组件挂载完成后执行
let intervalId
​
// 注册一个钩子，在组件被挂载之前被调用。
// 当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
onBeforeMount(() => {console.log('onBeforeMount')title.value = '注册一个钩子'
})
​
onMounted(() => {console.log('onMounted')el.value.style.fontSize = '20px'intervalId = setInterval(() => {console.log('测试')}, 1000)
})
​
// 注册一个钩子，在组件实例被卸载之前调用。
onBeforeUnmount(() => {console.log('onBeforeUnmount')
})
​
// 注册一个回调函数，在组件实例被卸载之后调用
onUnmounted(() => {console.log('onUnmounted')clearInterval(intervalId)
})
// 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用
onUpdated(() => {console.log('点击了');console.log('onUpdated')const nowNum = parseInt(Math.random() * 5)// console.log('colors[nowNum]', colors[nowNum])el.value.style.color = colors[nowNum]
})
​
// 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用
// 这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的
onBeforeUpdate(() => {console.log('onBeforeUpdate')title.value = '哈哈哈'
})
// 注册一个钩子，在捕获了后代组件传递的错误时调用。
/*** 错误可以从以下几个来源中捕获：组件渲染事件处理器生命周期钩子setup() 函数侦听器自定义指令钩子过渡钩子这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。*/
onErrorCaptured((obj, component, msg) => {console.log('onErrorCaptured', obj, component, msg)
})
​
const updateSize = () => {// console.log(``)const num =parseInt(Math.random() * 100)title.value = `生命周期钩子的使用-${num}`
}
​
</script>
<style lang="scss" scoped>
​
</style>

生命周期：options

生命周期先后顺序为：

setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求

beforeCreate-创建实例后的第一个钩子，在这里data、watch、computed等都不可用

created-完成数据观测,可以在这里请求数据，data、watch、computed等都可用

beforeMount-挂载前，可以请求后台数据

mounted-挂载，可以获取DOM实例

beforeUpdate-更新前，可以在此更改数据

updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新

beforeUnmount-卸载组件实例之前，在这里可以清除定时器、监听之类的函数

unmounted-卸载组件实例之后，这个时候只剩下了 DOM 空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

<template><div>options</div>
</template>
​
<script>
export default {setup () {console.log('setup');return {}},beforeCreate() {console.log('beforeCreate');},created() {console.log('created');},beforeMount() {console.log('beforeMount');},mounted() {console.log('mounted');},beforeUpdate() {console.log('beforeUpdate');},updated() {console.log('updated');},beforeUnmount() {console.log('beforeUnmount');},unmounted() {console.log('unmounted');},
}
</script>
​
<style lang="scss" scoped>
​
</style>