Get your own Vue server
  <h1>Lifecycle Hook 'beforeUpdate' Example</h1>
  <p>When the 'sliderVal' property gets a new value from the slider, a new render is triggered because the page must be updated.</p>
  <p>The 'beforeUpdate' lifecycle hook is used to count how many times a new page render is triggered.</p>
  <p>Move image: <input type="range" v-model="sliderVal" min="0" max="200"> {{ sliderVal }} px</p>
  <div id="wrapper">
    <img src="/img_apple.svg" v-bind:style="{ left: sliderVal + 'px' }">
  <p>Rendered <span>{{ renderCount }}</span> times.</p>

export default {
  data() {
    return {
      sliderVal: 50,
      renderCount: 0
  beforeUpdate() {

<style scoped>
#wrapper {
  height: 100px;
  width: 300px;
  position: relative;
  border: solid black 3px;
img {
  height: 100px;
  scale: 1;
  background-color: lightblue;
  position: absolute;
  top: 0;
span {
  background-color: lightgreen;
import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)