|
6 | 6 |
|
7 | 7 | - **Details:** |
8 | 8 |
|
9 | | - The function that returns a data object for the Vue instance. In `data`, we don't recommend to observe objects with their own stateful behavior like browser API objects and prototype properties. A good idea would be to have here just a plain object that represents component data. |
| 9 | + The function that returns a data object for the component instance. In `data`, we don't recommend to observe objects with their own stateful behavior like browser API objects and prototype properties. A good idea would be to have here just a plain object that represents component data. |
10 | 10 |
|
11 | 11 | Once observed, you can no longer add reactive properties to the root data object. It is therefore recommended to declare all root-level reactive properties upfront, before creating the instance. |
12 | 12 |
|
13 | | - After the instance is created, the original data object can be accessed as `vm.$data`. The Vue instance also proxies all the properties found on the data object, so `vm.a` will be equivalent to `vm.$data.a`. |
| 13 | + After the instance is created, the original data object can be accessed as `vm.$data`. The component instance also proxies all the properties found on the data object, so `vm.a` will be equivalent to `vm.$data.a`. |
14 | 14 |
|
15 | | - Properties that start with `_` or `$` will **not** be proxied on the Vue instance because they may conflict with Vue's internal properties and API methods. You will have to access them as `vm.$data._property`. |
| 15 | + Properties that start with `_` or `$` will **not** be proxied on the component instance because they may conflict with Vue's internal properties and API methods. You will have to access them as `vm.$data._property`. |
16 | 16 |
|
17 | 17 | - **Example:** |
18 | 18 |
|
19 | 19 | ```js |
20 | 20 | // direct instance creation |
21 | 21 | const data = { a: 1 } |
22 | 22 |
|
23 | | - // The object is added to a Vue instance |
| 23 | + // The object is added to a component instance |
24 | 24 | const vm = Vue.createApp({ |
25 | 25 | data() { |
26 | 26 | return data |
|
92 | 92 |
|
93 | 93 | - **Details:** |
94 | 94 |
|
95 | | - Computed properties to be mixed into the Vue instance. All getters and setters have their `this` context automatically bound to the Vue instance. |
| 95 | + Computed properties to be mixed into the Vcomponent instance. All getters and setters have their `this` context automatically bound to the component instance. |
96 | 96 |
|
97 | 97 | Note that if you use an arrow function with a computed property, `this` won't be the component's instance, but you can still access the instance as the function's first argument: |
98 | 98 |
|
|
143 | 143 |
|
144 | 144 | - **Details:** |
145 | 145 |
|
146 | | - Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the Vue instance. |
| 146 | + Methods to be mixed into the component instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the component instance. |
147 | 147 |
|
148 | 148 | :::tip Note |
149 | | - Note that **you should not use an arrow function to define a method** (e.g. `plus: () => this.a++`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.a` will be undefined. |
| 149 | + Note that **you should not use an arrow function to define a method** (e.g. `plus: () => this.a++`). The reason is arrow functions bind the parent context, so `this` will not be the component instance as you expect and `this.a` will be undefined. |
150 | 150 | ::: |
151 | 151 |
|
152 | 152 | - **Example:** |
|
177 | 177 |
|
178 | 178 | - **Details:** |
179 | 179 |
|
180 | | - An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The Vue instance will call `$watch()` for each entry in the object at instantiation. |
| 180 | + An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The component instance will call `$watch()` for each entry in the object at instantiation. |
181 | 181 |
|
182 | 182 | - **Example:** |
183 | 183 |
|
|
244 | 244 | ``` |
245 | 245 |
|
246 | 246 | ::: tip Note |
247 | | - Note that _you should not use an arrow function to define a watcher_ (e.g. `searchQuery: newValue => this.updateAutocomplete(newValue)`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.updateAutocomplete` will be undefined. |
| 247 | + Note that _you should not use an arrow function to define a watcher_ (e.g. `searchQuery: newValue => this.updateAutocomplete(newValue)`). The reason is arrow functions bind the parent context, so `this` will not be the component instance as you expect and `this.updateAutocomplete` will be undefined. |
248 | 248 | ::: |
249 | 249 |
|
250 | 250 | - **See also:** [Watchers](../guide/computed.html#watchers) |
|
290 | 290 | } |
291 | 291 | }) |
292 | 292 | ``` |
293 | | - |
| 293 | + |
294 | 294 | ::: tip Note |
295 | 295 | Events listed in the `emits` option **will not** be inherited by the root element of the component and also will be excluded from the `$attrs` property. |
296 | 296 | ::: |
297 | | - |
298 | 297 |
|
299 | | -- **See also:** [Attribute Inheritance](../guide/component-props.html#non-prop-attributes) |
| 298 | +* **See also:** [Attribute Inheritance](../guide/component-props.html#non-prop-attributes) |
0 commit comments