Skip to content

Commit 33b9f12

Browse files
bmacnaughtonchrisvfritz
authored andcommitted
Warn about modifying instance in hooks (vuejs#723)
* Warn about modifying instance in hooks I ended up spending a fair amount of time tracking down unpredictable behavior as a result of doing exactly that. I ended up writing components to display the "updated" count just for visual feedback on how often updates were taking place. I then wrote a component to do so and found that it worked when written certain ways but not in others, and yielded unpredictable results. I tried tracking them down. I had thought about the circular reference/infinite loop but presumed that Vue had detection logic and broke the chain when it detected the looping (and it seemed to). So I was trying to figure out what I didn't understand about components when one didn't work as I expected. See https://stackoverflow.com/questions/41780872/vue-js-component-updates-inconsistently for details if interested. It might make more sense not to introduce instance lifecycle events this early in the guide, but that's more major change. * add links to lifecycle API in instance.md
1 parent 8e5107d commit 33b9f12

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

src/v2/guide/instance.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ Consult the [API reference](../api) for the full list of instance properties and
7979

8080
## Instance Lifecycle Hooks
8181

82-
Each Vue instance goes through a series of initialization steps when it is created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it will also invoke some **lifecycle hooks**, which give us the opportunity to execute custom logic. For example, the `created` hook is called after the instance is created:
82+
Each Vue instance goes through a series of initialization steps when it is created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it will also invoke some **lifecycle hooks**, which give us the opportunity to execute custom logic. For example, the [`created`](../api/#created) hook is called after the instance is created:
8383

8484
``` js
8585
var vm = new Vue({
@@ -94,7 +94,7 @@ var vm = new Vue({
9494
// -> "a is: 1"
9595
```
9696

97-
There are also other hooks which will be called at different stages of the instance's lifecycle, for example `mounted`, `updated`, and `destroyed`. All lifecycle hooks are called with their `this` context pointing to the Vue instance invoking it. You may have been wondering where the concept of "controllers" lives in the Vue world and the answer is: there are no controllers. Your custom logic for a component would be split among these lifecycle hooks.
97+
There are also other hooks which will be called at different stages of the instance's lifecycle, for example [`mounted`](../api/#mounted), [`updated`](../api/#updated), and [`destroyed`](../api/#destroyed). All lifecycle hooks are called with their `this` context pointing to the Vue instance invoking it. You may have been wondering where the concept of "controllers" lives in the Vue world and the answer is: there are no controllers. Your custom logic for a component would be split among these lifecycle hooks.
9898

9999
## Lifecycle Diagram
100100

0 commit comments

Comments
 (0)