vue3 動態修改系統title

修改前

修改后

1、封裝 useTitle 工具函數

創建組合式 API，通過 watchEffect 監聽標題變化：

// composables/useTitle.js
import { ref, watchEffect } from 'vue';export function useTitle(initialTitle) {const title = ref(initialTitle);watchEffect(() => {document.title = title.value;});return { title };
}

2、在組件中使用響應式標題

組件內調用 useTitle，動態更新標題：

<script setup>
import { useTitle } from '@/composables/useTitle';
const productName = ref('Vue3 官方指南');
const { title } = useTitle(`${productName.value} - 我的商城`);// 動態修改標題示例
const updateTitle = () => {productName.value = 'Vue3 深入解析';title.value = `${productName.value} - 我的商城`;
};
</script>