vue的生命周期鉤子函數怎么應用

本篇內容介紹了“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>
h4 {
 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的生命周期鉤子函數怎么應用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！