Ting's Square 程式寫作之路

[2020] 第12屆鐵人賽Day 14 Vue instance的生命週期

Tags:  #rail    #vue  
Total : 497 words.

第12天鐵人賽前在利用event bus傳情書給某個元件的時候,
可能眼尖的客倌會注意到,疑? 這個created()是不是還沒介紹到呢?

created() {
      // async
      setTimeout(() => {
        // 發送事件
        this.$bus.$emit('loveLetter', {
          msg: 'Ting is reading: Love Letter/ラブレター',
          alert: '請收下'
        });

        this.msg = '九月的陽光下,我正偷看你的側臉。你的身影猶如蕩漾在春風中的一首歌,你一定全都知道,你一定全都不在乎,就這樣回過頭,清涼的一笑。'
      }, 3000);
    }

今天就要來講解Vue instance的生命週期掛鉤(Instance Lifecycle Hook)了!

官網很好心的提醒到~不用一開始就全部看懂life cycle hook所有的細節,通常是做到功能需要更熟悉原理的時候,再回來理解!

You don’t need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference. Ref.

我們目前已經熟悉的背景知識

一個Vue Instance會有許多個選項物件(Options),
當實體被創造出來時,需要傳入所有在這個Vue實體需要用到的屬性選項,例如el,data, template等, 目前鐵人賽過了快一半,已經使用到的屬性選項有這些:

new Vue({
  el: '', // Vue app的掛載點
  data: {

  },
  methods: {

  }
  computed: {

  },
  template: {

  },
  components: {

  },
  // 還有很多其他的屬性選項
  // 包括生命週期鉤子
  // life-cycle-hooks: {
  
  //}
})

其中,life-cycle-hooks像是像生物被創造出來一樣,有「出生、長大、死亡」類似的週期,

而我們可以在每個實體從初始化、到被創建、被銷毀的特定個階段做一些事情。

來一張官網經典的Lifecycle Diagram,矩形的部分是我們可以掛上額外需要的程式碼的時機點:

而我們可以把這些Vue instance的時機點分成四個階段:

1. Creation: 元件初始化階段

hooks 用途
beforeCreate instance初始化完成。但data還沒建立、el也還沒被建立。
created instance建立完成,可以使用data以及其他選項物件的屬性。el還沒被建立。

這就是為什麼在前兩天的event bus例子時,created()可以使用this.msg的原因,因為除了el,其他選項物件都已經成為可以使用的狀態。

  export default {              
    data: function () {
      return {
        msg: '收件人:Ting'
      }
    },
    created() {
    // 註冊監聽事件
    this.$bus.$on('loveLetter', (event) => {
      this.msg = event.msg;
      alert(event.alert);
      console.log(event);
      // {msg: "Ting is reading: Love Letter/ラブレター", alert: "請收下"}
    });
  },
  }

2. Mounting: 掛載階段

hooks 用途
beforeMount 在執行元素掛載,畫面渲染至瀏覽器前的階段,此時render method第一次被呼叫,可以讓我們預處理DOM。
mounted 元素已掛載,el建立完成。

3. Updating: 資料更新階段,並重新渲染畫面

hooks 用途
beforeUpdate data更新之前,Virtual DOM還不會被渲染。
updated data更新完成,Virtaul DOM完成渲染。新的view顯示在畫面上。

4. Destruction: 元件銷毀階段

hooks 用途
beforeDestroy 被銷毀之前,此時instance仍然還可以使用。
destroyed instance已經被銷毀,綁定的事件被解除。

同場加映:Rails的The Object Life Cycle物件生命週期

看到Vue.js的before created想起了在Rails專案裡的物件生命週期也會經歷過幾個階段:

During the normal operation of a Rails application, objects may be created, updated, and destroyed. Active Record provides hooks into this object life cycle so that you can control your application and its data.
翻譯蒟蒻:在Rails應用程式的正常運行期間,可能會創建,更新和銷毀物件,所以Active Record提供了該物件生命週期的掛鉤,以便於我們控制應用程式及資料。

Active Record的 life cycle hooks:

## 建立物件:
before_validation
after_validation

before_save
around_save

before_create
around_create

after_create
after_save

after_commit/after_rollback

## 更新物件:
before_validation
after_validation

before_save
around_save

before_update
around_update

after_update
after_save
after_commit/after_rollback

## 刪除物件::
before_destroy
around_destroy
after_destroy

after_commit/after_rollback

例如:我們在Rails的User Model裡,當建立一名user instance前,先利用before_create callback執行對其密碼進行加密的method。

class User < ApplicationRecord
  validates :account, presence: true, uniqueness: true
  validates :email, presence: true, uniqueness: true

  before_create :encrypt_password

  private
  def encrypt_password
    # 略
  end
end

是不是跟Vue的實體生命週期有異曲同工之妙呢?

然而和Rails不同的是,Rails的新增/更新/刪除物件是與資料庫內的資料表進行互動,

而Vue在前端處理上多了一個透過掛載mounting的hook處理畫面渲染至瀏覽器前的階段。

所以下一篇打算來舉個例子,實作在Vue instance裡使用axios來處理ajax,而這個部分就會在生命週期的mounting階段進行喔!

(明天就是第15天了呢!快要完成二分之一了拍拍手)

Ref: