`onBeforeUpdate()`

Registers a callback run right before the DOM is patched on re-render.

Since Vue 3.0 Spec ↗

Syntax

onBeforeUpdate(callback): void

Parameters

Name	Type	Required	Description
`callback`	`() => void`	No	Function run before a reactive update modifies the DOM.

Returns

void — Nothing; registers the hook.

Examples

<script setup lang="ts">
import { ref, onBeforeUpdate } from 'vue';

const count = ref(0);
onBeforeUpdate(() => {
  console.log('DOM still shows old value here');
});
</script>

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

Notes

Fires after state changed but before Vue applies the change to the DOM, so the DOM still reflects the previous render. Useful to capture pre-update DOM state (e.g. scroll position) to restore after onUpdated.