8
8
import type { Route } from '../router'
9
9
10
10
export function useUpdateHead ( route : Route , siteDataByRouteRef : Ref < SiteData > ) {
11
- let managedHeadTags : HTMLElement [ ] = [ ]
11
+ let managedHeadElements : ( HTMLElement | undefined ) [ ] = [ ]
12
12
let isFirstUpdate = true
13
13
14
14
const updateHeadTags = ( newTags : HeadConfig [ ] ) => {
@@ -19,13 +19,25 @@ export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
19
19
return
20
20
}
21
21
22
- managedHeadTags . forEach ( ( el ) => document . head . removeChild ( el ) )
23
- managedHeadTags = [ ]
24
- newTags . forEach ( ( headConfig ) => {
25
- const el = createHeadElement ( headConfig )
26
- document . head . appendChild ( el )
27
- managedHeadTags . push ( el )
22
+ const newElements : ( HTMLElement | undefined ) [ ] =
23
+ newTags . map ( createHeadElement )
24
+
25
+ managedHeadElements . forEach ( ( oldEl , oldIndex ) => {
26
+ const matchedIndex = newElements . findIndex (
27
+ ( newEl ) => newEl ?. isEqualNode ( oldEl ?? null )
28
+ )
29
+ if ( matchedIndex !== - 1 ) {
30
+ delete newElements [ matchedIndex ]
31
+ } else {
32
+ oldEl ?. remove ( )
33
+ delete managedHeadElements [ oldIndex ]
34
+ }
28
35
} )
36
+
37
+ newElements . forEach ( ( el ) => el && document . head . appendChild ( el ) )
38
+ managedHeadElements = [ ...managedHeadElements , ...newElements ] . filter (
39
+ Boolean
40
+ )
29
41
}
30
42
31
43
watchEffect ( ( ) => {
@@ -35,14 +47,19 @@ export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
35
47
const frontmatterHead = ( pageData && pageData . frontmatter . head ) || [ ]
36
48
37
49
// update title and description
38
- document . title = createTitle ( siteData , pageData )
50
+ const title = createTitle ( siteData , pageData )
51
+ if ( title !== document . title ) {
52
+ document . title = title
53
+ }
39
54
40
55
const description = pageDescription || siteData . description
41
56
let metaDescriptionElement = document . querySelector (
42
57
`meta[name=description]`
43
58
)
44
59
if ( metaDescriptionElement ) {
45
- metaDescriptionElement . setAttribute ( 'content' , description )
60
+ if ( metaDescriptionElement . getAttribute ( 'content' ) !== description ) {
61
+ metaDescriptionElement . setAttribute ( 'content' , description )
62
+ }
46
63
} else {
47
64
createHeadElement ( [ 'meta' , { name : 'description' , content : description } ] )
48
65
}
0 commit comments