Vue生命周期钩子函数

生命周期：

? ? ? ? 页面内容的三个阶段：创建阶段、更新阶段、销毁阶段。当一个页面内容出现在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>