Vue.jsのimmediateオプションの挙動について、備忘録としてまとめます。
immediateオプションをtrueにすると、初期化時に呼び出される。
以下に挙動を具体的にイメージするためのコードを記載します。
<div id="app"> <button v-on:click="change">チェンジ</button> <p>{{ watchTarget }}</p> </div>
[wachを定義(immediateオプションがfalse)した後で、データを変える]
new Vue({
el: '#app',
data: {
width: 400,
height: 600
},
methods: {
change: function() {
this.$watch(function() {
[this.width, this.height]
}, function() {
console.log('テストです！');
}, { deep: true, immediate: false });
this.width = 400
this.height = 400
}
},
computed: {
watchTarget: function() {
return [this.width, this.height]
}
}
})
ブラウザでの初期表示は、以下のようになる。
gyazo.com
[チェンジ]ボタンをクリックした後のブラウザの表示は、以下のようになる。
gyazo.com
※
処理の流れは、以下のようになっている。
①[チェンジ]ボタンをクリックした時にchangeメソッドの中に処理が入る。
↓
②immediateオプションがfalseになってるので、console.log('テストです！');は、実行されない。(初回の1回目の時には、実行されない。)
↓
③watchで監視しているデータが変更されたので、changeメソッドが発火されconsole.log('テストです！');が実行される。
[データを変える処理の後で、wachを定義(immediateオプションがtrue)する]
new Vue({
el: '#app',
data: {
width: 400,
height: 600
},
methods: {
change: function() {
this.width = 400
this.height = 400
this.$watch(function() {
[this.width, this.height]
}, function() {
console.log('テストです！');
}, { deep: true, immediate: true });
}
},
computed: {
watchTarget: function() {
return [this.width, this.height]
}
}
})
ブラウザでの初期表示は、以下のようになる。
gyazo.com
[チェンジ]ボタンをクリックした後のブラウザの表示は、以下のようになる。
gyazo.com
※
処理の流れは、以下のようになっている。
①[チェンジ]ボタンをクリックした時にchangeメソッドの中に処理が入る。
↓
②watchで監視しているデータが変更されたが、watchを定義しているのはデータ変更の処理の後なので、データ変更時の発火分のconsole.log('テストです！');が実行されない。
↓
③watchで監視しているデータが変更されたので、changeメソッドが発火されconsole.log('テストです！');が実行される。
[wachを定義(immediateオプションがtrue)した後で、データを変える]
new Vue({
el: '#app',
data: {
width: 400,
height: 600
},
methods: {
change: function() {
this.$watch(function() {
[this.width, this.height]
}, function() {
console.log('テストです！');
}, { deep: true, immediate: true });
this.width = 400
this.height = 400
}
},
computed: {
watchTarget: function() {
return [this.width, this.height]
}
}
})
ブラウザでの初期表示は、以下のようになる。
gyazo.com
[チェンジ]ボタンをクリックした後のブラウザの表示は、以下のようになる。
※
処理の流れは、以下のようになっている。
①[チェンジ]ボタンをクリックした時にchangeメソッドの中に処理が入る。
↓
②immediateオプションがtrueになってるので、console.log('テストです！');が実行される。(初回の1回目の時に実行される。)
↓
③watchで監視しているデータが変更されたので、changeメソッドが発火されconsole.log('テストです！');が実行される。
[wachを定義(deepオプションがfalse)した後で、データを変える]
new Vue({
el: '#app',
data: {
width: 400,
height: 600
},
methods: {
change: function() {
this.$watch(function() {
[this.width, this.height]
}, function() {
console.log('テストです！');
}, { deep: false, immediate: false });
this.width = 400
this.height = 400
}
},
computed: {
watchTarget: function() {
return [this.width, this.height]
}
})
ブラウザでの初期表示は、以下のようになる。
gyazo.com
[チェンジ]ボタンをクリックした後のブラウザの表示は、以下のようになる。
gyazo.com
※
処理の流れは、以下のようになっている。
①[チェンジ]ボタンをクリックした時にchangeメソッドの中に処理が入る。
↓
②watchで監視しているデータが変更されたが、監視対象を配列にして複数にしており、deepオプションがfalseになってるので、console.log('テストです！');が実行されない。
