【譯】Vue 的小奇技（第十二篇）：組件建立時當即調用觀察者回調

• 原文地址：Run watchers when a Vue.js component is created

• 原文做者：Alex Jover

• 譯者：程序猿何大叔

特別聲明：本文是做者 Alex Jover 發佈在 VueDose 上的一個系列。

版權歸做者全部。

譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。

爲了避免影響你們閱讀，得到受權的記錄會放在本文的最後。

正文

雖然 Vue.js 給咱們提供了在絕大多數場景下頗有用的「計算屬性」，可是在一些特殊狀況中，你可能須要用到「觀察者屬性」。

默認狀況下，觀察者屬性的回調函數僅會在被觀察的屬性值發生改變時被運行，這也的確符合邏輯。

舉個例子，爲 dog 這個數據屬性定義一個觀察者回調：

export default {
  data () {
    dog: ""
  },
  watch: {
    dog (newVal, oldVal) {
      console.log(`Dog changed: ${newVal}`);
    }
  },
};
複製代碼

代碼到這裏都沒問題。若是你運行了上面這段代碼，會發現 dog 的觀察者回調函數在其值被改變時就會當即被調用。

然而，在一些狀況下，你須要觀察者的回調在組件被建立時就被調用一次。這時，你固然能夠將觀察者回調的內部邏輯單獨抽取出來放到一個函數內，而後在觀察者回調函數和 created 鉤子函數中調用，可是這裏有一個更簡單的方法。

你可使用帶選項的觀察者，在配置選項中設置 immediate 屬性爲 true，該回調將會在組件被建立以後，被當即調用。

export default {
  data: () => ({
    dog: ""
  }),
  watch: {
    dog: {
      handler(newVal, oldVal) {
        console.log(`Dog changed: ${newVal}`);
      },
      immediate: true
    }
  }
};
複製代碼

正如你所見，以這種方式設置觀察者回調，須要將回調函數賦值給 handler 這個鍵。

你想看看在實際運用中的效果嗎？訪問這個 CodeSandbox 看看吧！

你能夠在線閱讀這篇 原文，裏面有可供複製粘貼的源代碼。若是你喜歡這個系列的話，請分享給你的同事們！

結語

此係列的其餘文章，會同步系列官網的發佈狀況，及時地翻譯發佈到掘金。請持續關注「程序猿何大叔」，相信我會給你們帶來更多優質的內容，不要忘了點贊~

若是想要了解譯者的更多，請查閱以下：

• 我的博客：blog.hadesz.com
• 我的 github 倉庫：github.com/hadeshe93
• 我的微信公衆號：搜索「程序猿何大叔」

請求翻譯受權記錄

---

以爲本文不錯的話，分享一下給小夥伴吧~