This is the 12th day of my participation in the August Text Challenge.More challenges in August

introduce

Each Vue instance/component goes through a series of initialization procedures when it is created — for example, you need to set up data listeners, compile templates, mount the instance to the DOM, update the DOM when the data changes, and so on. There are also specific functions that run at certain stages of the process, called lifecycle hooks, which give users the opportunity to add their own code at different stages.

Below is a diagram of the Vue life cycle

Lifecycle hook functions in detail

*beforeCreate

After instance initialization, data Observer and Event/Watcher events are called before configuration. There is no access to data, compute properties, props in this lifecycle

 new Vue({
    el: '#app'.data: {
        name: 'Ming'.age: 18
    },
    beforeCreate() {
        console.log(
            'Component triggered after being instantiated, but the lifecycle phase data has not been initialized'.this.this.$data // undefined)}})Copy the code

created

Called immediately after the instance is created. In this step, the instance completes the configuration of data Observer, property and method operations, and watch/ Event event callbacks. However, the mount phase has not yet started and $EL Property is not currently available. (Do not manipulate the DOM elements in the page during this lifecycle because the elements have not yet been rendered.)

new Vue({
    el: '#app'.data: {
        name: 'Ming'.age: 18
    },
    created() {
        console.log(
            'Component is instantiated,data/ calculated properties /watch/methods have been configured, and some initial network request operations can be performed.'.this.this.$data 
        )
        this.getDataFromServer()
    },
    methods: {
        getDataFromServer() {
            console.log('Enable network request, request data from server')}}})Copy the code

*beforeMount

Called before mounting (rendering) begins: The relevant render function is called for the first time.

mounted

Called after the instance is mounted, when el is replaced by the newly created vm.$el. If the root instance is mounted to an element in a document, vm.$el is also in the document when Mounted is called.

Note: Mounted does not ensure that all child components are mounted together. If you want to wait until the entire view is rendered, use vm.$nextTick inside Mounted:

new Vue({
    el: '#app'.data: {
        name: 'Ming'.age: 18
    }
    beforeMount() {
        console.log('Instance to be rendered'.this.$refs) // this.$refs empty object
    },
    mounted() {
        console.log('Component mounted, mounted means instance rendered for the first time, this is a good time to manipulate the DOM.'.this.$refs) 
        // This.$refs element has been fetched
        this.$nextTick(() = > {
            // All subcomponents are mounted})}})Copy the code

beforeUpdate

Called when data is updated and occurs before the virtual DOM is updated and rendered. This is a good place to access the existing DOM before updating, such as manually removing event listeners that have been added.

updated

This hook is called after the DOM has been updated for rendering and patching of the virtual DOM due to data changes. When this hook is called, the component DOM has been updated, so you can now perform DOM-dependent operations.

In most cases, however, you should avoid changing status in the meantime. If you want to change state accordingly, it is usually best to use computed properties or Watcher instead.

Note: Updated does not guarantee that all child components will also be redrawn together. $nextTick updated if you want to wait until the entire view is redrawn, use vm.$nextTick:

 new Vue({
    el: '#app'.data: {
        name: 'Ming'.age: 18
    }
  beforeUpdate() {},  
  updated: function () {
      // There is no guarantee that all child components will be updated
      this.$nextTick(function () {
        // Ensure that all child components are updated})}})Copy the code

beforeDestroy

Called before instance destruction. At this step, the instance is still fully available. (We can still access the instance object’s property methods to compute the property DOM nodes during this lifecycle). This lifecycle should be cleaned up such as untying timers, canceling network requests, clearing up native event listeners, or creating DOM nodes in the Mounted phase

new Vue({
    el: '#app'.data: {
        name: 'Ming'.age: 18.index: 0
    },
    mounted() {
        // Start the wheel
       this.timer = setInterval(() = > {
           this.index++
       }, 1000);
    },
    beforeDestroy() {
        // Unbind timer
        clearInterval(this.timer)
    }
})
Copy the code

*destroyed

Called after instance destruction. When this hook is called, all instructions for the Vue instance are unbound, all event listeners are removed, and all subinstances are destroyed.

activated

Called when activated by a component cached by keep-alive.

deactivated

Called when a component cached by keep-alive is disabled.

<div id="app">
    <keep-alive>
        <component :is="show? 'demo': 'test'"></component>
    </keep-alive>

    <button @click="show = ! show">show/hidden</button>
</div>

<script>
    new Vue({
        el: '#app'.data: {
            show: true
        },
        components: {
            demo: {
                template: 
        
          I am a demo component 
        .mounted() {
                    console.log('Component mounted for the first time')},beforeDestroy() {
                    console.log('Component to be destroyed')},activated() {
                    console.log('Demo component activated')},deactivated() {
                    console.log('Demo component disabled')}},test: {
                template: '<h2 @click="count++">count{{count}}</h2>'.data() {
                    return {
                        count: 7}},activated() {
                    console.log('Test component activated')},deactivated() {
                    console.log('Test component is disabled')}}}})</script>
Copy the code

At the end

That’s all for today! See you next time! Code word is not easy, feel good you can move your little finger to praise what yo ~

series

Vue series

Vue Configuration Start (1)
Vue Event Binding (2)
Vue rendering instruction (3)
Vue Animation Transition (4)
Vue-todo Case (5)
Vue form data binding, Ref (6)
Vue compute properties and listeners (7)
Vue Components (8)
Vue Life Cycle (9)
Vue slot & Filter (ten)
Vue back pass ($emit event)

Vue – the Router series

Vue-router installation and use
Vue-router Indicates the routes configuration

Vuex series

Vuex series (1) — The use of Vuex
Vuex series (ii) — Modular use
Vuex series (3) — differences and usage between store.mit and store.dispatch
Vuex series (4) — Analysis of auxiliary function mapMutations

Vue Life Cycle (9)