vue生命周期

     生命周期：页面内容的三个阶段创建阶段、更新阶段、销毁阶段。当一个页面内容出现在App.vue中，页面进入创建阶段。当响应式数据发生变化时页面自动更新，此时进入更新阶段，最后切换页面时，旧页面消失，就是进入了销毁阶段。

     对应这个三个阶段，vue提供了不同的生命周期函数，也叫钩子函数。让我们可以在不同的阶段对页面内容进行处理。

       创建阶段生命周期只会在组件第一次加载时执行。除非组件被卸载了，当再次进入这个页面，创建阶段的生命周期会再次执行。

点击事件

<template>
<div class=''>
    <p id="p" @click="num++">num: {{ num }}</p>
</div>
</template>

创造

//生命周期 - 创建之前 
beforeCreate() {
    //加载好vue组件，但是方法和data的数据没有完成结合，this已经完成初始化
}, 
//生命周期 - 创建完成（可以访问当前this实例）

created() {
 // 创建阶段的第二个生命周期：它是vue实例第二个阶段初始化完成，第二个阶段主要是把咱们配置的一些data、method、computed内容挂载到this实例上。所以我们才可以通过this.属性，this.方法，this.计算属性
    // 这个生命周期表示this实例已经初始化完成。页面的初始化请求最早(不是唯一或必须)只能放在这里。不能放在beforeCreate中，因为它里面的this还不存在响应式数据呢，请求结果没地方存。
},

挂载期 mounted（挂载结束，vue渲染模板结束，此时DOM已经渲染出来。这个生命周期是最早能操作DOM的位置。）

beforeMount() {
 // 创建阶段的第三个生命周期：vue渲染模板前执行，此时DOM还没有渲染出来。
}, //生命周期 - 挂载之前
mounted() {
   // 创建阶段的第四个生命周期：vue渲染模板结束，此时DOM已经渲染出来。这个生命周期是最早能操作DOM的位置。
   console.log("组件创建完毕");
},

页面加载好

更新

beforeUpdate() {
    console.log("更新前");
 // 更新阶段的生命周期：响应式数据发生变化，页面在重新渲染前执行这个钩子。
}, //生命周期 - 更新之前
updated() {
    console.log("更新后");
     // 更新阶段的生命周期：响应式数据发生变化，页面在重新渲染后执行这个钩子。
}, //生命周期 - 更新之后

点击事件触发页面重新渲染

销毁

beforeDestroy() {
// 卸载阶段：页面卸载前，清除一些定时器、订阅事件，因为这些不是vue的东西，只能我们手动清除。
console.log("卸载前");
}, //生命周期 - 销毁之前
destroyed() {
    console.log("卸载后");
}, //生命周期 - 销毁完成

切换到别的页面，页面销毁