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>
This is the HTML template for our Vue.js counter app. It displays the counter value and a button to increment it.
<script src=""></script>
  const { createApp, ref } = Vue;

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

      function incrementCounter() {

      return { counter, incrementCounter };
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.
  #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;
This is the CSS for styling the counter app. It centers the content on the page and styles the h1 element and the button.