perf: 优化获取数据 hooks 函数

src/hooks/useChartDataFetch.hook.ts

@@ -1,7 +1,7 @@
-import { ref, toRefs, watchEffect, nextTick } from 'vue'
+import { ref, toRefs } from 'vue'
 import type VChart from 'vue-echarts'
 import { http } from '@/api/http'
-import { CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
+import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { isPreview } from '@/utils'
@@ -23,17 +23,18 @@ export const useChartDataFetch = (
   const vChartRef = ref<typeof VChart | null>(null)
   let fetchInterval: any = 0
 
-  isPreview() &&
+  const requestInterval = () => {
-    watchEffect(() => {
-      clearInterval(fetchInterval)
-
     const chartEditStore = useChartEditStore()
     const { requestOriginUrl, requestInterval } = toRefs(
       chartEditStore.getRequestGlobalConfig
     )
+    // 组件类型
+    const { chartFrame } = targetComponent.chartConfig
+    // 请求配置
     const { requestDataType, requestHttpType, requestUrl } = toRefs(
       targetComponent.data
     )
+    // 非请求类型
     if (requestDataType.value !== RequestDataTypeEnum.AJAX) return
     // 处理地址
     if (requestUrl?.value && requestInterval.value > 0) {
@@ -42,25 +43,20 @@ export const useChartDataFetch = (
         requestOriginUrl && requestOriginUrl.value + requestUrl.value
       if (!completePath) return
 
-        fetchInterval = setInterval(async () => {
+      const fetchFn = async () => {
-          const res:any = await http(requestHttpType.value)(completePath || '', {})
+        const res: any = await http(requestHttpType.value)(completePath || '', {})
         if (res.data) {
-            // 是否是 Echarts 组件
-            const isECharts =
-              targetComponent.chartConfig.package ===
-              PackagesCategoryEnum.CHARTS
-
           try {
-              if (isECharts && vChartRef?.value?.setOption) {
+            // echarts 组件更新方式
-                nextTick(() => {
+            if (chartFrame === ChartFrameEnum.ECHARTS) {
               if (vChartRef.value) {
                 vChartRef.value.setOption({ dataset: res.data })
               }
-                })
             } else {
               // 若遵守规范使用 dataset 作为数据 key，则会自动赋值数据
               targetComponent.option.dataset && (targetComponent.option.dataset = res.data)
             }
+            // 更新回调函数
             if (updateCallback) {
               updateCallback(res.data)
             }
@@ -68,9 +64,17 @@ export const useChartDataFetch = (
             console.error(error)
           }
         }
-        }, requestInterval.value * 1000)
       }
-    })
+      
+      // 立即调用
+      fetchFn()
+      // 开启定时
+      setInterval(fetchFn, requestInterval.value * 1000)
+    }
+  }
+
+  isPreview() && requestInterval()
+     
 
   return { vChartRef }
 }

src/packages/components/Informations/Texts/TextCommon/index.vue

@@ -15,19 +15,21 @@
 
       background-color:${backgroundColor}`"
     >
-      {{ dataset }}
+      {{ option.dataset }}
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
-    required: true,
+    required: true
-  },
+  }
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
@@ -42,8 +44,27 @@ const {
   borderColor,
   borderRadius,
   writingMode,
-  backgroundColor,
+  backgroundColor
 } = toRefs(props.chartConfig.option)
+
+const option = shallowReactive({
+  dataset: ''
+})
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  }, {
+    immediate: true
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Informations/Texts/TextGradient/index.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, toRefs, reactive, watch } from 'vue'
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -14,33 +14,30 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
-    required: true,
+    required: true
-  },
+  }
 })
 
-const option = reactive({
+const option = shallowReactive({
   dataset: ''
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
+const { size, gradient } = toRefs(props.chartConfig.option)
 
-const {
-  size,
-  gradient
-} = toRefs(props.chartConfig.option)
-
-const callback = (newData: string) => {
-  option.dataset = newData
-}
 
 watch(
   () => props.chartConfig.option.dataset,
-  () => {
+  (newData: any) => {
-    option.dataset = props.chartConfig.option.dataset
+    option.dataset = newData
-  }, { immediate: true }
+  }, {
+    immediate: true
+  }
 )
 
-useChartDataFetch(props.chartConfig, useChartEditStore, callback)
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
 </script>
 
 <style lang="scss" scoped>