fix(hmr): Use resolveTemplateUsageCheckString in vite/plugin-vue.

[ygj6]

fix: #4358 with vitejs/vite#5561

[ygj6]

vitejs/vite#5561 use resolveTemplateUsageCheckString to determine whether the reference variable in the template has been changed.

function needGlobHMR(
  prev: SFCDescriptor | null,
  next: SFCDescriptor | null
): boolean {
  const isDynamicUpdate = resolveTemplateUsageCheckString(prev!) !== resolveTemplateUsageCheckString(next!)
  const prevSetup = prev!.scriptSetup
  const nextSetup = next!.scriptSetup
  const isSetupWithTS = !!(
    prevSetup?.setup &&
    nextSetup?.setup &&
    (prevSetup.lang === 'ts' || prevSetup.lang === 'tsx')
    && (nextSetup.lang === 'ts' || nextSetup.lang === 'tsx')
  )
  return isDynamicUpdate && isSetupWithTS
}

[yyx990803]

FYI I tested this further with local plugin-vue changes and determined this is sub-optimal - this would cause the component to reload instead of re-render in more cases than necessary (for example any template expression change would cause a reload with the proposed changes in vitejs/vite#5561)

The more accurate approach is to get a hold of the imports data from the previous compileScript call, and then check whether it changed from "unused" to "used" status in the new descriptor. See 68c45e7 (vite plugin-vue patch coming soon)