Detailed explanation of Vue life cycle functions

Lifecycle Functions

Life cycle functions are also called: life cycle callback functions, life cycle functions, life cycle hooks

What is it: Vue helps us call some functions with special names at critical moments

The name of the life cycle function cannot be changed, but the specific content of the function is written by the programmer according to the needs

This in the lifecycle function refers to vm or component instantiation object

Common life cycle hooks

1. mounted : send ajax request, start timer, bind custom event subscription message and other functions [initialization operation]

2. beforeDestory : clear timers, unbind custom events, unsubscribe messages, etc. [beginning and end work]

About Vue destroy instance:

1. After destruction, no information can be seen with the help of Vue developer tools

2. Custom events will become invalid after destruction, but native DOM events are still valid

3. Generally, data will not be operated in beforeDestory, because even if the data is operated, the update process will no longer be triggered.

 <div id="root">
        <h2 :style="{opacity}"> Welcome to learn Vue's life cycle</h2>
        <button @click="stop">Click me to stop the change</button>

    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                opacity: 1,
            },
            methods: {
                stop() {
                    // clearInterval(this.timer)
                    this.$destroy();
                }
            },
            //After Vue completes template parsing and puts the real initial DOM element into the page (mounting is complete), call mounted
            mounted() {

                this.timer = setInterval(() => {
                    this.opacity -= 0.01;
                    if (this.opacity <= 0)
                        this.opacity = 1;

                }, 16)
            },
            beforeDestroy() {
                console.log('vm is about to travel to the west');
                clearInterval(this.timer)
            }
        })
    </script>

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!