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