Comparing Virtual DOM and Real DOM Updates

Showcase a simple counter app in Vue.js 3 to demonstrate how the Virtual DOM optimizes updates compared to direct manipulation of the Real DOM.

<div id="counter-app">
  <h1>{{ counter }}</h1>
  <button @click="incrementCounter">Increment</button>
</div>

This is the HTML template for our Vue.js counter app. It displays the counter value and a button to increment it.

<script src="https://unpkg.com/vue@next"></script>
<script>
  const { createApp, ref } = Vue;

  createApp({
    setup() {
      const counter = ref(0);

      function incrementCounter() {
        counter.value++;
      }

      return { counter, incrementCounter };
    }
  }).mount('#counter-app');
</script>

This is the JavaScript code needed to make the counter app functional using Vue.js 3. It imports Vue from a CDN, sets up a reactive counter, and increments it when the button is clicked.

<style>
  #counter-app {
    text-align: center;
    margin-top: 50px;
  }
  #counter-app h1 {
    font-size: 48px;
  }
  #counter-app button {
    font-size: 24px;
    padding: 10px 20px;
    margin-top: 20px;
  }
</style>

This is the CSS for styling the counter app. It centers the content on the page and styles the h1 element and the button.