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>
总结
- 组件本身的数据变更会进入updated
- 父组件接收到的 props 在父组件中改变过,(data中的初始值被改变后传给子组件)
- 从vuex里面拿到的数据有变更
以上三种情况 都会触发虚拟 DOM 重新渲染和打补丁,并在之后调用 updated