Vue 的 head top 作為一個全局混入（mixin），可以用于在 Vue 實例的 created 鉤子函數中，為網頁的 head 標簽設置 meta、title、link、script 標簽等信息，以達到 SEO、頁面加載性能優化等目的。

head top 的使用非常簡單，只需在 Vue 組件中引入該 mixin，然后在 created 生命周期函數中使用 $meta 方法設置其中的屬性即可：

import HeadTop from 'vue-head-top'
export default {
mixins: [HeadTop],
created () {
this.$meta({
title: '頁面標題',
meta: [
{ name: 'keywords', content: '關鍵詞1,關鍵詞2' },
{ name: 'description', content: '頁面描述文字' }
]
})
this.$link([
{ rel: 'stylesheet', href: '/path/to/style.css' }
])
this.$script([
{ src: '/path/to/script.js' }
])
}
}

上面的代碼中，我們首先引入了 vue-head-top 包，然后在組件中混入了該 mixin，最后在 created 生命周期函數中使用 $meta、$link、$script 方法設置 head 標簽內容。

在 $meta 方法中，我們可以設置 title、meta、link、script 標簽的屬性。其中，title 屬性用于設置頁面的標題；meta 屬性用于設置頁面的元數據，比如關鍵詞、描述等；link 屬性用于引入外部樣式表；script 屬性用于引入外部腳本。

需要注意的是，在一個 Vue 實例中，只能有一個 head top 實例生效。如果有多個 head top 實例混入到同一個組件中，那么后面的實例會覆蓋前面的實例，導致前面設置的內容失效。