ভিইউই

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <p>কাউন্ট: {{count}}</p>
  <button @click="count++">
    বৃদ্ধি
  </button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref, onUpdated} = Vue;
createApp({
  setup() {
    const count = ref(0);
    onUpdated(() => {
      console.log("DOM updated");
    });
    return {count};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <p ref="message">লোডিং</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref, onMounted} = Vue;
createApp({
  setup() {
    const message = ref(null);
    onMounted(() => {
      message.value.textContent = "হ্যালো বিশ্ব";
    });
    return {message};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <button @click="show = !show">ফলাফল</button>
  <child-component v-if="show"></child-component>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref, onUnmounted} = Vue;
const ChildComponent = {
  setup() {
    onUnmounted(() => {
      console.log("component unmounted");
    });
    return {};
  },
  template: "<p>হ্যালো বিশ্ব</p>"
};
createApp({
  components: {ChildComponent},
  setup() {
    const show = ref(true);
    return {show};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <p>{{text}}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref, onBeforeMount} = Vue;
createApp({
  setup() {
    const text = ref("হ্যালো বিশ্ব");
    onBeforeMount(() => {
      console.log("ফলাফল");
    });
    return {text};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <p>কাউন্ট: {{count}}</p>
  <button @click="count++">বৃদ্ধি</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref, onBeforeUpdate} = Vue;
createApp({
  setup() {
    const count = ref(0);
    onBeforeUpdate(() => {
      console.log("DOM is about to update");
    });
    return {count};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <button @click="show = !show">ফলাফল</button>
  <child-component v-if="show"></child-component>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref, onBeforeUnmount} = Vue;
const ChildComponent = {
  setup() {
    onBeforeUnmount(() => {
      console.log("component will unmount");
    });
    return {};
  },
  template: "<p>হ্যালো বিশ্ব</p>"
};
createApp({
  components: {ChildComponent},
  setup() {
    const show = ref(true);
    return {show};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <child-component></child-component>
  <p>{{error}}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref, onErrorCaptured} = Vue;
const ChildComponent = {
  setup() {
    throw new Error("এরর");
  },
  template: "<p>হ্যালো</p>"
};
createApp({
  components: {ChildComponent},
  setup() {
    const error = ref("");
    onErrorCaptured((err) => {
      error.value = err.message;
      return false;
    });
    return {error};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <button @click="show = !show">ফলাফল</button>
  <KeepAlive>
    <child-component v-if="show"></child-component>
  </KeepAlive>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref, onActivated} = Vue;
const ChildComponent = {
  setup() {
    onActivated(() => {
      console.log("component activated");
    });
    return {};
  },
  template: "<p>কম্পোনেন্ট</p>"
};
createApp({
  components: {ChildComponent},
  setup() {
    const show = ref(true);
    return {show};
  }
}).mount("#app");
</script>
</body>
</html>