vue.jsのリアクティブについて調べてみた
vue.jsを使った開発をしていてよくわからないエラーがこれまでいくつか出てきて解決するために時間がかかってしまったことがありました。
今回紹介することは、vue.js の特徴である、リアクティブによって理想としたものがレンダリングされなかったので、調べてまとめてみました。
リアクティブとは
Vueの最も特徴的な機能の1つは、目立たないリアクティブシステムである。 モデルは単純なJavaScriptオブジェクトである。それらが変更されるとViewが更新される。 状態管理は非常に容易で直感的である。 Vueは何もすることなく、最適な再レンダリングを提供する。 各コンポーネントは、レンダリング中にそのリアクティブ依存性を追跡しているため、システムはいつ再レンダリングするか、どのコンポーネントを再レンダリングするかを正確に認識している
https://ja.wikipedia.org/wiki/Vue.js
また、モデルのデータ変更の際に、リアルタイムで、ビュー側（HTML)につ渡ることを意味している。
モデルの変更時の更新
全てのコンポーネントインスタンスは対応するwatcher インスタンスを持つ。
コンポーネントの内容を描写する間のプロパティの依存性の情報を持っている。
プロパティの内容に変更があった際に、watcherが変更があったことを受け取り、再構築したものを再描写することになる。
変更時の注意
モダンな JavaScript の限界(そして
https://jp.vuejs.org/v2/guide/reactivity.htmlObject.observeの断念)のため、Vue.js はプロパティの追加または削除を検出できません。Vue はインスタンスの初期化中に getter/setter の変換を行うため、全てのプロパティは Vue が変換してリアクティブにできるようにdataオブジェクトに存在しなければなりません。
Vue では、すでに作成されたインスタンスに対して新しいルートレベルのリアクティブなプロパティを動的に追加することはできません。しかしながら、Vue.set(object, key, value)メソッドを使ってネストしたオブジェクトにリアクティブなプロパティを追加することができます:
非同期更新キュー
Vue.js では非同期にDOMの更新を行っている。
- データ変更が検出されると、Vue はキューをオープンし、同じイベントループで起こる全てのデータ変更をバッファリングします。
- 同じウオッチャが複数回トリガされる場合、キューには一度だけ入ります。
- そして、次のイベントループ “tick” で、Vue はキューをフラッシュし、実際の作業を実行します。
今回適切に描写できなかった原因
newでVueのインスタンスを生成する時に、データを初期化した直後に、データを変更したが、その際に、次のイベントを待たずに処理をしてしまい、初期化をした時のデータで描写がされてしまったようです。
対処法 nextTick()
new Vue({
el: '#login-area',
data: {
status:false
contents:[]
},
methods: {
}
Vue.nextTick(function(){
var array = ['apple','orange'];
this.contents = array;
})
}最初うまく行かなかった時に原因がわからずにいましたが、Vue.jsでの動作や仕組みについて教えていただいたので、このメソッドを使うことにより問題を解決することができました。
まだ、原因を解決するために時間がかかってしまっているので、仕組みをしっかりと理解していきたいです。