<template>
  <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' }">
  </div>
  <p>Rendered <span>{{ renderCount }}</span> times.</p>
</template>

<script>
export default {
  data() {
    return {
      sliderVal: 50,
      renderCount: 0
    }
  },
  beforeUpdate() {
    this.renderCount++;
  }
}
</script>

<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;
}
</style>                  

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')