Vue3选项式和组合式生命周期说明

生命周期：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>