Vue生命周期

什么是 vue 生命周期

Vue 有⼀个完整的⽣命周期，从开始创建、初始化数据、编译模版、挂载Dom(渲染)更新( 渲染)、卸载 等过程称之为Vue⽣命周期。

Vue2生命周期

beforeCreate：创建前

实例初始化之后，数据观测和事件配置之前被调用，此时组件未创建选项的对象，
el 和data 未初始化，无法访问methods， data， computed等上的方法和数据		

created：创建前后

实例创建完成之后被调用，实例已经完成以下的配置：数据观测，
属性和方法的运算，watch/event事件回调，$el属性目前不可见。

beforeMount：数据挂载前

数据挂在开始之前调用，相关的render函数首次被调用（虚拟DOM）
实例已完成配置： 编译模板，把data里面的数据和模板生成html，
完成了el和data 初始化(该钩子未在html页面挂载)

mounted：数据挂载后

挂在完成，数据渲染到html中，该周期可以做一些数据请求，mounted只会执行一次

beforeUpdate：数据更新前

在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，
可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

　 update：数据更新后

数据更新后执行，尽量避免在此期间更改状态，因为这可能会导致更新无限循环，
该钩子在服务器端渲染期间不被调用

　 　beforeDestroy：销毁前

在实例销毁之前调用，一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

destroyed：销毁后

在实例销毁之后调用，调用后，所以的事件监听器会被移出，
所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

通过配置项的形式使用生命周期钩子

<!-- demo.vue -->
<template>
  <h2>Vue2 and Vue3 生命周期</h2>

  <div>总合：{{ sum }}<button @click="sum++">点击累加</button></div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    let sum = ref(0);
    return {
      sum,
    };
  },
  // 创建前
  beforeCreate() {
    console.log("====== beforeCreate：创建前 =======");
  },
  // 创建前后
  created() {
    console.log("====== created：创建前后 =======");
  },
  // 数据挂载前
  beforeMount() {
    console.log("====== beforeMount：数据挂载前 =======");
  },
  // 数据挂载后
  mounted() {
    console.log("====== mounted：数据挂载后 =======");
  },
  // 更新前
  beforeUpdate() {
    console.log("====== beforeUpdate：更新前 =======");
  },
  // 更新后
  updated() {
    console.log("====== updated：更新后 =======");
  },

  beforeUnmount() {
    console.log("====== beforeUnmount：销毁前 =======");
  },
  // 组件销毁后
  unmounted() {
    console.log("====== unmounted：销毁后 =======");
  },
};
</script>

<style>
</style>

<!-- app.vue -->
<template>
  <div @click="isShow = !isShow">隐藏/显示</div>
  <demo v-if="isShow" />
</template>

<script>
import { ref } from "vue";

import demo from "@/view/compostions/demo.vue";

export default {
  name: "App",
  components: {
    demo,

  },
  setup() {
    let isShow = ref(true);
    return {
      isShow,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  font-size: 20px;
  line-height: 40px;
}
</style>

Vue3生命周期

vue2--vue3生命周期变化 通过组合式API的形式去使用生命周期钩子

<!-- demo.vue -->
<template>
  <h2>Vue2 and Vue3 生命周期</h2>
  <div>总合：{{ sum }}<button @click="sum++">点击累加</button></div>
</template>
<script>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdate,
  onBeforeUnmount,
  onUnmount,
} from "vue";
export default {
  setup() {
    let sum = ref(0);
    onBeforeMount(() => {
      console.log("====onBeforeMount===");
    })
    onMounted(() => {
      console.log("====onMounted===");
    })
    onBeforeUpdate(() => {
      console.log("====onBeforeUpdate===");
    })
    onUpdate(() => {
      console.log("====onUpdate===");
    })
    onBeforeUnmount(() => {
      console.log("====onBeforeUnmount===");
    })
    onUnmount(() => {
      console.log("====onUnmount===");
    })
    return {
      sum,
    };
  },
};
</script>

<style>
</style>