This hook is called after the virtual DOM is re-rendered and patched due to data changes.

Updated is invoked when data changes to the component itself, props received from the parent component, or data received from the VUEX trigger the virtual DOM to be re-rendered and patched.

It’s worth noting, for example:

example

<template>
    <div>
        <div v-for="(item, index) in list" :key="index">{{item}}</div>
    </div>
</template>
 
<script>
export default {
    data () {
        return {
            list: [1, 1, 1]
        }
    },
    created () {
        setTimeout(_ => {
            this.list = [2, 2, 2]
        }, 1000)
    },
    updated () {
        console.log('App.vue finish re-render')
    }
}
</script>
Copy the code

The results

The page first renders a list of 3 1s, then after 1s the page redraws to 3 2s and logs’ app. vue finish re-render ‘.

Pay attention to

Create lifecycle function setTimeout = this.list = [1, 1, 1]; “app. vue finish re-render”; This is because the pointer to this.list has changed.

Q: When will the updated methods be updated? A: The updated method is only updated when the data variable such as arrData is changed and the page is re-rendered {{arrData}}.

Data: {arrData:[1, 2, 3]}, updated: function(){console.log("1== I will execute first "); This.$nextTick(function(){// Execute this callback at the end of the next DOM update loop. Use this method immediately after modifying the data to get the updated dom.console. log("3== I will not execute immediately until the page is rendered "); }) console.log("2== I'll do it last but before $nextTick ")}Copy the code