【Vue筆記】-- 詳解vue生命週期

時間  2019-12-06 標籤 Vue筆記 詳解 vue 生命週期

正文：html

       首先上初始化代碼（代碼不完整，完整代碼在下面的github裏），而後在控制檯打印並查看結果（console.group()表示該範圍內是一個組，方便查看一組）vue

 View Codegit

　　結果顯示以下： github

　　

 

　　ps：由於沒有更新數據和銷燬數據，因此beforeUpdate，updated，beforeDestroy和destroyed等鉤子函數沒有觸發，只打印出beforeCreate，created，beforeMount和mounted的鉤子函數狀況。app

　　在vue生命週期圖例中可知，能夠分爲如下幾個步驟：dom

 

　　一 beforeCreate—created間的生命週期 函數

 

                           

 

　　這一步從圖中可知：是初始化data和事件，註冊和反映（這個翻譯感受不太對勁，說白了就是初始化）。this

　　打印結果以下：翻譯

　　

　　經過代碼結果可知：$el，$data以及message都爲undefined，說明是處於初始化狀態。 3d

 

　　二 created—beforeMount間的生命週期

 　　　　　　　　　　

　　

　　　　這一步，會進行兩次判斷：

　　　　* 判斷對象是否有el選項。

　　　　　　若是有的話就繼續向下編譯，

　　　　　　若是沒有el選項，則中止編譯。也就意味着中止了生命週期，直到在該vue實例上再次調用vm.$mount(el)纔會繼續往下編譯。

 　　　　　代碼結果演示以下：

　　　　　　1 當$el不掛載到vue時（註釋掉new Vue()裏的el）

　　　　　　結果以下：

 

　　　　　　

 

　　　　　　經過如下代碼可知：當$el不掛載到vue時，只會進行beforeCreated和created這兩個鉤子函數，不會進行beforeMounted和mounted鉤子函數。

　　　　　　

　　　　　　2 當從新調用時（輸入vm.$mount(el)）；

 

 　　　　　

　　　　　　　　

　　　　　　經過打印結果可知：在輸入vm.$mount('#app')時，發現這四個鉤子函數都實行了。能夠推斷，mount這一環節是保證$el已經掛載，且能夠進行任何數據操做。

　　　　　　

　　　　** 判斷el是否有template模板：

　　　　　　若是有的話直接經過渲染函數渲染出來。

　　　　　　若是沒有的話，就直接調用$el的外部html進行渲染。

　　　　　ps：所謂的template的就是vm對象裏的template屬性的值，若是template沒有值，則會調用外部的html。

　　　　如下demo實現，結論和打印結果：

　　　　  1 當有template時：

複製代碼

var vm = new Vue({
    el: '#app',
    template:'<h1 style="color:red">{{message}}</h1>',
    data: {
      message: 'Vue'
    }
  })

複製代碼

　　　　

　　　

　　　　2 當無template時：

<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>

　　　　

　　　　3 當二者存在時，會優先選擇template渲染函數。

複製代碼

<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    template:'<h1 style="color:red">{{message}}</h1>',
    data: {
      message: 'Vue'
    }
  })
</script>

複製代碼

　　　　

　　　　4 二者不存在時，則不渲染也不報錯。

　　　　ps：另外，Vue對象中也有render函數，和template同樣，render能夠返回一個createElement參數，進行渲染。

複製代碼

<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    template:'<h1 style="color:red">{{message}}</h1>',
    render: function (createElement, context) {
        return createElement('h1',`${this.message}1111`)
    },
    data: {
      message: 'Vue'
    },
  })
</script>

複製代碼

　　　　

　　　　經過演示可知：發現render比template優先級高一些。

　　　　　　　　　　　因此三個渲染的優先級是：render函數選項  > template參數  > 外部HTML

 　　　　

 

　　三 beforeMount—mounted鉤子函數的生命週期

　　　　　　　　　　

　　　　

　　　　這一步的生命週期在於虛擬dom樹的渲染。

　　　　

　　　　

 　　　　經過打印結果可知：

　　　　　　在beforeMounted鉤子函數中，掛載了$el，但只拿到{{message}}，沒有完成渲染，

　　　　　　而mounted鉤子函數是已經完成了整個流程。

　　　　　　因此Vue生命週期圖例的意思應該是：給vue實例掛載$el，而且掛載到虛擬dom元素上。（一開始沒明白這一步，如今才恍然大悟）。

　　四 beforeUpdate—updated間的生命週期

　　　　　　　　　　

　　　　　　這一步是當vue的data數據發生改變，就會觸發對應組件的從新渲染。而後依次觸發beforeUpdate和update鉤子函數。

　　　　ps：看到有位博主說到一個重點！這倆個鉤子函數只能在已渲染到模板裏的數據發生改變後才能觸發，不然不觸發。例子以下：

複製代碼

<body>
  <div id="app">
    <!-- <h1>{{message}}</h1> -->
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    // template:'<h1 style="color:red">{{message}}</h1>',
    data: {
      message: 'Vue'
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前狀態===============》');
      console.log(this.$el);  
      console.log(this.$data); 
      console.log(this.message); 
    },
    updated: function () {
      console.group('updated 更新完成狀態===============》');
      console.log(this.$el);
      console.log(this.$data); 
      console.log(this.message); 
    },
  })
  vm.message = 'aaaa';
</script>

複製代碼

　　結果可知：沒有觸發鉤子函數。

　　

　　當把template的註釋去掉，結果以下：觸發了更新先後的鉤子函數。

　　

 

　　　五 beforeDestroy—destroyed間的生命週期

　　　　　　　　

　　　　beforeDestroy鉤子函數在實例銷燬以前調用。在這一步，實例仍然徹底可用。

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

　　　　實例以下：<script>

複製代碼

  var vm = new Vue({
    el: '#app',
    template:'<h1 style="color:red">{{message}}</h1>',
    data: {
      message: 'Vue'
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 銷燬前狀態===============》');
      console.log(this.$el);    
      console.log(this.$data); 
      console.log(this.message); 
    },
    destroyed: function () {
      console.group('destroyed 銷燬完成狀態===============》');
      console.log(this.$el);  
      console.log(this.$data); 
      console.log(this.message)
    }
  })
  vm.$destroy();
  vm.message='11111'
</script>

複製代碼

　　 

　　ps：由於只有$destroy()方法，因此無法判斷beforeDestroy和destroyed的區別

　　結果以下：發現銷燬以後，再從新給message賦值，沒效果。可見destroyed鉤子函數在$destroy()方法實行後會銷燬和當前實例有關的東西，不會再次對該實例進行操做。

結尾：

　　   

如下代碼與本文無關，請自行跳過
<P><A href="http://www.tongjink.com/"><FONT color=#ffffff>鄭州哪裏看婦科好</FONT>
<P><A href="http://www.zzchanghong110.com/"><FONT color=#ffffff>鄭州檢查男科疾病去哪家醫院</FONT>
<P><A href="http://www.zztj120.com/"><FONT color=#ffffff>鄭州婦科在線諮詢</FONT>
<P><A href="http://www.ytsgnk.com/"><FONT color=#ffffff>鄭州看男科多少錢</FONT>
<P><A href="http://www.zzfkyy120.com/"><FONT color=#ffffff>鄭州不孕不育正規醫院</FONT>

　　以上都是本身對vue的生命週期的理解，從一開始懵懂，到依次開發vue項目，回頭再看這生命週期，就有一種「原來如此」的感受，感到vue強大之處。

　　我是17號小白，我把完整代碼放到gitHub裏了，有須要實踐的請前往clone。地址：https://github.com/sqh17/notes/blob/master/ways/vueLifecycle.html。

　　以上如有不對的地方，請你們能及時私信我或者下方評論，咱們一塊兒加油進步。

联系我们 沪ICP备2021010478号-7