Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lgc-vue lifecycle #55

Merged
merged 2 commits into from
Jul 18, 2018
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Update vue-en.md
  • Loading branch information
KieSun committed Jul 18, 2018
commit be3ae0aed7fdbbee26f815e376e582f4480f60c5
11 changes: 5 additions & 6 deletions Framework/vue-en.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*

- [NextTick principle analysis](#nexttick-principle-analysis)
- [Lifecycle analysis](# Lifecycle analysis)
- [Lifecycle analysis](#Lifecycle analysis)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# NextTick principle analysis

`nextTick` allows us to defer the callback to be executed after the next DOM update cycleto get the updated DOM.
`nextTick` allows us to defer the callback to be executed after the next DOM update cycle, to get the updated DOM.

Before version 2.4, Vue used microtasks, but the priority of microtasks is too high, and in some cases, it may faster than event bubbling, but if you use macrotasks, there may be some issues of rendering performance. So in the new version, microtasks will be used by default, but macrotasks will be used in special cases, such as v-on.

Expand Down Expand Up @@ -82,7 +82,7 @@ The lifecycle function is the hook function that the component will trigger when

![](https://user-gold-cdn.xitu.io/2018/7/12/1648d9df78201f07?w=1200&h=3039&f=png&s=50021)

The following code will be called at initialization, and lifecycle is called by `callHook`
The following code will be called at initialization, and lifecycle is called by `callHook`

```js
Vue.prototype._init = function(options) {
Expand Down Expand Up @@ -112,8 +112,7 @@ export function mountComponent {
}
```

`beforeMount` will be executed before mounting the instance, then starts to create the VDOM and replace it with the real DOM, and finally runs the `mounted` hook. And there’s a judgment logic here that if it is an external `new Vue({}) `, `$vnode` doesn’t exist, so the `mounted` hook will be executed directly. If there are child components, they will be mounted recursively, only when all the child components are mounted, the mount hooks of the root components will be executed.

`beforeMount` will be executed before mounting the instance, then starts to create the VDOM and replace it with the real DOM, and finally call the `mounted` hook. And there’s a judgment logic here that if it is an external `new Vue({}) `, `$vnode` doesn’t exist, so the `mounted` hook will be executed directly. If there are child components, they will be mounted recursively, only when all the child components are mounted, the mount hooks of the root components will be executed.

Next, it comes to the hook function that will be called when the data is updated.

Expand Down Expand Up @@ -204,4 +203,4 @@ Vue.prototype.$destroy = function() {
}
```

The `beforeDestroy` hook function will be called before the destroy operation is performed, and then a series of destruction operations are performed. If there are child components, they will be destroyed recursively, and only when all the child components are destroyed, the hook `destroyed` of the root component will be executed.
The `beforeDestroy` hook function will be called before the destroy operation is performed, and then a series of destruction operations are performed. If there are child components, they will be destroyed recursively, and only when all the child components are destroyed, the hook `destroyed` of the root component will be executed.