# Data
# data
型:
Function詳細:
コンポーネントインスタンスのデータオブジェクトを返す関数です。
dataでは、ブラウザの API オブジェクトや prototype プロパティのような独自のステートフルな振る舞いをするオブジェクトを監視することはお勧めしません。よい考え方としては、コンポーネントのデータを表すただのプレーンオブジェクトをここで持つべきです。一度監視されると、ルートのデータオブジェクトにリアクティブなプロパティを追加することはできなくなります。そのため、インスタンスを作成する前に、すべてのルートレベルのリアクティブプロパティを前もって宣言しておくことをお勧めします。
インスタンスが作成された後に、
vm.$dataとして元のデータオブジェクトアクセスできます。コンポーネントインスタンスは、データオブジェクトのすべてのプロパティをプロキシするため、vm.aはvm.$data.aと同じになります。Vue の内部プロパティや API メソッドと競合する可能性があるため、
_や$からはじまるプロパティはコンポーネントインスタンスで プロキシされません。これらはvm.$data._propertyとしてアクセスする必要があります。例:
// 直接インスタンスを生成 const data = { a: 1 } // コンポーネントインスタンスにオブジェクトを追加 const vm = createApp({ data() { return data } }).mount('#app') console.log(vm.a) // => 11
2
3
4
5
6
7
8
9
10
11dataプロパティでアロー関数を使う場合、thisはコンポーネントのインスタンスになりませんが、関数の第 1 引数としてそのインスタンスにアクセスできるということは忘れないでください。data: vm => ({ a: vm.myProp })1参照: リアクティビティの探求
# props
型:
Array<string> | Object詳細:
親コンポーネントからデータを受け取るために公開されている属性のリストかハッシュです。配列ベースの単純な構文と、型チェックやカスタムバリデーション、デフォルト値などの高度な設定ができるオブジェクトベースの構文があります。
オブジェクトベースの構文では、以下のオプションを使用できます:
type: 次のネイティブコンストラクタのいずれかになります:String、Number、Boolean、Array、Object、Date、Function、Symbol、任意のカスタムコンストラクタ関数、またはそれらの配列。プロパティが与えられた型を持っているか確認して、そうでない場合には警告を出します。プロパティの型について 詳細な情報 を参照してください。default:anyプロパティのデフォルト値を指定します。プロパティが渡されない場合、この値が変わりに使用されます。オブジェクト、または配列のデフォルト値はファクトリ関数から返さなければなりません。required:Booleanプロパティが必須かどうかを定義します。非本番環境では、この値が true ならプロパティが渡されない場合、コンソールに警告を出します。validator:Functionプロパティの値を唯一の引数として受け取るカスタムバリデータ関数です。非本番環境では、この関数が false を返す場合（例えばバリデーションが失敗した場合）、コンソールに警告を出します。プロパティのバリデーションについて、詳しくは こちら を参照してください。
例:
const app = createApp({}) // 単純な構文 app.component('props-demo-simple', { props: ['size', 'myMessage'] }) // バリデーションありのオブジェクト構文 app.component('props-demo-advanced', { props: { // 型チェック height: Number, // 型チェックと追加のバリデーション age: { type: Number, default: 0, required: true, validator: value => { return value >= 0 } } } })1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23参照: プロパティ
# computed
型:
{ [key: string]: Function | { get: Function, set: Function } }詳細:
コンポーネントのインスタンスに混入される算出プロパティです。すべてのゲッターとセッターは、そのコンポーネントのインスタンスへ自動的に束縛される
thisコンテキストを持っています。算出プロパティでアロー関数を使う場合、
thisはコンポーネントのインスタンスになりませんが、関数の第 1 引数としてそのインスタンスにアクセスできるということは忘れないでください。:computed: { aDouble: vm => vm.a * 2 }1
2
3算出プロパティはキャッシュされ、リアクティブな依存の変更でのみ再計算されます。ある依存がインスタンスのスコープ外にある場合（例えばリアクティブでない場合）、算出プロパティは 更新されない ことに注意してください。
例:
const app = createApp({ data() { return { a: 1 } }, computed: { // 取得のみ aDouble() { return this.a * 2 }, // 取得と値の設定の両方 aPlus: { get() { return this.a + 1 }, set(v) { this.a = v - 1 } } } }) const vm = app.mount('#app') console.log(vm.aPlus) // => 2 vm.aPlus = 3 console.log(vm.a) // => 2 console.log(vm.aDouble) // => 41
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参照: 算出プロパティ
# methods
型:
{ [key: string]: Function }詳細:
コンポーネントのインスタンスに混入されるメソッドです。これらのメソッドは、VM インスタンスで直接アクセスすることも、ディレクティブ式で使うこともできます。すべてのメソッドは、コンポーネントインスタンスに自動的に束縛された
thisコンテキストを持ちます。Note
メソッドの定義にアロー関数を使ってはいけない ということに注意してください（例:
plus: () => this.a++）。その理由は、アロー関数が親のコンテキストを束縛するため、thisが期待したとおりのコンポーネントインスタンスにならないのと、this.aが未定義になるからです。例:
const app = createApp({ data() { return { a: 1 } }, methods: { plus() { this.a++ } } }) const vm = app.mount('#app') vm.plus() console.log(vm.a) // => 21
2
3
4
5
6
7
8
9
10
11
12
13
14
15参照: イベントハンドリング
# watch
型:
{ [key: string]: string | Function | Object | Array}詳細:
キーが監視するリアクティブなプロパティで、例えば data または computed プロパティを含み、値が対応するコールバックとなるオブジェクトです。値はメソッド名の文字列や、追加のオプションを含むオブジェクトを指定することもできます。コンポーネントインスタンスはインスタンス化の際に、オブジェクトの各エントリに対して
$watch()を呼び出します。deep、immediate、またはflushオプションの詳細については $watch を参照してください。例:
const app = createApp({ data() { return { a: 1, b: 2, c: { d: 4 }, e: 5, f: 6 } }, watch: { // トップレベルのプロパティを監視 a(val, oldVal) { console.log(`new: ${val}, old: ${oldVal}`) }, // メソッド名の文字列 b: 'someMethod', // 監視しているオブジェクトのプロパティが変更されると入れ子の深さに関わらずコールバックが呼び出されます c: { handler(val, oldVal) { console.log('c changed') }, deep: true }, // 入れ子になった 1 つのプロパティを監視 'c.d': function (val, oldVal) { // do something }, // 監視が開始した直後にコールバックが呼び出されます e: { handler(val, oldVal) { console.log('e changed') }, immediate: true }, // コールバックの配列を渡せて、それらは 1 つずつ呼び出されます f: [ 'handle1', function handle2(val, oldVal) { console.log('handle2 triggered') }, { handler: function handle3(val, oldVal) { console.log('handle3 triggered') } /* ... */ } ] }, methods: { someMethod() { console.log('b changed') }, handle1() { console.log('handle 1 triggered') } } }) const vm = app.mount('#app') vm.a = 3 // => new: 3, old: 11
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64Note
ウォッチャの定義にアロー関数を使ってはいけない ということに注意してください（例:
searchQuery: newValue => this.updateAutocomplete(newValue)）。その理由は、アロー関数が親のコンテキストを束縛するため、thisは期待したとおりのコンポーネントインスタンスにはならないのと、this.updateAutocompleteが未定義になるからです。参照: ウォッチャ
# emits
型:
Array<string> | Object詳細:
コンポーネントから発行されるカスタムイベントのリストやハッシュです。配列ベースの単純な構文と、イベントのバリデーションを設定できるオブジェクトベースの構文があります。
オブジェクトベースの構文では、各プロパティの値は
nullか、バリデーション関数のどちらかです。バリデーション関数は$emitの呼び出しに渡された追加の引数を受け取ります。例えば、this.$emit('foo', 1)が呼び出された場合、fooに対応するバリデータは、引数1を受け取ります。バリデーション関数は、イベントの引数が妥当かどうかを示すブール値を返す必要があります。使用方法:
const app = createApp({}) // 配列の構文 app.component('todo-item', { emits: ['check'], created() { this.$emit('check') } }) // オブジェクトの構文 app.component('reply-form', { emits: { // バリデーションなし click: null, // バリデーションあり submit: payload => { if (payload.email && payload.password) { return true } else { console.warn(`Invalid submit event payload!`) return false } } } })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
27Note
emitsオプションにリスト化されたイベントは、コンポーネントのルート要素には 継承されません。また、$attrsプロパティからも除外されます。
- 参照: 属性の継承