<template>
  <h1>v-memo Example</h1>
  <p>Click the button to randomly replace pink circles with blue circles.</p>
  <p>Click the area with circles to re-render using the v-memo directive.</p>
  <button v-on:click="addBlue">Replace Circles</button>
  Circles replaced: {{ blueCircNmbr }}
  <div id="wrapper" v-on:click="this.updateProp++">
    <div 
      v-for="x in circle" 
      :style="{ backgroundColor: x.color }"
      :key="x.key"
      v-memo="[updateProp]"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      circle: [],
      blueCircNmbr: 0,
      updateProp: 0
    };
  },
  mounted() {
    for (let i = 0; i < 2000; i++) {
      this.circle.push({
        color: 'pink',
        key: i
      })
    }
  },
  methods: {
    addBlue() {
      for (let i = 0; i < 1000; i++) {
        let that = this;
        setTimeout(function () {
          let index = Math.floor(Math.random() * that.circle.length);
          let blueCircEl = { 
            color: 'blue',
            key: index 
          };
          that.circle.splice(index, 1, blueCircEl);
          that.blueCircNmbr++;
        }, 20 * i);
      }
    }
  }

}
</script>

<style scoped>
#wrapper {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  border: solid transparent 1px;
  cursor: pointer;
}
#wrapper:hover {
  border: solid black 1px;
}
#wrapper > div {
  margin: 2px;
  width: 10px;
  height: 10px;
  border: solid black 1px;
  border-radius: 10px;
}
</style>                  

import { createApp } from 'vue'

import App from './App.vue'

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