Vue3 【仿 react 的 hook】封装 useTitle

效果预览

• 页码加载时，自动获取网页标题
• 通过input输入框，可以实时改变网页标题

代码实现

index.vue

<template><h1>网页的标题为： {{ titleRef }}</h1><p>通过input输入框实时改变网页的标题 <input v-model="titleRef" /></p>
</template><script setup>
import useTitle from "./hooks/useTitle.js";const titleRef = useTitle();
</script>

useTitle.js

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;