Vue.jsは気難しい(オブジェクト編)
本記事は Vue 2.2 時代(2017/03頃)に記載したものです。
最新のVueでは未検証です(たぶん通用すると思う)ご留意ください。
はじめに
Vue.jsはインスタンスが持つプロパティ(dataやprops)の変更を検知して、DOMの内容を変更したり、イベントの発火を行うことができる。
だが、それはdataやprops配下のオブジェクトの、変更を検知する機構が重要であるため
プレーンなJSのやりかたでオブジェクトを変更すると、その機構を失ってしまう。
失ってしまうとあら大変、オブジェクト内の値を変更してもDOMに反映されないし、vue-devtoolsにも表示されないという迷宮に、僕らは迷い込む。
そうならないための注意点です。
オブジェクトの気の遣い方
キーを追加したい
player
オブジェクトに job
キー(プロパティ)を追加する
(オブジェクトはそのキーを持っていないとする)
× いつものやり方でキー追加すると、検知機構を持たないプロパティになってしまう
this.player.job = { company: "インクリメンツ", income: "800" }};
○ setを使おう
this.$set(this.player, "job", { company: "インクリメンツ", income: "800" });
※ここで記載しているthisはコンポーネントのことです。
つまりコンポーネント内での記載を前提としています。
Vue.set(obj, key, val);
っていう方法でもできる(実は this.$set()
は Vue.set()
のエイリアス)けど、見通しが悪くなるので知らなくていいと思います。
複数のキーを一度に追加したい
△ Object.assignを使う
this.someObject = Object.assign({}, this.someObject, { company: "インクリメンツ", income: "800" });
これ、公式リファレンスにも記載されているやりかただけど、使わないほうがいいんじゃないかな…(なんか次のバージョンとかで非推奨になりそうな予感がする)
追加したいキーの数だけ$setを実行するとか
上記$setで予め構築しておいたオブジェクトを追加するなどしたほうがいい
var job = {
company: "インクリメンツ",
income: "800"
};
this.$set(this.player, "job", job);
(追記)
Object.assign()
は、IE非対応なので注意! 参考 Object.assign()
おわりに
Vue.jsの冒頭の説明にある「プレーンなオブジェクトのまま管理します」みたいな文言は嘘だよなと思う。
配列編も記載しているので、見てね
Author And Source
この問題について(Vue.jsは気難しい(オブジェクト編)), 我々は、より多くの情報をここで見つけました https://qiita.com/tmak_tsukamoto/items/7623f458448fa7cd01c7著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .