dataとprops
dataはコンポーネントのプライベートなデータ。propsは他のコンポーネント（親）から設定されるデータ。子コンポーネントではpropsを変更できない。
Vueのコンポーネントはツリー状に構築される。親コンポーネントのdataは子コンポーネントに渡され、子ではそれをpropsとして参照する。
以下のコードは親コンポーネントのコード：
|
1 |
<mychild msg="Hello World!" /> |
このコードでは子コンポーネントmychildのpropsであるmsgに”Hello World!”を渡している。mychildではmsgを変更できない。
（注）実際変更はできるがやらないほうがいい。
よってmychildコンポーネントでは自分のデータはdata()で管理する。data()はそのコンポーネントのみのデータなので他のコンポーネントによって変更されることはない。
（注）実際にはできるがやらないほうがいい。
親から子にデータを渡すときはpropsを使うが、逆に子から親へデータを渡すときはイベントを使う。イベントに関しては今回はスルー。
watcherとcomputed
watcher
Vueのコンポーネントではpropsの変更に対応する必要がある。watcherはプロパティを監視し、それが変更されたとき関数を実行する。
以下の例ではmsgやnameが変更されたとき、ログを表示する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<template> <div class="hello"> <h1>{{ msg }}</h1> <button @click="click">BUTTON</button> </div> </template> <script> export default { name: "HelloWorld", props: { msg: String }, data() { return { name: "" } }, methods: { click() { console.log("click"); this.name = "newname"; } }, watch: { msg() { console.log("watch msg"); }, name() { console.log("watch name"); } } }; </script> |
watcherはすべてのリアクティブプロパティで利用できる。これにはcomputed、props、data()内のデータも含まれる。date()は自分で設定するので通常は必要ない。
computed
Computedはあるデータから新しいデータを構築する。
以下の例では、nameが変更されると、nameLenが再構築される。nameLenはテンプレート内で{{ nameLen }}のように利用できる。
|
1 2 3 4 5 6 7 |
... computed: { nameLen() { return this.name.length } } ... |
まとめ
data()はそのコンポーネントでのみ使うプライベートなデータ。
propsは親コンポーネントによって設定されるデータ。
watcherはデータが変更されるとき呼ばれる関数。
computedはデータが変更されたとき、それに依存するデータを設定するための関数。
.vueソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<template> <div class="hello"> <h1>{{ msg }}</h1> NAME={{name}} LEN={{ nameLen }} <button @click="click">BUTTON</button> </div> </template> <script> export default { name: "HelloWorld", props: ["msg"], data() { return { name: "" }; }, methods: { click() { console.log("click"); this.name = "newname"; } }, watch: { msg() { console.log("watch msg"); }, name() { console.log("watch name"); } }, computed: { nameLen() { return this.name.length } } }; </script> <style scoped> </style> |
ボタンがクリックされるとnameが変更され、nameLenが変更される。