vue生命週期鉤子

時間 2019-11-17

標籤 vue 生命週期鉤子简体版

原文原文鏈接

轉載自：https://segmentfault.com/a/1190000008010666?utm_source=tag-newestjavascript

https://segmentfault.com/a/1190000011381906?utm_source=tag-newestcss

https://segmentfault.com/a/1190000008570622?utm_source=tag-newesthtml

初始化過程：數據監聽(data watcher[created])、模板編譯(template->render函數)、將實例掛載到DOM（mount）、數據更新時更新DOM(update)vue

生命週期java

生命週期鉤子chrome

beforeCreate
segmentfault

在 實例初始化以後，數據觀測(data observer) 和 event/watcher 事件配置（未完成）以前被調用。

created：完成了 data 數據的初始化（數據和data屬性的綁定），沒有el選項後端

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

beforeMountapp

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

mounteddom

el 被新建立的 vm.$el 替換，並 掛載到實例上，以後調用該鉤子。

beforeUpdate

數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。你能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。

updated

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

<!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>

另外，在beforeMount中，咱們能發現el仍是 {{message}}，這裏就是應用的 Virtual DOM（虛擬Dom）技術，先把坑佔住了。到後面mounted掛載的時候再把值渲染進去。

1.created鉤子函數和beforeMount間的生命週期

首先會判斷對象是否有el選項。若是有的話就繼續向下編譯，若是沒有el選項，則中止編譯，也就意味着中止了生命週期，直到在該vue實例上調用vm.$mount(el)。

而後，看一下template參數選項的有無對生命週期的影響。
（1）.若是vue實例對象中有template參數選項，則將其做爲模板編譯成render函數。
（2）.若是沒有template選項，則將外部HTML做爲模板編譯。
（3）.能夠看到template中的模板優先級要高於outer HTML的優先級。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命週期學習</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--html中修改的-->
    <h1>{{message + '這是在outer HTML中的'}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    template: "<h1>{{message +'這是在template中的'}}</h1>", //在vue配置項中修改的
    data: {
      message: 'Vue的生命週期'
    }
}）
</script>
</html>

執行後的結果能夠看到在頁面中顯示的是：

那麼將vue對象中template的選項註釋掉後打印以下信息：

在vue對象中還有一個render函數，它是以createElement做爲參數，而後作渲染操做，並且咱們能夠直接嵌入JSX.

new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement('h1', 'this is createElement')
    }
})

能夠看到頁面中渲染的是：

因此綜合排名優先級：
render函數選項 > template選項 > outer HTML.

2.beforeMount和mounted 鉤子函數間的生命週期

　　能夠看到此時是給vue實例對象添加$el成員，而且用$el替換掉el屬性所指的DOM。由於在以前console中打印的結果能夠看到beforeMount以前el上仍是undefined。

3. 與update相關的鉤子

在chrome的console中輸入：

app.message= 'yes !! I do';

data裏的值被修改後，將會觸發update的操做。

與destroy 相關的鉤子

咱們在console裏執行下命令對 vue實例進行銷燬。銷燬完成後，咱們再從新改變message的值，vue再也不對此動做進行響應了。可是原先生成的dom元素還存在，能夠這麼理解，執行了destroy操做，後續就再也不受vue控制了。

app.$destroy();

總結

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

相關標籤/搜索

每日一句

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