首先,我们了解一下"生命周期"这个词。
	
通俗的来说,生命周期就是一个事务从出生到消失的过程。例如,一个人从出生到去世。

在vue中,vue的生命周期是指,从创建vue对象到销毁vue对象的过程。

1、图解Vue的生命周期

在这里插入图片描述

2、钩子函数

【解释】:

钩子函数是Vue框架中内置的一些函数,随着Vue的生命周期阶段,自动执行

【作用】:

特定的时间,执行特定的操作

【分类】:

四大阶段,八大方法
阶段方法名方法名
初始化beforeCreatecreated
挂载beforeMountmounted
更新beforeUpdateupdated
销毁beforeDestroydestroyed

4、Vue生命周期之初始化阶段

【图示】:
在这里插入图片描述

  • new Vue(): Vue实例化对象(组件也是一个的vue实例化对象)
  • Init Events & Lifecycle:初始化事件和生命周期函数
  • beforeCreate:生命周期函数被执行此时不能访问data和menthods等中的东西
  • Init injections&reactivity:vue内部添加data和methods等
  • created:生命周期钩子函数被执行,实例创建此时能访问data和menthods等中的东西
  • 接下来开始编译模板:开始分析
  • Has el option? :是否有el选项 – 检查要挂到哪里
  • 没有. 调用$mount()方法
  • 有, 继续检查template选项

【el选项挂载点图解】:
在这里插入图片描述
【代码演示】:

<template>
  <div>
    <h1>1、生命周期——初始化阶段</h1>
    <p>控制台打印结果:</p>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  // 数据对象
  data() {
    return {
      msg: "你好世界!!",
    };
  },
  // new Vue()之后执行 vue内部给实例添加了一些属性和方法
  // data和methods之前执行
  beforeCreate() {
    console.log("beforeCreate函数执行了");
    // 此时获取不到data中的变量值
    console.log(this.msg);
  },

  // data和methods之后执行
  created() {
    console.log("create函数执行了");
    // 此时可以获取到data中的变量值
    console.log(this.msg);
  },

};
</script>

<style>
</style>

【控制台结果】:
在这里插入图片描述

5、Vue生命周期之挂载阶段

【图解挂载阶段】:
在这里插入图片描述

  • template选项检查:
  • 有:编译template返回render渲染函数
  • 无:编译el选项对应标签作为template(要渲染的模板)vue工程项目不支持
  • 虚拟DOM挂载成真实DOM之前:
  • beforeMount :生命周期钩子函数被执行
  • Create: 把虚拟DOM和渲染的数据一并挂到真实DOM上
  • 挂载完毕,mounted:生命周期钩子函数被执行

【代码演示】:

<template>
  <div>
    <h1>1、生命周期</h1>
    <p>控制台打印结果:</p>
    <p id="myMsg">{{ msg }}</p>
  </div>
</template>

<script>
export default {
  // 数据对象
  data() {
    return {
      msg: "你好世界!!",
    };
  },
  // new Vue()之后执行 vue内部给实例添加了一些属性和方法
  // data和methods之前执行
  beforeCreate() {
    console.log("beforeCreate函数执行了");
    // 此时获取不到data中的变量值
    console.log(this.msg);
  },

  // data和methods之后执行
  created() {
    console.log("create函数执行了");
    // 此时可以获取到data中的变量值
    console.log(this.msg);
  },

  /**
   * 2、挂载
   */
  //真实DOM挂载之前
  // 使用场景:预处理data,不会触发update钩子函数
  beforeMount() {
    console.log("beforeMount函数执行了----此时获取不到真实DOM");
    console.log(document.getElementById("myMsg"));

    // 重新改变data中的值
    this.msg = "hello,world";
  },

  //真实DOM挂载之后
  // 此处可以获取到真实的DOM
  mounted() {
    console.log("beforeMount函数执行了----此时可以获取到真实DOM");
    console.log(document.getElementById("myMsg"));
  },
};
</script>

<style>
</style>

【控制台效果】:
在这里插入图片描述

6、Vue生命周期之更新阶段

【更新图解】:
在这里插入图片描述

  • 当data里数据改变, 更新DOM之前,beforeUpdate – 生命周期钩子函数被执行此时获取不到更新的真实dom
  • Virtual DOM:虚拟DOM重新渲染, 打补丁到真实DOM
  • updated – 生命周期钩子函数被执行
  • 当有data数据改变 – 重复这个循环

【代码演示】:

<template>
  <div>
    <h1>1、生命周期</h1>
    <p>控制台打印结果:</p>
    <p id="myMsg">{{ msg }}</p>

    <ul id="myArr">
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <button @click="add">末尾加值</button>
  </div>
</template>

<script>
export default {
  // 数据对象
  data() {
    return {
      msg: "你好世界!!",
      arr: [1, 2, 3],
    };
  },
  // new Vue()之后执行 vue内部给实例添加了一些属性和方法
  // data和methods之前执行
  beforeCreate() {
    console.log("beforeCreate函数执行了");
    // 此时获取不到data中的变量值
    console.log(this.msg);
  },

  methods: {
    add() {
      this.arr.push(Math.floor(Math.random() * 10));
    },
  },
  // data和methods之后执行
  created() {
    console.log("create函数执行了");
    // 此时可以获取到data中的变量值
    console.log(this.msg);
  },

  /**
   * 2、挂载
   */
  //真实DOM挂载之前
  // 使用场景:预处理data,不会触发update钩子函数
  beforeMount() {
    console.log("beforeMount函数执行了----此时获取不到真实DOM");
    console.log(document.getElementById("myMsg"));

    // 重新改变data中的值
    this.msg = "hello,world";
  },

  //真实DOM挂载之后
  // 此处可以获取到真实的DOM
  mounted() {
    console.log("beforeMount函数执行了----此时可以获取到真实DOM");
    console.log(document.getElementById("myMsg"));
  },

  /**
   * 3、更新
   */
  //更新之前
  beforeUpdate() {
    console.log("beforeUpdate函数执行了-----此时获取不到更新的真实DOM");
    console.log(document.querySelectorAll("#myArr>li"));
  },

  // 更新之后
  // 场景:获取更新真实DOM之后
  updated() {
    console.log("update函数执行了-----此时可以获取到更新的真实DOM");
    console.log(document.querySelectorAll("#myArr>li"));
  },
};
</script>

<style>
</style>

【效果展示】:
在这里插入图片描述

7、Vue生命周期之销毁阶段

【图解销毁】:
在这里插入图片描述

  1. 当$destroy()被调用:比如组件DOM被移除(例v-if)
  2. beforeDestroy:生命周期钩子函数被执行
  3. 拆卸数据监视器、子组件和事件侦听器
  4. 实例销毁后, 最后触发一个钩子函数
  5. destroyed: 生命周期钩子函数被执行

【代码演示】

<template>
  <div>
    <h1>1、生命周期</h1>
    <p>控制台打印结果:</p>
    <p id="myMsg">{{ msg }}</p>

    <ul id="myArr">
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <button @click="add">末尾加值</button>
  </div>
</template>

<script>
export default {
  // 数据对象
  data() {
    return {
      msg: "你好世界!!",
      arr: [1, 2, 3],
      timer: "",
    };
  },
  // new Vue()之后执行 vue内部给实例添加了一些属性和方法
  // data和methods之前执行
  beforeCreate() {
    console.log("beforeCreate函数执行了");
    // 此时获取不到data中的变量值
    console.log(this.msg);
  },

  methods: {
    add() {
      this.arr.push(Math.floor(Math.random() * 10));
    },
  },
  // data和methods之后执行
  created() {
    console.log("create函数执行了");
    // 此时可以获取到data中的变量值
    console.log(this.msg);

    this.timer = setInterval(() => {
      console.log("哈哈哈哈!");
    }, 1000);
  },

  /**
   * 2、挂载
   */
  //真实DOM挂载之前
  // 使用场景:预处理data,不会触发update钩子函数
  beforeMount() {
    console.log("beforeMount函数执行了----此时获取不到真实DOM");
    console.log(document.getElementById("myMsg"));

    // 重新改变data中的值
    this.msg = "hello,world";
  },

  //真实DOM挂载之后
  // 此处可以获取到真实的DOM
  mounted() {
    console.log("beforeMount函数执行了----此时可以获取到真实DOM");
    console.log(document.getElementById("myMsg"));
  },

  /**
   * 3、更新
   */
  //更新之前
  beforeUpdate() {
    console.log("beforeUpdate函数执行了-----此时获取不到更新的真实DOM");
    console.log(document.querySelectorAll("#myArr>li"));
  },

  // 更新之后
  // 场景:获取更新真实DOM之后
  updated() {
    console.log("update函数执行了-----此时可以获取到更新的真实DOM");
    console.log(document.querySelectorAll("#myArr>li"));
  },

  /**
   * 4、销毁
   */
  beforeDestroy() {
    console.log("beforeDestroy函数执行了");
    clearInterval(this.timer)
  },

  destroyed() {
    console.log("destroyed函数执行了");
  },
};
</script>

<style>
</style>


 -------App.vue-----------------
<template>
  <div>
    <Life v-if="isShow"></Life>
    <button @click="isShow = false">销毁组件</button>
  </div>
</template>

<script>
import Life from "@/components/Life";
export default {
  data() {
    return {
      isShow: true,
    };
  },
  components: {
    Life,
  },
};
</script>

<style>
</style>

【效果演示】:
在这里插入图片描述
在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐