什麼是vue的生命週期勾點函數

在vue中，生命週期勾點函數指的是當生命週期經歷建立和更新DOM的過程中，會在其中執行的一些函數；在這些函數內部可以建立和宣告vue元件。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

什麼是vue的生命週期勾點函數

每個 Vue 範例都經過一系列初始化步驟。從建立時設定資料到編譯模板，將範例裝載到DOM，最後在資料更改期間更新 DOM。這個過程被稱為 Vue 範例的生命週期，在預設情況下，當它們經歷建立和更新 DOM 的過程中，會在其中執行一些函數，在這些函數內部建立並宣告 Vue 元件，這些函數稱為生命週期勾點。

Vue 有八種生命週期方法：

Before create
Created
Before mount
Mounted
Before update
Updated
Before destroy
Destroyed

在本文中，你將瞭解所有的這些勾點，並學習其每個階段的案例。

本文將使用測試元件，它位於 src 資料夾內的 components 資料夾中。它應該看起來像這樣：

// src/components/Test.vue
<template>
 <div>
 </div>
</template>
<script>
export default {
 name: ‘Test’,
 props: {
  msg: String
 }
}
</script>
<! — Add 「scoped」 attribute to limit CSS to this component only →
<style scoped>
h3 {
 margin: 40px 0 0;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

在本教學中，指令碼部分將單獨用於各種勾點案例。

beforeCreate()

這是在 Vue.js 中呼叫的第一個生命週期勾點，它在 Vue 範例初始化後立即被呼叫。

<script>
export default {
  name: 'Test',
  beforeCreate() {
    alert('beforCreate hook has been called');
    console.log('beforCreate hook has been called');
  }
}
</script>

你可以在開發環境中執行程式來檢查介面。

npm run serve

注意，在載入元件之前，首先執行的是在生命週期勾點中寫入的 alert 語句。這正是函數在 Vue 引擎建立應用程式元件之前呼叫的表現。此時正處在 beforeCreate 階段，尚未設定計算屬性、觀察者、事件、資料屬性和操作等內容。

created()

正如你所猜測的那樣，這是在 beforeCreated 勾點之後立即呼叫的第二個生命週期勾點。在這個階段，Vue 範例已經初始化，並且已經啟用了計算屬性、觀察者、事件、資料屬性和隨之而來的操作。

<script>
export default {
  name: 'Test',
  data() {
    return {
      books: 0
    }
    },
  created() {
    alert('Created hook has been called');
    console.log(`books is of type ${typeof this.books}`);
  }
}
</script>

如果你執行該程式，你將會發現現在可以顯示資料型別。著在 beforeCreated 階段是不可能的，因為這時發生的啟用還沒有發生。但是 Vue 範例在此階段尚未安裝，因此你無法在此處操作 DOM，元素屬性尚不可用。

beforeMount()

這是在 DOM 上掛載範例之前的那一刻，模板和作用域樣式都在這裡編譯，但是你仍然無法操作DOM、元素屬性仍然不可用。

<script>
export default {
  beforeMount() {
    alert('beforeMount is called')
  }
}
</script>

mounted()

這是在 beforeMounted 之後呼叫的下一個生命週期勾點。在安裝範例後會立即呼叫它。現在 app 元件或專案中的其他元件都可以使用了。現在可以進行資料適合模板、DOM元素替換為資料填充元素之類的操作了，元素屬性現在也可以使用了。

<script>
export default {
  mounted() {
    alert('mounted has been called'); 
   }
}
</script>

這是使用 Vue CLI 建立的專案的預設位置，因為正如我們在開頭看到的那樣，已經在 main.js 檔案中完成了安裝。這就是你有可能無法使用其他掛鉤的原因，因為預設情況下已經為你安裝了範例。

beforeUpdate()

在這裡對需要更新 DOM 的資料進行更改。在進行刪除事件偵聽器之類的更改之前，此階段適合任何邏輯。

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: 'Test',
  data() {
   return {
    books: 0,
    hello: 'welcome to Vue JS'
   }
 },
beforeUpdate(){
 alert('beforeUpdate hook has been called');
},
mounted(){
 this.$data.hello= 'lalalalallalalalalaalal';
 }
}
</script>

最初在 DOM 上有一個歡迎註釋，但是在掛載階段（可以操作DOM的地方），資料會發生變化，因此beforeUpdate 的 alert 會在更改之前出現。

updated()

在對 DOM 更新之後立即呼叫此生命週期勾點，它在呼叫 beforeUpdate 掛鉤之後執行。可以在此處執行與 DOM 相關的操作，但不建議更改此勾點內的狀態，因為 Vue 已經專門為此提供了平臺。

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: 'Test',
  data() {
   return {
    books: 0,
    hello: 'welcome to Vue JS'
   }
  },
beforeUpdate(){
 alert('beforeUpdate hook has been called');
},
updated(){
 alert('Updated hook has been called');
},
mounted(){
 this.$data.hello= 'lalalalallalalalalaalal';
 }
}
</script>

beforeDestroy()

呼叫此 Vue 生命週期勾點的時機是在 Vue 範例被銷燬之前，範例和所有函數仍然完好無失真並在此處工作。在這個階段你可以執行資源管理、刪除變數和清理元件。

<script>
export default {
name: 'Test',
 data() {
    return {
      books: 0
    }
  },
  beforeDestroy() {
    this.books = null
    delete this.books
  }
}
</script>

destroyed()

這是 Vue 生命週期的最後階段，其中所有的子 Vue 範例都已被銷燬，事件監聽器和所有指令之類的東西在此階段已被解除繫結。在物件上執行 destroy 之後呼叫它。

<script>
export default {
  destroyed() {
    this.$destroy() 
    console.log(this)
  }
}
</script>

當你執行程式並檢視控制檯時，將看不到任何內容。

【相關推薦：《》】

以上就是什麼是vue的生命週期勾點函數的詳細內容，更多請關注TW511.COM其它相關文章！