特別宣告：本文是作者 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
- 個人微信公眾號：搜尋「程式猿何大叔」
請求翻譯授權記錄
覺得本文不錯的話，分享一下給小夥伴吧~