vue3的生命周期
挂载阶段
- beforeCreate（创建前）
- created（创建后）
- beforeMount(挂载前)
- mounted（挂载后）
更新阶段
- beforeUpdate（更新前）
- updated（更新后）
卸载阶段
- beforeUnmount(vue2.0是beforeDestroy)（销毁前）
- unmounted(vue2.0是destroyed)（销毁后）
创建前（beforeCreate）
对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。
创建后（created）
对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。
挂载前（beforeMount）
对应的钩子函数是beforemount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
挂载后（mounted）
对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。
更新前（beforeUpdate）
对应的钩子函数是beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。
更新后（updated）
对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。
销毁前（beforeDestroy）
对应的钩子函数是beforeDestroy。在上一阶段vue已经成功的通过数据驱动DOM更新，当我们不在需要vue操纵DOM时，就需要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。
销毁后（destroyed）
对应的钩子函数是destroyed。在销毁后，会触发destroyed钩子函数。
vue的生命周期的思想贯穿在组件开发的始终，通过熟悉其生命周期调用不同的钩子函数，我们可以准确地控制数据流和其对DOM的影响；vue生命周期的思想是Vnode和MVVM的生动体现和继承。
示例
app.vue
<template>
<div>
<Lifesycle v-if="show"></Lifesycle>
<button @click="unMount">卸载</button>
</div>
</template>
<script>
import Lifesycle from '@/components/生命周期/lifesycle.vue'
export default {
name: 'App',
components: {
Lifesycle,
},
data() {return { show: true }},
methods: {
unMount:function() { this.show = !this.show; }
}
}
</script>
lifesycle.vue
<template>
<div class="container">
<div>click {{ count }} times</div>
<button @click="clickBtn">更新</button>
</div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
data() { return { count: 0 }},
methods: { clickBtn:function() { this.count++ } },
beforeCreate() {
console.log('beforeCreate： 我在创建前显示');
},
created() {
console.log('created： 我在创建后显示,可以在我的里面做一些数据请求');
},
beforeMount() {
console.log('beforeMount： 我在挂载前显示');
},
mounted() {
console.log('mounted： 我在挂载后显示，此时DOM已经被渲染出来了');
},
beforeUpdate() {
console.log('\n');
console.log('beforeUpdate： 我在更新前显示');
},
updated() {
console.log('updated： 我在更新后显示');
},
beforeUnmount() {
console.log('\n');
console.log('beforeUnmount： 我在卸载前显示');
},
unmounted() {
console.log('unmounted： 我在卸载后显示');
},
})
</script>
每个周期具体适合哪些场景
- beforecreate : 可以在这加个loading事件，在加载实例时触发
- created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
- mounted : 挂载元素，获取到DOM节点
- updated : 如果对数据统一处理，在这里写上相应函数
- beforeUnmount : 可以做一个确认停止事件的确认框
- nextTick : 更新数据后立即操作dom
网友评论