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'
@@ -17,60 +17,64 @@ type ChartEditStoreType = typeof useChartEditStore
  */
 export const useChartDataFetch = (
   targetComponent: CreateComponentType,
-  useChartEditStore: ChartEditStoreType, 
+  useChartEditStore: ChartEditStoreType,
   updateCallback?: (...args: any) => any
 ) => {
   const vChartRef = ref<typeof VChart | null>(null)
   let fetchInterval: any = 0
 
-  isPreview() &&
-    watchEffect(() => {
-      clearInterval(fetchInterval)
+  const requestInterval = () => {
+    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) {
+      // requestOriginUrl 允许为空
+      const completePath =
+        requestOriginUrl && requestOriginUrl.value + requestUrl.value
+      if (!completePath) return
 
-      const chartEditStore = useChartEditStore()
-      const { requestOriginUrl, requestInterval } = toRefs(
-        chartEditStore.getRequestGlobalConfig
-      )
-      const { requestDataType, requestHttpType, requestUrl } = toRefs(
-        targetComponent.data
-      )
-      if (requestDataType.value !== RequestDataTypeEnum.AJAX) return
-      // 处理地址
-      if (requestUrl?.value && requestInterval.value > 0) {
-        // requestOriginUrl 允许为空
-        const completePath =
-          requestOriginUrl && requestOriginUrl.value + requestUrl.value
-        if (!completePath) return
-
-        fetchInterval = setInterval(async () => {
-          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) {
-                nextTick(() => {
-                  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)
+      const fetchFn = async () => {
+        const res: any = await http(requestHttpType.value)(completePath || '', {})
+        if (res.data) {
+          try {
+            // echarts 组件更新方式
+            if (chartFrame === ChartFrameEnum.ECHARTS) {
+              if (vChartRef.value) {
+                vChartRef.value.setOption({ dataset: res.data })
               }
-            } catch (error) {
-              console.error(error)
+            } else {
+              // 若遵守规范使用 dataset 作为数据 key，则会自动赋值数据
+              targetComponent.option.dataset && (targetComponent.option.dataset = res.data)
             }
+            // 更新回调函数
+            if (updateCallback) {
+              updateCallback(res.data)
+            }
+          } catch (error) {
+            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,
-  () => {
-    option.dataset = props.chartConfig.option.dataset
-  }, { immediate: true }
+  (newData: any) => {
+    option.dataset = newData
+  }, {
+    immediate: true
+  }
 )
 
-useChartDataFetch(props.chartConfig, useChartEditStore, callback)
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
 </script>
 
 <style lang="scss" scoped>