快捷導(dǎo)航

Vue組件與生命周期詳細(xì)講解

更新時(shí)間：2022年10月17日 17:13:27 作者：愛(ài)思考的豬

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

寫(xiě)在前面

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

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

生命周期

beforeCreate

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

created

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

beforeMounted

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

mounted

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

beforeUpdate

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

updated

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

beforeDestroy

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

destroyed

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

圖解

問(wèn): 什么時(shí)候可以操作dom?

outer html(直接渲染在根節(jié)點(diǎn)下面的)在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階段