Vue onBeforeUpdate()、onUpdated() 组件视图更新生命周期钩子

onBeforeUpdate()、onUpdated() 

这二个生命周期。执行顺序依次：

onBeforeUpdate() ===》  onUpdated() 

使用前需要被引入：

import {
    onBeforeUpdate,
    onUpdated
} from 'vue'

 

onBeforeUpdate()

@当组件因响应式状态变化，且该响应式状态会影响视图。此时先触发此事件，然后再更新视图。

 

onUpdated()

@当组件因响应式状态变化，且该响应式状态更新了视图之后，触发此事件。

 

事件流程图

 

 

注意细节：

如果在H5端，将响应式变化放置在非dom节点时，比如view内时，不会触发这二个事件。但在app端时，不影响。比如：

<template>
    <view>{{ count }}</view>
  <button id="count" @click="count++">{{ count }}</button>
</template>

<script setup>
    import {
        ref,
        onUpdated
    } from 'vue'
    
    const count = ref(0)
    
    // 此事件在H5端不会触发，因为响应式不在DOM节点，而在view内
    onUpdated(()=>{
        console.log('视图发生变化');
    })
</script>