" />

スポンサーリンク

Vue.js

Vue.jsがリアクティブにならない?確実にリアクティブにするための約束ごと。

投稿日:

なぜ、リアクティブを保つ必要があるのか?

Vue.jsといえば、プロパティ(data)の変化に応じて、UIも自動に変化させてくれるリアクティブ機能が目玉です。

しかし、ちょっとしたことで、リアクティブ性が失われ、「Dataは変わってるのに、画面に反映されない(涙」ということになります。Vue.js案件のあるあるだと思います。

リアクティブ性を保つ、またはリアクティブ性を失わないためにも、この記事で挙げることを守りましょう。

data で全プロパティを宣言しておく

data:function(){
return {
hoge: {}
}
}

ではなく、


data:function(){
return {
hoge: {
elmA: null,
elmB: [],
}
}
}

このように、入れ子の項目もちゃんと宣言しておきます。

入れ子のdata項目は項目ごとに入れ替える

初期データを取得したときに

this.hoge = response.hoge;

と丸っとやりたいところですが、

this.hoge.elmA = reponse.hoge.elmA
this.hoge.elmB = reponse.hoge.elmB

と1つずつセットしていきましょう。

配列の初期化/変更はsplice(0)、追加はpush

配列項目は要注意です。扱いを統一しておかないと、すぐにリアクティブじゃなくなります。

メソッドの中で、

this.arrayA = []

こういうことをしたい事はよくありますが、すぐにリアクティブが失われるので、

this.arrayA.splice(0);

と書きましょう。初期化、変更は必ずspliceを使うように統一してください。

要素の追加は、pushです。

入れ子dataを使わなくていいようにコンポーネントを分割していく

入れ子の項目でも、リアクティブ性を保つことはできるのですが、なぜ?入れ子にする必要があるかと言うと、コンポーネント化されていないからです。

data:function(){
return {
hoge: {
elmA: null,
elmB: [],
}
}
}

このようなdata定義が必要なら、hogeコンポーネントを作るべきです。

そうすると、hogeコンポーネントのdataは、
data:function(){
return {
elmA: null,
elmB: [],
}
}

このように書けるはずです。リアクティブ性を保ちやすく、シンプルな構造になります。

スポンサーリンク

-Vue.js

Copyright© ノリックジオグラフィック for Webエンジニア , 2022 All Rights Reserved Powered by AFFINGER5.