Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "Vue life cycle-related knowledge points", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the relevant knowledge points of the Vue life cycle" this article.

1. Life cycle (important) 1.1 preliminary understanding of Life cycle

Aliases: lifecycle callback function, lifecycle hook.

What is the life cycle? Some specially named functions that Vue calls for us at critical moments.

The name of the lifecycle function cannot be changed, but the details inside the function are written by the programmer.

The this in the lifecycle function also points to a vm or component instance object.

1.2 Lifecycle processes (8)

1. Initialization

1.beforeCreate ()

2.created ()

two。 Mount (page rendering)

1.beforeMount ()

2.mounted ()

3. Update

1.beforeUpdate ()

2.updated ()

4. Destroy

1.beforeDestory ()

2.destoryed ()

1.3 detailed flow chart of the life cycle

1.4 commonly used lifecycle hooks:

BeforeCreate (): you can configure the global event bus, which will be mentioned later

Mounted (): you can send ajax requests at this stage, start timers, bind custom events, subscribe messages and other asynchronous tasks [initialization]

BeforeDestroy (): do the finishing touches at this stage, such as clearing timers, unbinding custom events, unsubscribing messages, etc. [beginning and ending]

1.4.1 about destruction

After destruction, you can't see any information with Vue developer tools.

Custom events are invalidated after destruction, but native DOM events are still valid

Data is generally not manipulated in beforeDestroy, because even if it is manipulated, the update process is no longer triggered.

1.4.2 about the lifecycle of parent and child components

1. Load the process of rendering

Parent beforeCreate = > parent created = = > parent beforeMount = > child beforeCreate = = > child created = = > child beforeMount = = > child mounted = = > parent mounted

two。 The process of updating

Parent beforeUpdate = > Child beforeUpdate = > Child updated = = > parent updated

3. Destruction process

Parent beforeDestroy = > Child beforeDestroy = > Child destroyed = > parent destroyed1.5 small case Welcome to learn Vue! Click on me to destroy Vue.config.productionTip = false let vm = new Vue ({el:'# root', data: {opacity: 1}, methods: {des () {/ / trigger this function must be called, beforeDestroy () Destroyed () this.$destroy ()}}, mounted () {/ / mount / *-after the template parsing is completed and the original real DOM element is mounted to the page A function that is executed only once-this points to a method commonly used in Vue-when we want to read a property but can't read it. You can bind this attribute to elements that can be accessed together, such as the following example of a timer * / this.timer = setInterval (() = > {this.opacity-= 0.01 if (this.opacity)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.