With every MVVM framework, the ecological cycle becomes particularly important. What ecological functions vUE has, you can look at, and how to use them

Vue life cycle functions are briefly listed

See the Options/Lifecycle hooks for details

1. beforeCreate

Before the module is created, this refers to the object itself and does nothing

2. created

All getters, data, and so on are observed and the data content can be obtained

3. beforeMount

Check to see if there is anything associated with el, if not, stop down until vm.$mount(el) has mounted the real element, at which point the created this.$el is available

This hook is not called during server-side rendering

3.1 render

In Vue, there is also a render function that renders the page. But there is no Component

<div id="app">HTML template</div>
<script>
new Vue({
    el:"#app",
    template:"The template template",
    render(r){ r('h1'.'Function Render template')}})</script>
Copy the code

Render function option > Template option > HTML template.

4. mounted

This hook is not called during server-side rendering.

After the page template has been parsed, everything is ready, but there is no guarantee that all the child components will be mounted to the page. If you need the content of a DOM element at this point, it is best to use this.$nextTick().

5. activated

This hook is not called during server-side rendering

This periodic function is triggered when

is enabled after vue-router is introduced and the component of the page routing map is entered

6. beforeUpdate

This hook is not called during server-side rendering because only the initial rendering takes place on the server side

When data data is modified, the virtual DOM is called before updating the actual DOM

7. updated

This hook is not called during server-side rendering

Called after page DOM replacement is complete

8. deactivated

This hook is not called during server-side rendering

Route is called before leaving the current page

9. beforeDestroy

This hook is not called during server-side rendering

Called before the component is destroyed

10. destroyed

This hook is called during server-side rendering without being destroyed by the calling component

11. errorCaptured

Intercepting child component error return false prevents further bubbling

Previous chapter how to write pages with Vue + typescript (Vuex Decorator Supplement — Store Decorator)