生命周期:
页面内容的三个阶段:创建阶段、更新阶段、销毁阶段。当一个页面内容出现在App.vue中,页面进入创建阶段。当响应式数据发生变化时页面自动更新,此时进入更新阶段。最后切换页面时,旧页面消失,就是进入了销毁阶段。
对应这三个阶段,vue提供了不同生命周期函数,也叫钩子函数。让我们可以在不同阶段对页面内容进行处理。
创建阶段生命周期只会在组件第一次加载时执行。除非组件被卸载了,当再次进入这个页面,创建阶段的生命周期会再次执行。
生命周期图示:
beforeCreate() : 创建阶段的第一个生命周期,它是在vue实例对象刚刚被创建出来,但还没有完成data和methods与实例对象的结合。此时this已经存在了,只不过此时的this仅仅完成了第一个阶段的初始化,实例内部的属性和方法刚刚和this实例绑定完成。
created() : 创建阶段的第二个生命周期,它是vue实例第二个阶段初始化完成,第二个阶段主要是把咱们配置的一些data、method、computed内容挂载到this实例上。所以我们才可以通过this.属性,this.方法,this.计算属性。
这个生命周期表示this实例已经初始化完成。页面的初始化请求最早(不是唯一或必须)只能放在这里,也可以放在后面,不能放在beforeCreate中,因为它里面的this还不存在响应式数据,请求结果没地方存。
beforeMount() : 创建阶段的第三个生命周期,vue渲染模板前执行,此时DOM还没有渲染出来.在挂载开始之前被调用.
mounted() : 创建阶段的第四个生命周期,vue渲染模板结束,此时DOM已经渲染出来。这个生命周期是最早能操作DOM的位置。
beforeUpdate() : 更新阶段的生命周期,响应式数据发生变化,页面在重新渲染前执行这个钩子。
updated() : 更新阶段的生命周期,响应式数据发生变化,页面在重新渲染后执行这个钩子。
beforeDestroy() : vue实例销毁前调用,卸载阶段,页面卸载前,清楚一些定时器(window的)、订阅事件,因为这些不是vue的东西,只能我们手动清除。
destroyed() : vue实例销毁后调用,该钩子在服务器端渲染期间不被调用。
个人练习,仅供参考:
<template>
<div class="life main">
<h5>
生命周期:页面内容的三个阶段创建阶段、更新阶段、销毁阶段。当一个页面内容出现在App.vue中,页面进入创建阶段。当响应式数据发生变化时页面自动更新,此时进入更新阶段,最后切换页面时,旧页面消失,就是进入了销毁阶段。
对应这个三个阶段,vue提供了不同的生命周期函数,也叫钩子函数。让我们可以在不同的阶段对页面内容进行处理。
</h5>
<h5>
创建阶段生命周期只会在组件第一次加载时执行。除非组件被卸载了,当再次进入这个页面,创建阶段的生命周期会再次执行。
</h5>
<p id="p" @click="num++">num: {{ num }}</p>
</div>
</template>
<script>
export default {
data() {
return {
num: 1,
timer: null,
};
},
methods: {
add() {
this.num++;
},
},
computed: {
allName() {
return "123";
},
},
beforeCreate() {
// 创建阶段的第一个生命周期:它是在vue实例对象刚刚被创建出来,但此时还没有完成data和methods与实例对象的结合。此时this已经存在了,只不过此时的this仅仅完成了第一个阶段的初始化:实例内部的属性和方法刚刚和this实例绑定完成。
// console.log(this);
},
created() {
// 创建阶段的第二个生命周期:它是vue实例第二个阶段初始化完成,第二个阶段主要是把咱们配置的一些data、method、computed内容挂载到this实例上。所以我们才可以通过this.属性,this.方法,this.计算属性
// 这个生命周期表示this实例已经初始化完成。页面的初始化请求最早(不是唯一或必须)只能放在这里。不能放在beforeCreate中,因为它里面的this还不存在响应式数据呢,请求结果没地方存。
// console.log(this);
},
beforeMount() {
// 创建阶段的第三个生命周期:vue渲染模板前执行,此时DOM还没有渲染出来。
console.log(document.getElementById("p"));
},
mounted() {
// 创建阶段的第四个生命周期:vue渲染模板结束,此时DOM已经渲染出来。这个生命周期是最早能操作DOM的位置。
console.log(document.getElementById("p"));
console.log("组件创建完毕");
// this.timer = setInterval(() => {
// console.log("-----");
// }, 1000);
},
beforeUpdate() {
// 更新阶段的生命周期:响应式数据发生变化,页面在重新渲染前执行这个钩子。
console.log("页面更新前");
},
updated() {
// 更新阶段的生命周期:响应式数据发生变化,页面在重新渲染后执行这个钩子。
console.log("页面更新后");
},
beforeDestroy() {
// 卸载阶段:页面卸载前,清除一些定时器、订阅事件,因为这些不是vue的东西,只能我们手动清除。
console.log("卸载前");
// clearInterval(this.timer);
},
destroyed() {
console.log("卸载后");
},
};
</script>
<style lang="" scoped></style>