vue生命週期

時間 2020-01-31

標籤 vue 生命週期简体版

原文原文鏈接

鉤子怎麼用：javascript

beforecreate : 舉個栗子：能夠在這加個loading事件
created ：在這結束loading，還作一些初始化，實現函數自執行
mounted ：在這發起後端請求，拿回數據，配合路由鉤子作一些事情
beforeDestory：你確認刪除XX嗎？ destoryed ：當前組件已被刪除，清空相關內容html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 建立前狀態===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 建立完畢狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 掛載前狀態===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 掛載結束狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 銷燬前狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 銷燬完成狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

beforeCreate

類型：Functionvue
詳細：java

在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。後端
參考：生命週期圖示api

created

類型：Function服務器
詳細：app

在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。ide
參考：生命週期圖示函數

beforeMount

類型：Function
詳細：

在掛載開始以前被調用：相關的 render 函數首次被調用。

該鉤子在服務器端渲染期間不被調用。
參考：生命週期圖示

mounted

類型：Function
詳細：

el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

注意 mounted 不會承諾全部的子組件也都一塊兒被掛載。若是你但願等到整個視圖都渲染完畢，能夠用 vm.$nextTick 替換掉 mounted：
mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) }
該鉤子在服務器端渲染期間不被調用。
參考：生命週期圖示

beforeUpdate

類型：Function
詳細：

數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。

你能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。

該鉤子在服務器端渲染期間不被調用。
參考：生命週期圖示

updated

類型：Function
詳細：

因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。

當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態。若是要相應狀態改變，一般最好使用計算屬性或 watcher 取而代之。

注意 updated 不會承諾全部的子組件也都一塊兒被重繪。若是你但願等到整個視圖都重繪完畢，能夠用 vm.$nextTick 替換掉 updated：
updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) }
該鉤子在服務器端渲染期間不被調用。
參考：生命週期圖示

activated

類型：Function
詳細：

keep-alive 組件激活時調用。

該鉤子在服務器端渲染期間不被調用。
參考：
- 構建組件 - keep-alive
- 動態組件 - keep-alive

deactivated

類型：Function
詳細：

keep-alive 組件停用時調用。

該鉤子在服務器端渲染期間不被調用。
參考：
- 構建組件 - keep-alive
- 動態組件 - keep-alive

beforeDestroy

類型：Function
詳細：

實例銷燬以前調用。在這一步，實例仍然徹底可用。

該鉤子在服務器端渲染期間不被調用。
參考：生命週期圖示

destroyed

類型：Function
詳細：

Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

該鉤子在服務器端渲染期間不被調用。
參考：生命週期圖示

errorCaptured

2.5.0+ 新增

類型：(err: Error, vm: Component, info: string) => ?boolean
詳細：

當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子能夠返回 false 以阻止該錯誤繼續向上傳播。

你能夠在此鉤子中修改組件的狀態。所以在模板或渲染函數中設置其它內容的短路條件很是重要，它能夠防止當一個錯誤被捕獲時該組件進入一個無限的渲染循環。

錯誤傳播規則
- 默認狀況下，若是全局的 config.errorHandler 被定義，全部的錯誤仍會發送它，所以這些錯誤仍然會向單一的分析服務的地方進行彙報。
- 若是一個組件的繼承或父級從屬鏈路中存在多個 errorCaptured 鉤子，則它們將會被相同的錯誤逐個喚起。
- 若是此 errorCaptured 鉤子自身拋出了一個錯誤，則這個新錯誤和本來被捕獲的錯誤都會發送給全局的 config.errorHandler。
- 一個 errorCaptured 鉤子可以返回 false 以阻止錯誤繼續向上傳播。本質上是說「這個錯誤已經被搞定了且應該被忽略」。它會阻止其它任何會被這個錯誤喚起的 errorCaptured 鉤子和全局的 config.errorHandler。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。