快捷導(dǎo)航

Vue組件與生命周期詳細講解

更新時間：2022年10月17日 17:13:27 作者：愛思考的豬

Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載等?系列過程,稱這是Vue的?命周期

寫在前面

Vue.js的核心就是以簡潔的模板語法將數(shù)據(jù)渲染進Dom系統(tǒng)。vue實例在渲染成html的時候往往要經(jīng)過以下的步驟:

讀取數(shù)據(jù)和方法,設(shè)置數(shù)據(jù)綁定和監(jiān)聽
解析template
將實例掛載到Dom,并將實例狀態(tài)和視圖綁定，在執(zhí)行這些步驟的時候,vue還提供了一些生命周期的方法,用來在不同的階段對代碼做增添和修改。

生命周期

beforeCreate

vue實例初始化,數(shù)據(jù)監(jiān)聽和方法屬性掛載之前調(diào)用

created

數(shù)據(jù)監(jiān)聽和方法屬性掛載之后調(diào)用,是最早可以獲取和操作數(shù)據(jù)及方法的數(shù)據(jù)

beforeMounted

template解析之后調(diào)用,這個時候?qū)嵗€沒掛載到dom上

mounted

replace el之后調(diào)用,實例已經(jīng)掛載到dom上,是最早可以操作dom的時候

beforeUpdate

組件中的數(shù)據(jù)發(fā)生變化的時候執(zhí)行,此時數(shù)據(jù)已經(jīng)和頁面保持同步,只是頁面還沒更新

updated

數(shù)據(jù)更新后,頁面也是最新的

beforeDestroy

實例銷毀之前調(diào)用,實例上的方法和屬性還可以調(diào)用

destroyed

實例已經(jīng)銷毀,實例上的東西已經(jīng)不可以使用

圖解

問: 什么時候可以操作dom?

outer html(直接渲染在根節(jié)點下面的)在beforcreate階段就可以操作,使用template渲染的要在mounted階段才可以操作

  <div id='app'>
    <span id='span1'> 直接渲染的文字 </span>
    <span id='span2'> {{message}} <span>
    <com id='span3'></com>
  </div>
  <script>
    function deepClone(obj){
      return obj && JSON.parse(JSON.stringify(obj));
    };
    </script>
<script>
  function test(stage) {
    var span1 = document.getElementById('span1');
    var span2 = document.getElementById('span2');
    var span3 = document.getElementById('span3');
    debugger;
  };
  Vue.component('com', {
    template: '<span>使用template渲染的文字</span>'
  });
  var vm = new Vue({
    el:'#app',
    data: {
      message: 'hello vue!'
    },
    beforeCreate() {
      test('beforeCreate');
    },
    created() {
      test('created');
    },
    beforeMount() {
      test('beforeMount');
    },
    mounted() {
      test('mounted');
    }
  });
</script>

beforeCreate階段、created階段、beforeMount階段