Vue3 【仿 react 的 hook】封装 useTitle

<template>
  <h1>网页的标题为： {{ titleRef }}</h1>
  <p>通过input输入框实时改变网页的标题 <input v-model="titleRef" /></p>
</template>

<script setup>
import useTitle from "./hooks/useTitle.js";

const titleRef = useTitle();
</script>

import { ref, onMounted, watch } from "vue";

function useTitle() {
  let titleRef = ref("");
  onMounted(() => {
    titleRef.value = document.title;
  });

  watch(titleRef, (newVal, oldVal) => {
    if (newVal !== oldVal) {
      document.title = newVal;
    }
  });

  return titleRef;
}

export default useTitle;