Vuejs

watch immediate: trueはライフサイクルのどこで実行されるのか?

  • POSTS
この記事は https://qiita.com/sin_tanaka/items/64b4a48bcb6dac924380 にも紐付いています。 前置き Vue.jsにはVueインスタンス(コンポーネント)上のデータの変更を監視する watch というプロパティがあります。 さらに、 watch には immediate というオプションがあります。 watch は通常監視を始めて、データが変わった直後にコールバックが呼ばれますが、 immediate オプションを付与した watch は監視を始めた直後に一回コールバックが呼ばれます。 また、Vueにはインスタンスのライフサイクルに合わせて関数を実行する ライフサイクルフック という仕組みがあります。 そこで、 immediateオプション付きのwatchはライフサイクルにおけるどのタイミングで呼ばれるのか? という疑問が湧いたので調べてみました。 画像は Vue インスタンス — Vue.js より引用 TL;DR watchのコードリーティングしてみた 実行タイミングは beforeCreate と created のあいだ ドキュメントには記載無さそう?現状のコードではこのタイミングってぐらいなはず ひとまず実行してみる 以下のコードで試してみたところ、immediate 付きの watch は beforeCreate と created の間に実行されました。 https://codepen.io/sin-tanaka/pen/ExaxrZx new Vue({ el: '#app', data: function() { return { helloWorld: 'HelloWorld' }; }, beforeCreate: function() { console.log('call beforeCreate'); }, created: function() { console.