From 86b6fec96d305d44b4c1d456153365dfee413f49 Mon Sep 17 00:00:00 2001 From: Bruce MacNaughton Date: Sat, 21 Jan 2017 14:48:58 -0800 Subject: [PATCH 1/2] 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. --- src/v2/guide/instance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md index 5d9579d349..5dfc9ff0b5 100644 --- a/src/v2/guide/instance.md +++ b/src/v2/guide/instance.md @@ -94,7 +94,7 @@ var vm = new Vue({ // -> "a is: 1" ``` -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. +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. Warning: do not change the state of the instance in these hooks because it can cause an endless loop of updates. ## Lifecycle Diagram From bb69f54876eab0e2dae1110caf423b7eebefc52a Mon Sep 17 00:00:00 2001 From: Chris Fritz Date: Wed, 25 Jan 2017 19:19:34 -0500 Subject: [PATCH 2/2] add links to lifecycle API in instance.md --- src/v2/guide/instance.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md index 5dfc9ff0b5..375a8e8e2a 100644 --- a/src/v2/guide/instance.md +++ b/src/v2/guide/instance.md @@ -79,7 +79,7 @@ Consult the [API reference](../api) for the full list of instance properties and ## Instance Lifecycle Hooks -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: +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: ``` js var vm = new Vue({ @@ -94,7 +94,7 @@ var vm = new Vue({ // -> "a is: 1" ``` -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. Warning: do not change the state of the instance in these hooks because it can cause an endless loop of updates. +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. ## Lifecycle Diagram