Tag Archives: computed

Vueのpropsとdata

dataとprops

dataはコンポーネントのプライベートなデータ。propsは他のコンポーネント(親)から設定されるデータ。子コンポーネントではpropsを変更できない。

Vueのコンポーネントはツリー状に構築される。親コンポーネントのdataは子コンポーネントに渡され、子ではそれをpropsとして参照する。

以下のコードは親コンポーネントのコード:

このコードでは子コンポーネントmychildのpropsであるmsgに”Hello World!”を渡している。mychildではmsgを変更できない。
(注)実際変更はできるがやらないほうがいい。

よってmychildコンポーネントでは自分のデータはdata()で管理する。data()はそのコンポーネントのみのデータなので他のコンポーネントによって変更されることはない。
(注)実際にはできるがやらないほうがいい。

親から子にデータを渡すときはpropsを使うが、逆に子から親へデータを渡すときはイベントを使う。イベントに関しては今回はスルー。

watcherとcomputed

watcher

Vueのコンポーネントではpropsの変更に対応する必要がある。watcherはプロパティを監視し、それが変更されたとき関数を実行する。

以下の例ではmsgやnameが変更されたとき、ログを表示する。

watcherはすべてのリアクティブプロパティで利用できる。これにはcomputed、props、data()内のデータも含まれる。date()は自分で設定するので通常は必要ない。

computed

Computedはあるデータから新しいデータを構築する。

以下の例では、nameが変更されると、nameLenが再構築される。nameLenはテンプレート内で{{ nameLen }}のように利用できる。

まとめ

data()はそのコンポーネントでのみ使うプライベートなデータ。
propsは親コンポーネントによって設定されるデータ。
watcherはデータが変更されるとき呼ばれる関数。
computedはデータが変更されたとき、それに依存するデータを設定するための関数。

.vueソース

ボタンがクリックされるとnameが変更され、nameLenが変更される。