Vue.js で dataの配列内やオブジェクトのプロパティの値がうまく更新されない時

例えば、以下みたいな時、
配列の各要素を直接更新したい、
オブジェクトのプロパティを新しく追加したい、

data(){
  return {
    items:[10,10,10],
    obj:{}
  }
},

methods:{
  updateItem(){
    // 追加されない！
    this.items[0] += 1
  },
  updateObj(){
    // 追加されない
    this.obj.hoge = 1
  }
}

更新されない！なんで！？
ということはよくあるはず。

その場合は、
配列は、以下のように

this.$set(this.items, index, '更新したい値');

this.items.splice(index, 1, '更新したい値');

オブジェクト、以下のように

this.$set(this.obj, "hoge", 1);

this.obj = Object.assign({}, this.obj, { huga: 2, baz: 3 });

すると、ちゃんと反映されます。

codesandbox.io

注意としては
ルートレベルのリアクティブなプロパティを動的に追加することはできない、
あくまでネストされたものだけ、更新、追加出来る、ということ。

ルートレベルのものについては、値が空でもよいのであらかじめプロパティを用意しないとダメです。

■参考記事 リアクティブの探求 — Vue.js

javascriptやcssの命名規則のメモ

すぐ名前を忘れるのでメモ

名前	例	用途
スネークケース	young_man	bemとか？
キャメルケース	youngMan	関数、メソッド
パスカルケース	YoungMan	Class
ケバブケース	young-man	コンポーネント

ケバブは串刺しだかららしい、覚えやすい。
キャメルとパスカルでいつもわからなくなる。

Reactのライフサイクル

Reactでライフサイクルについて学ぶ。
毎回、忘れるので忘備録も兼ねて、文章で読んでもイマイチ頭に入らないのでモックで挙動を確認するのが一番いい。

codesandbox.io

componentWillMount

• コンポーネントがDOMツリーに追加される直前に一度だけ呼ばれる
• 初期化に使える
• ここでsetState()した場合は更新後の値が使われる
• React 17.0で廃止予定

componentDidMount

• 最初のrenderが実行された直後に実行される
• DOMへのアクセスが可能なので要素の初期化処理に使える

componentWillReceiveProps

• コンポーネントがPropsを受け取るたびに呼ばれる
• 新しいモノと古いモノ２つを参照出来る

shouldComponentUpdate

• trueを返すと再描画される falseだとされない
• propsやstateは更新されたけど、描画は変化無し、みたいな時に再描画するのがもったいないので、その時はfalseにしたりする

componentWillUpdate

• コンポーネントのPropsやStateの変更で描画する直前に呼び出される
• 初期描画時は呼ばれない
• React17.0 で廃止予定

componentDidUpdate

• コンポーネントのPropsやStateの変更で描画が行われた直後に実行される
• 初期描画時は呼ばれない

componentWillUnmount

• コンポーネントがDOMから削除される直前に呼ばれる
• イベントやタイマーのキャンセルに使う

図だと、この記事がわかりやすい。 qiita.com