這個牛逼的技巧是我從我滴朋友Damian Dulisz那學來的，他是Vue.js的團隊的核心成員，他創(chuàng)建了官方的 Vue newsletter和vue-multiselect。

有時候我們需要知道一個組件什么時候被父組件創(chuàng)建、綁定或者更新，尤其是當為vanilla JS 庫編寫組件時。

你可能已經(jīng)在你的組件中使用過上述功能，例如在子組件的生命周期函數(shù)中出發(fā)一個生命周期函數(shù)：

mounted() {
  this.$emit("mounted");
}

然后，你會在一個這樣的父組件<Child @mounted="doSomething"/>中監(jiān)聽自組件觸發(fā)的事件。

然鵝：其實沒有必要這樣做（顛覆三觀了吧），而且你也無法在第三方組件中做這種事情（因為人家都封裝好了，我們只是引用）。

取而代之的是一個灰常簡單的解決方案是，加一個@hook:前綴。

例如，當?shù)谌浇M件 v-runtime-template渲染時，你可以監(jiān)聽他的updated生命周期函數(shù)來處理一些你想做的東西：

<v-runtime-template @hook:updated="doSomething" :template="template" />

還不能相信這個事實嗎？實際操作一把CodeSandbox！

Remember you can read this tip online (with copy/pasteable code), and don’t forget to share VueDose with your colleagues, so they also know about these tips as well!

See you next week.

Alex