1. 程式人生 > >vue生命周期鉤子函數解讀步驟

vue生命周期鉤子函數解讀步驟

沒有 執行 eat 之間 作用 outer ajax請求 ret 前後端

vue 生命周期:
  一個組件從創建到銷毀的過程

技術分享圖片


let vm = new Vue({
  el : "id",
  data : {

  },
  1. beforeCreate(){
      1. 當vue實例化的時候會做一個初始化的操作,在這個生命周期函數裏面我們可以做初始化的loading
      2. 在當前函數中訪問不到data中的屬性,但是可以通過Vue的實例進行訪問 vm."屬性"
      console.log(beforeCreate)
  }
  2. created(){
      1. 當beforeCreate執行完畢以後,會執行當前函數,在當前函數中我們可以訪問data中的屬性

      2. 當前生命周期函數執行的時候會將data中所有的屬性和methods身上所有的方法添加到vue的實例身上,同時會將data中所有的屬性添加一個getter/setter方法
      3. 如果需要進行前後端數據交互(ajax請求的時候)需要在當前生命周期函數中使用
      console.log(created)
  }
  3(1). 如果沒有找到vue中的el 會使用
      vue的實例方法
      vm.$mount("id") 綁定el
      優先級
      vue中的el優先級比vm.$mount("id") 高
  3(2). 在找到data中的el時:
      new Vue({
      el :"id",
      //渲染虛擬DOM
      render : function(h){
      return h(App)
      },
      render : h => h(App) ,//es6返回值寫法

      })
  4. 如果沒有找到template模板的時候,就走outerHTML
      beforeMount(){
        beforeMount : 掛載前:數據和模板還沒有相結合,
        (渲染)
        render函數初次被調用時:數據和模板還沒有相結合,同時還沒有渲染到html頁面上,
        1. beforeMount作用:
            渲染前data中數據最後的修改
        console.log(beforeMount)
  }
  5. mounted(){
        mounted : 掛載後:數據和模板進行相結合,渲染成真實的DOM結構,
        1. 在當前生命周期函數裏面我們就可以訪問到真實的DOM結構,
        2. 在Vue中我們可以通過$refs來訪問到真實的DOM結構
        3. ref類似於id一樣 值必須是唯一的 訪問時我們可以通過 :this.$refs.屬性

        console.log(mounted)
  }
      5.(1). beforeUpdate(){
          beforeUpdate : 更新前,
          1. 只要data中的屬性發生了改變,那麽這個生命周期函數就會執行,render函數會再次執行
          2. 在這個生命周期函數中我們可以對數據進行最後的修改,同時也可以訪問到最新的DOM結構和數據
          console.log(beforeUpdate)
      }
      5.(2). updated(){
          updated : 更新後,
          1. 當前生命周期函數中我們可以訪問到最新的DOM結構(數據更新最新的DOM結構)和數據
      }


  6. beforeDestroy(){
      1.beforeDestroy 銷毀前:在銷毀之前還可以訪問到DOM結構 以及相關的數據(data),
      2. 在這個生命周期函數中我們可以將綁定的事件進行移除
      console.log(beforeDestroy);
      vm.$destroy() 銷毀組件
  }
  7. dertroyed(){
      dertroyed :銷毀後,
      1. 在這個生命周期函數中將數據和模板之間的關系斷開(函數自己銷毀,不需要手動)
      2. 在這個生命周期函數中我們還是可以訪問到data中的屬性,但訪問不到DOM結構了
  }

})

vue生命周期鉤子函數解讀步驟