<template>
  <h1>Lifecycle Hook 'updated' Example</h1>
  <p>Using the 'updated' lifecycle hook to count how many times the page has been rendered.</p>
  <p>Slider value <input type="range" v-model="sliderVal"> {{ sliderVal }}</p>
  <p>In this example, we write the render count to the console, because making changes  to the view would re-activate the updated hook and create an infinite loop.</p>
</template>

<script>
export default {
  data() {
    return {
      sliderVal: 50,
      renderCount: 0
    }
  },
  updated() {
    this.renderCount++;
    console.log('Updated ' + this.renderCount + ' times.')
  }
}
</script>

<style scoped>
span {
  background-color: lightgreen;
}
</style>                  

import { createApp } from 'vue'

import App from './App.vue'

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