一、生命周期
1.beforeCreate
详细信息:会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用
,此时data、watcher、methods都还没有生效
应用:不经常使用,常常用于某些插件初始化
2. created
详细信息:当这个钩子被调用时,以下内容已经设置完成:响应式数据、计算属性、方法和侦听器。然而,此时挂载阶段还未开始,因此 $el 属性仍不可用
应用:此时常常用于通过ajax进行数据请求
3. beforeMount
详细信息:当这个钩子被调用时,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。此时DOM还是无法操作的。相比于created生命周期,只是多了一个$el的属性,然而其值为undefined
应用:此时就要渲染,在这里也可以更改数据,不会触发updated,在这里可以在渲染前最后一次更改数据的机会
4.mounted
详细信息:el已完成DOM的挂载与渲染,DOM也渲染完毕。
5.beforeUpdate
详细信息:其在data数据改变时(改变的data里面的数据必须在页面中显示变化)先触发该函数,然后触发updated
<template><div>{{okko}}<br>----------<br>----------<br>----------</div>
</template>
<script>
export default {data() {return {okko: 123,buku:569}},mounted(){setTimeout(()=>{this.okko=12356},1000)},beforeUpdate(){console.log(1)},updated(){console.log(2)}
}
</script>
<style></style>
6.updated
详细信息:其在data数据改变时(改变的data里面的数据必须在页面中显示变化)先触发beforeUpdate,然后触发updated
7.beforDestroy
详细信息:vue3中称之为beforeUnmount,在实例销毁之前调用,实例仍然完全可用,这一步还可以用this来获取实例,一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件
8.destroyed
详细信息:vue3中称之为unmounted,在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁