Perfomance evaluation test between function and class composition

src/App.vue

@@ -1,15 +1,109 @@
 <template>
+  <h1>Working Demo:</h1>
   <Counter :value="3" />
+  <br />
+  <hr />
+  <div>
+    <h1>Perfomance Evaluation:</h1>
+    <div class="vertical-panel">
+      <h2>Function Style:</h2>
+      <button type="button" @click="onEvaluateFunctionStyle">Start</button>
+      <div>
+        Time taken : {{ functionStyleEndTime - functionStyleStartTime }} ms |
+        Memory Used : {{ functionStyleEndMem - functionStyleStartMem }}
+      </div>
+      <div class="test-panel">
+        <CounterFunctionStyle
+          v-for="index in functionStyleCount"
+          :key="index"
+          :value="index"
+          :hide-buttons="true"
+          @all-mounted="allFunctionStyleComponentsUpdated"
+        />
+      </div>
+    </div>
+    <div class="vertical-panel">
+      <h2>Class Style:</h2>
+      <button type="button" @click="onEvaluateClassStyle">Start</button>
+      <div>
+        Time taken : {{ classStyleEndTime - classStyleStartTime }} ms |
+        Memory Used : {{ classStyleEndMem - classStyleStartMem }}
+      </div>
+      <div class="test-panel">
+        <Counter
+          v-for="index in classStyleCount"
+          :key="index"
+          :value="index"
+          :hide-buttons="true"
+          @all-mounted="allClassStyleComponentsUpdated"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import Counter from "./components/Counter.vue";
+import CounterFunctionStyle from "./components/CounterFunctionStyle.vue";
+
+export const TEST_COUNT = 10000;
 
 export default defineComponent({
   name: "App",
   components: {
-    Counter
+    Counter,
+    CounterFunctionStyle
+  },
+  setup() {
+    return {
+      functionStyleStartTime: 0,
+      functionStyleStartMem: 0,
+
+      classStyleStartTime: 0,
+      classStyleStartMem: 0
+    };
+  },
+  data() {
+    return {
+      functionStyleCount: 0,
+      functionStyleEndTime: 0,
+      functionStyleEndMem: 0,
+
+      classStyleCount: 0,
+      classStyleEndTime: 0,
+      classStyleEndMem: 0
+    };
+  },
+  methods: {
+    onEvaluateFunctionStyle(): void {
+      this.functionStyleStartTime = Date.now();
+      this.functionStyleStartMem = (performance as any).memory.usedJSHeapSize;
+
+      this.functionStyleCount = TEST_COUNT;
+    },
+    onEvaluateClassStyle(): void {
+      this.classStyleStartTime = Date.now();
+      this.classStyleStartMem = (performance as any).memory.usedJSHeapSize;
+
+      this.classStyleCount = TEST_COUNT;
+    },
+    allFunctionStyleComponentsUpdated(): void {
+      this.functionStyleEndTime = Date.now();
+      setTimeout(
+        () =>
+          (this.functionStyleEndMem = (performance as any).memory.usedJSHeapSize),
+        1000
+      );
+    },
+    allClassStyleComponentsUpdated(): void {
+      this.classStyleEndTime = Date.now();
+      setTimeout(
+        () =>
+          (this.classStyleEndMem = (performance as any).memory.usedJSHeapSize),
+        1000
+      );
+    }
   }
 });
 </script>
@@ -23,4 +117,19 @@ export default defineComponent({
   color: #2c3e50;
   margin-top: 60px;
 }
+
+.vertical-panel {
+  width: 40%;
+  display: inline-block;
+
+  vertical-align: top;
+
+  .test-panel {
+    border: 1px solid silver;
+    margin: 10px 30px;
+    padding: 5px;
+
+    font-size: 0.5em;
+  }
+}
 </style>

src/components/Counter.vue

@@ -2,14 +2,19 @@ This is how a component could look.
 
 <template>
   <div class="counter">
-    Counter: {{ valueInternal }}<br />
-    <button type="button" @click="onAdd">Add</button>&nbsp;
-    <button type="button" @click="onSubtract">Sub</button>
+    [class] Count: {{ valueInternal }}<br />
+    <template v-if="!hideButtons">
+      <button type="button" @click="onAdd">Add</button>&nbsp;
+      <button type="button" @click="onSubtract">
+        Sub
+      </button>
+    </template>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from "vue";
+import { TEST_COUNT } from "../App.vue";
 
 class Counter {
   valueInternal: any;
@@ -33,14 +38,49 @@ class Counter {
     this.valueInternal--;
   }
 
-  someOtherMethod() {
-    // Statements
+  // Some dummy functions for testing
+  someOtherMethod1() {
+    console.log(this.valueInternal * 1);
+  }
+  someOtherMethod2() {
+    console.log(this.valueInternal * 2);
+  }
+  someOtherMethod3() {
+    console.log(this.valueInternal * 3);
+  }
+  someOtherMethod4() {
+    console.log(this.valueInternal * 4);
+  }
+  someOtherMethod5() {
+    console.log(this.valueInternal * 5);
+  }
+  someOtherMethod6() {
+    console.log(this.valueInternal * 6);
+  }
+  someOtherMethod7() {
+    console.log(this.valueInternal * 7);
+  }
+  someOtherMethod8() {
+    console.log(this.valueInternal * 8);
+  }
+  someOtherMethod9() {
+    console.log(this.valueInternal * 9);
+  }
+  someOtherMethod10() {
+    console.log(this.valueInternal * 10);
   }
 }
 
 export default defineComponent({
   props: {
-    value: Number
+    value: Number,
+    hideButtons: Boolean
+  },
+  emits: ["all-mounted"],
+  mounted() {
+    if (this.value === TEST_COUNT) {
+      this.$emit("all-mounted");
+    }
   },
   setup: props => new Counter(props.value || 0)
 });

src/components/CounterFunctionStyle.vue

@@ -0,0 +1,84 @@
+This is how a component could look.
+
+<template>
+  <div class="counter">
+    [function] Count: {{ valueInternal }}<br />
+    <template v-if="!hideButtons">
+      <button type="button" @click="onAdd">Add</button>&nbsp;
+      <button type="button" @click="onSubtract">
+        Sub
+      </button>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { TEST_COUNT } from "../App.vue";
+
+export default defineComponent({
+  props: {
+    value: Number,
+    hideButtons: Boolean
+  },
+  emits: ["all-mounted"],
+  mounted() {
+    if (this.value === TEST_COUNT) {
+      this.$emit("all-mounted");
+    }
+  },
+  setup: props => {
+    const valueInternal = ref<number>(props.value || 0);
+
+    return {
+      valueInternal,
+
+      onAdd() {
+        valueInternal.value++;
+      },
+      onSubtract() {
+        valueInternal.value--;
+      },
+
+      // Some dummy functions for testing
+      someOtherMethod1() {
+        console.log(valueInternal.value * 1);
+      },
+      someOtherMethod2() {
+        console.log(valueInternal.value * 2);
+      },
+      someOtherMethod3() {
+        console.log(valueInternal.value * 3);
+      },
+      someOtherMethod4() {
+        console.log(valueInternal.value * 4);
+      },
+      someOtherMethod5() {
+        console.log(valueInternal.value * 5);
+      },
+      someOtherMethod6() {
+        console.log(valueInternal.value * 6);
+      },
+      someOtherMethod7() {
+        console.log(valueInternal.value * 7);
+      },
+      someOtherMethod8() {
+        console.log(valueInternal.value * 8);
+      },
+      someOtherMethod9() {
+        console.log(valueInternal.value * 9);
+      },
+      someOtherMethod10() {
+        console.log(valueInternal.value * 10);
+      }
+    };
+  }
+});
+</script>
+
+<style scoped>
+.counter {
+  font-size: 2em;
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+}
+</style>