Skip to content

Commit d55bfcf

Browse files
committed
add explanantion for data as a function
1 parent e2e7aa2 commit d55bfcf

File tree

1 file changed

+4
-2
lines changed

1 file changed

+4
-2
lines changed

src/api/index.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -363,7 +363,7 @@ type: api
363363

364364
- **Type:** `Object | Function`
365365

366-
- **Restriction:** Only accepts `Function` when used in `Vue.extend()`.
366+
- **Restriction:** Only accepts `Function` when used in a component definition.
367367

368368
- **Details:**
369369

@@ -373,6 +373,8 @@ type: api
373373

374374
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`.
375375

376+
When defining a **component**, `data` must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we still use a plain object for `data`, that same object will be **shared by reference** across all instance created! By providing a `data` function, every time a new instance is created, we can simply call it to return a fresh copy of the initial data.
377+
376378
If required, a deep clone of the original object can be obtained by passing `vm.$data` through `JSON.parse(JSON.stringify(...))`.
377379

378380
- **Example:**
@@ -532,7 +534,7 @@ type: api
532534

533535
- **Type:** `String | HTMLElement | Function`
534536

535-
- **Restriction:** only accepts type `Function` when used in `Vue.extend()`.
537+
- **Restriction:** only accepts type `Function` when used in a component definition.
536538

537539
- **Details:**
538540

0 commit comments

Comments
 (0)