Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過(guò)程,也就是new Vue() 開(kāi)始就是vue生命周期的開(kāi)始。Vue 實(shí)例有?個(gè)完整的?命周期,也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載等?系列過(guò)程,稱這是Vue的?命周期

vue的生命周期鉤子的介紹

vue官網(wǎng)中提供的vue的生命周期鉤子圖

vue的生命周期可以分為8個(gè)階段：

1、創(chuàng)建vue實(shí)例涉及的兩個(gè)鉤子

（1）beforeCreate：創(chuàng)建前，vue實(shí)例初始化之前調(diào)用。

此時(shí)的數(shù)據(jù)觀察和事件配置都還沒(méi)有準(zhǔn)備好，而此時(shí)的實(shí)例中的data和el還是underfined狀態(tài)，不可用的。Dom元素也未加載，此時(shí)還不能操作dom元素

（2）created:創(chuàng)建后，vue實(shí)例初始化之后調(diào)用

此時(shí)實(shí)例創(chuàng)建完成，可以訪問(wèn)data、mothods等屬性。但是此時(shí)組件還沒(méi)有掛載到頁(yè)面上，所以依然不能訪問(wèn)dom元素。此階段可以進(jìn)行一個(gè)數(shù)據(jù)請(qǐng)求的操作。

2、組件掛載到頁(yè)面涉及的兩個(gè)鉤子：

（1）beforeMount：掛載前，掛載到DOM樹(shù)之前調(diào)用。相關(guān)的 render 函數(shù)首次被調(diào)用。

在beforeMount之前，會(huì)找到對(duì)應(yīng)的template，并編譯成render函數(shù)。

（2）mounted：掛載后，掛載到DOM樹(shù)之后調(diào)用

此時(shí)可以通過(guò)Dom API操作DOM元素

3、組件更新涉及的兩個(gè)鉤子

（1）beforeupdate:更新前，在數(shù)據(jù)發(fā)生改變后，DOM 被更新之前被調(diào)用。

此時(shí)，可以對(duì)可能會(huì)被移除的元素做一些操作，比如移除事件監(jiān)聽(tīng)等

（2）updated：更新后，在數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和更新完畢之后被調(diào)用

此時(shí)，組件 DOM 已經(jīng)更新。

4、組件銷毀涉及的兩個(gè)鉤子

（1）beforeDestroy:銷毀前，vue實(shí)例銷毀之前調(diào)用

一般在這一步，可以銷毀定時(shí)器，解綁全局事件等。

（2）destroyed：銷毀后，vue實(shí)例銷毀之后調(diào)用

該鉤子被調(diào)用后，對(duì)應(yīng) Vue 實(shí)例的所有指令都被解綁，所有的事件監(jiān)聽(tīng)器被移除，所有的子實(shí)例也都被銷毀。

值得注意的是，在使用keep-alive時(shí)，組件還會(huì)涉及兩外兩個(gè)鉤子

（1）actived：被 keep-alive 緩存的組件激活時(shí)調(diào)用。

（2）被 keep-alive 緩存的組件失活時(shí)調(diào)用。

父子組件的生命周期

加載渲染過(guò)程

父beforeCreate→父created→父beforeMount→子bereforeCreate→子created→子beforeMound→子mounted→父mounted

父組件更新過(guò)程

點(diǎn)擊“父組件更新”按鈕

執(zhí)行的生命周期鉤子：父beforeUpdate→父updated

子組件更新過(guò)程

點(diǎn)擊‘子組件更新’按鈕：

執(zhí)行的生命周期鉤子：子befforeUpdate→子updated

父子組件更新過(guò)程

點(diǎn)擊‘改變value’按鈕

執(zhí)行的生命周期鉤子：父beforeUpdate→子beforeUpdate→子updated→父updated

銷毀過(guò)程

銷毀是執(zhí)行的生命周期鉤子：父beforeDestroy→子beforeDestroy→子destroyed→父destroyed

代碼示例

Lifecycle.vue

<template>
  <div>
    Lifecycle
    <button @click="changeValue">改變value</button>
    <br />
    <br />
    <br />
    <parent :value="value"></parent>
  </div>
</template>
<script>
import Parent from "./Parent.vue";
export default {
  name: "Lifecycle",
  components: { Parent },
  data() {
    return {
      value: 0,
    };
  },
  methods: {
    changeValue() {
      this.value++;
    },
  },
};
</script>

Parent.vue

<template>
  <div>
    <p>Parent-{{ parentData }}</p>
    <p>Parent-value:{{ value }}</p>
 
    <button @click="changeParentData">父組件更新</button>
    <br />
    <br />
    <br />
    <Child :value="value"></Child>
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  name: "Parent",
  props: ["value"],
  components: { Child },
  data() {
    return {
      parentData: 0,
    };
  },
  methods: {
    changeParentData() {
      this.parentData++;
    },
  },
  // 創(chuàng)建vue實(shí)例前
  beforeCreate() {
    console.log("parent beforeCreate 方法執(zhí)行了");
  },
  // 創(chuàng)建vue實(shí)例后
  created() {
    console.log("parent created 方法執(zhí)行了");
  },
  // 掛載前
  beforeMount() {
    console.log("parent beforeMount 方法執(zhí)行了");
  },
  // 掛載后
  mounted() {
    console.log("parent mounted 方法執(zhí)行了");
  },
  // 更新前
  beforeUpdate() {
    console.log("parent beforeUpdate 方法執(zhí)行了");
  },
  // 更新后
  updated() {
    console.log("parent updated 方法執(zhí)行了");
  },
  // 銷毀前
  beforeDestroy() {
    console.log("parent beforeDestroy 方法執(zhí)行了");
  },
  // 銷毀后
  destroyed() {
    console.log("parent destroyed 方法執(zhí)行了");
  },
};
</script>

child.vue

<template>
  <div>
    <p>Child-{{ childData }}</p>
    <p>Child-value:{{ value }}</p>
    <button @click="changeChildData">子組件更新</button>
  </div>
</template>
<script>
export default {
  name: "Child",
  props: ["value"],
  data() {
    return {
      childData: 0,
    };
  },
  methods: {
    changeChildData() {
      this.childData++;
    },
  },
  // 創(chuàng)建vue實(shí)例前
  beforeCreate() {
    console.log("Child beforeCreate 方法執(zhí)行了");
  },
  // 創(chuàng)建vue實(shí)例后
  created() {
    console.log("Child created 方法執(zhí)行了");
  },
  // 掛載前
  beforeMount() {
    console.log("Child beforeMount 方法執(zhí)行了");
  },
  // 掛載后
  mounted() {
    console.log("Child mounted 方法執(zhí)行了");
  },
  // 更新前
  beforeUpdate() {
    console.log("Child beforeUpdate 方法執(zhí)行了");
  },
  // 更新后
  updated() {
    console.log("Child updated 方法執(zhí)行了");
  },
  // 銷毀前
  beforeDestroy() {
    console.log("Child beforeDestroy 方法執(zhí)行了");
  },
  // 銷毀后
  destroyed() {
    console.log("Child destroyed 方法執(zhí)行了");
  },
};
</script>

created和mounted的區(qū)別

created創(chuàng)建vue實(shí)例之后，此時(shí)完成了數(shù)據(jù)檢測(cè)和事件及配置，可以訪問(wèn)data數(shù)據(jù)，可以進(jìn)行網(wǎng)絡(luò)請(qǐng)求。created是在模板渲染成html前調(diào)用，所以不能進(jìn)行dom操作

mounted是組件掛載完畢，模板渲染成html之后調(diào)用，可以進(jìn)行dom相關(guān)的操作。

到此這篇關(guān)于vue的生命周期鉤子與父子組件的生命周期詳解的文章就介紹到這了,更多相關(guān)vue生命周期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: