fix(site): async-highlight lost reactivity (#1344)

* fix(site): async-highlight lost reactivity

* style: remove comment

examples/sites/src/views/components/async-highlight.vue

@@ -4,8 +4,9 @@
     <pre v-else>{{ code }}</pre>
   </div>
 </template>
+
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import hljs from 'highlight.js/lib/core'
 import 'highlight.js/styles/github.css'
 import tsPath from 'highlight.js/lib/languages/typescript'
@@ -31,16 +32,21 @@ export default defineComponent({
 
       return textHtml
     }
-
-    // highlight和其他同步任务叠加容易形成长任务，改成异步消除长任务。
-    setTimeout(() => {
-      if (props.types && props.types === 'ts') {
-        highlightCode.value = getFormatCodes(props.types)
-      } else {
-        highlightCode.value = hljs.highlightAuto(props.code).value
-      }
-      highlightFinish.value = true
-    }, 0)
+    watch(
+      props,
+      () => {
+        setTimeout(() => {
+          // highlight和其他同步任务叠加容易形成长任务，改成异步消除长任务。
+          if (props.types && props.types === 'ts') {
+            highlightCode.value = getFormatCodes(props.types)
+          } else {
+            highlightCode.value = hljs.highlightAuto(props.code).value
+          }
+          highlightFinish.value = true
+        }, 0)
+      },
+      { deep: true, immediate: true }
+    )
     return {
       highlightFinish,
       highlightCode
@@ -48,6 +54,7 @@ export default defineComponent({
   }
 })
 </script>
+
 <style lang="less">
 .code-preview-box {
   max-height: 400px;

examples/sites/src/views/components/demo.vue

@@ -49,12 +49,7 @@
     <div v-if="demo.isOpen" class="ti-px24 ti-py20 ti-b-t-lightless">
       <div>
         <tiny-tabs v-model="tabValue" class="code-tabs">
-          <tiny-tab-item
-            v-for="(file, idx) in demo.files"
-            :key="file.fileName"
-            :name="'tab' + idx"
-            :title="file.fileName"
-          >
+          <tiny-tab-item v-for="(file, idx) in files" :key="file.fileName" :name="'tab' + idx" :title="file.fileName">
             <async-highlight :code="file.code"></async-highlight>
           </tiny-tab-item>
         </tiny-tabs>
@@ -64,7 +59,7 @@
 </template>
 
 <script lang="jsx">
-import { defineComponent, reactive, computed, toRefs, shallowRef, onMounted, watch, nextTick, inject } from 'vue'
+import { defineComponent, reactive, computed, toRefs, shallowRef, onMounted, watch, nextTick, inject, ref } from 'vue'
 import { i18nByKey, getWord } from '@/i18n'
 import { $split, appData, fetchDemosFile } from '@/tools'
 import { Tooltip as TinyTooltip, Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
@@ -208,17 +203,32 @@ export default defineComponent({
       }
     })
 
+    const demos = ref(props.demo)
+    const files = ref([])
+
+    watch(
+      () => props.demo,
+      () => {
+        demos.value = props.demo
+        if (props.demo.files) {
+          files.value = props.demo.files
+        }
+      },
+      { deep: true }
+    )
+
     watch(
       () => apiModeState.apiMode,
       () => {
         if (props.demo.files?.length > 0) {
-          // 强制刷新示例显示格式
-          getDemoCodeFn(props.demo, true)
+          getDemoCodeFn(props.demo, true).then((demoFiles) => {
+            files.value = demoFiles
+          })
         }
       }
     )
 
-    return { ...toRefs(state), ...fn, appData, vueComponents, demoConfig, cmp, isMobileFirst, i18nByKey }
+    return { ...toRefs(state), ...fn, appData, vueComponents, demoConfig, cmp, isMobileFirst, i18nByKey, files }
   }
 })
 </script>