腳本之家服務器常用軟件

快捷導航

vue的生命周期鉤子與父子組件的生命周期詳解

更新時間：2022年08月04日 09:57:09 作者：Celester_best

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

vue的生命周期鉤子的介紹

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

vue的生命周期可以分為8個階段：

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

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

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

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

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

2、組件掛載到頁面涉及的兩個鉤子：

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

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

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

此時可以通過Dom API操作DOM元素

3、組件更新涉及的兩個鉤子

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

此時，可以對可能會被移除的元素做一些操作，比如移除事件監(jiān)聽等

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

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

4、組件銷毀涉及的兩個鉤子

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

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

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

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

值得注意的是，在使用keep-alive時，組件還會涉及兩外兩個鉤子

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

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

父子組件的生命周期

加載渲染過程

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

父組件更新過程

點擊“父組件更新”按鈕

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

子組件更新過程

點擊‘子組件更新’按鈕：

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

父子組件更新過程

點擊‘改變value’按鈕

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

銷毀過程

銷毀是執(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實例前
  beforeCreate() {
    console.log("parent beforeCreate 方法執(zhí)行了");
  },
  // 創(chuàng)建vue實例后
  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實例前
  beforeCreate() {
    console.log("Child beforeCreate 方法執(zhí)行了");
  },
  // 創(chuàng)建vue實例后
  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>