我没有系统学过vue。这是我的vitepress博客中的一部分。

我尝试使用key使得元素能在页面更改时刷新，但是，实际运作时，这段代码的alert内容会更新，然而DOM终得<p>元素内容不会更新，这是为什么。

实际上，我需要使用key来使giscus运作。

<script setup lang="ts">

import { Md5 } from 'ts-md5';

import { onContentUpdated, useRouter } from "vitepress";

import Giscus from '@giscus/vue';

 

let pathname: string = location.pathname;

let MD5pathname: string = Md5.hashStr(pathname);

onContentUpdated(() => {
  pathname = location.pathname;

  MD5pathname = Md5.hashStr(pathname);

  alert(MD5pathname)

});

 

</script>

<template>

  <!--

  <Giscus id="comments"

    repo="louiesun/louiesun.github.io"

    repo-id="R_kgDOMOvc_A"

    category="General"

    category-id="DIC_kwDOMOvc_M4CgbNY"

    mapping="pathname"

    strict="1"

    reactions-enabled="1"

    emit-metadata="0"

    input-position="top"

    theme="preferred_color_scheme"

    lang="zh-CN"

    crossorigin="anonymous"

    async />

  -->

  <p :key="MD5pathname">{{ MD5pathname }}</p>

</template>

<style scoped></style>