vue中生命周期鉤子函數(shù)有哪些-創(chuàng)新互聯(lián)

這篇文章主要介紹vue中生命周期鉤子函數(shù)有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司10多年企業(yè)網(wǎng)站設(shè)計(jì)服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及高端網(wǎng)站定制服務(wù),企業(yè)網(wǎng)站設(shè)計(jì)及推廣,對(duì)戶外休閑椅等多個(gè)領(lǐng)域擁有多年的網(wǎng)站制作經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

Vue實(shí)例的生命周期鉤子函數(shù)（8個(gè)）

1、beforeCreate

剛 new了一個(gè)組件，無(wú)法訪問(wèn)到數(shù)據(jù)和真實(shí)的dom，基本上這個(gè)好像不能干啥

2、created

data屬性完成了賦值，可以對(duì)數(shù)據(jù)進(jìn)行修改但是不會(huì)觸發(fā)updated,在這里可以做初始數(shù)據(jù)的獲取

3、beforeMount

render準(zhǔn)備要渲染了，函數(shù)中虛擬dom已經(jīng)創(chuàng)建完成，這時(shí)候改變數(shù)據(jù)也不會(huì)觸發(fā)update,在這里可以做初始數(shù)據(jù)的獲取

4、mounted

開始render，渲染出真實(shí)dom，執(zhí)行mounted鉤子函數(shù)，組件已經(jīng)出現(xiàn)在頁(yè)面中，數(shù)據(jù)，事件，都DOM都處理好了。這里你可以改是進(jìn)行真實(shí)的DOM操作

5、beforeUpdate

組件，實(shí)例數(shù)據(jù)更新之前會(huì)執(zhí)行的函數(shù)，虛擬DOM會(huì)重新構(gòu)建虛擬DOM，與上一次的虛擬DOM對(duì)比后重新渲染。切記不可進(jìn)行數(shù)據(jù)修改否則會(huì)出現(xiàn)死循環(huán)

6、updated

更新完會(huì)執(zhí)行的函數(shù)，切記不可進(jìn)行數(shù)據(jù)修改否則會(huì)出現(xiàn)死循環(huán)

7、beforeDestroy

實(shí)例被銷毀之前會(huì)執(zhí)行的函數(shù)，做善后的工作，清除計(jì)時(shí)器，清除非指令綁定的事件等等

8、destroyed

實(shí)例被銷毀后會(huì)執(zhí)行的函數(shù)，也可以做善后工作。

<template>
  <div class="hello">
   Hello World!
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  beforeCreate: function() {
    console.log("data屬性光聲明沒(méi)有賦值的時(shí)候");
  },
  created: function() {
    console.log("data屬性完成了賦值");
  },
  beforeMount: function() {
    console.log("頁(yè)面上的{{name}}還沒(méi)有被渲染成真正的數(shù)據(jù)");
  },
  mounted: function() {
    console.log("頁(yè)面上的{{name}}被渲染成真正的數(shù)據(jù)");
  },
  beforeUpdate: function() {
    console.log(" 數(shù)據(jù)（data屬性）更新之前會(huì)執(zhí)行的函數(shù)");
  },
  updated: function() {
    console.log("數(shù)據(jù)（data屬性）更新完會(huì)執(zhí)行的函數(shù)");
  },
  beforeDestroy: function() {
    console.log("實(shí)例被銷毀之前會(huì)執(zhí)行的函數(shù)");
  },
  destroyed: function() {
    console.log("實(shí)例被銷毀后會(huì)執(zhí)行的函數(shù)");
  }
};
</script>

<style scoped>
</style>
console這樣一個(gè)輸出順序：

大概這樣一個(gè) 生命周期鉤子函數(shù)執(zhí)行的順序，包括我之前是用angular開發(fā)跟vue一樣他也有自己的生命周期鉤子函數(shù)。

生命周期簡(jiǎn)單來(lái)說(shuō)就是一個(gè)組件從創(chuàng)建到初始化到銷毀的一個(gè)過(guò)程，在這個(gè)過(guò)程中有這些生命周期鉤子函數(shù)我們可以更方便的去操作整一個(gè)組件。

以上是“vue中生命周期鉤子函數(shù)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

分享標(biāo)題：vue中生命周期鉤子函數(shù)有哪些-創(chuàng)新互聯(lián)
文章鏈接：http://www.muchs.cn/article48/epoep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、微信公眾號(hào)、做網(wǎng)站、定制網(wǎng)站、網(wǎng)站策劃、動(dòng)態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容