Vue updated生命周期函数

3,355 阅读1分钟

Vue updated生命周期函数

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

无论是组件本身的数据变更,还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更,都会触发虚拟 DOM 重新渲染和打补丁,并在之后调用 updated。

举例:

<template>
    <div>
        <div v-for="(item, index) in list" :key="index">{{item}}</div>
    </div>
</template>
 
<script>
export default {
    data () {
        return {
            list: ['a','a','a']
        }
    },
    created () {
        setTimeout(_ => {
            this.list = ['b','b','b']
        }, 1000)
    },
    updated () {
        console.log('完成数据更新后的第二次tick渲染 finish re-render')
    }
}
</script>

总结

  1. 组件本身的数据变更会进入updated
  2. 父组件接收到的 props 在父组件中改变过,(data中的初始值被改变后传给子组件)
  3. 从vuex里面拿到的数据有变更

以上三种情况 都会触发虚拟 DOM 重新渲染和打补丁,并在之后调用 updated