perf: 修改 use 为 hooks

src/module/colorPicker/ColorBox.vue

@@ -8,7 +8,7 @@ import { Nullable } from '/@src/module/type'
 import { computed, onMounted, ref } from 'vue'
 import { HSBToHEX, RGBSTo, RGBToHSB } from '/@src/module/colorPicker/colorUtil'
 import ColorPicker from './ColorPicker.vue'
-import { usePosition } from '/@src/use/usePosition'
+import { usePosition } from '/@src/hooks/usePosition'
 
 interface BoxProps {
   color?: string

src/module/dropdown/index.vue

@@ -32,7 +32,7 @@
 
 <script setup name="LaySelect" lang="ts">
 import { defineProps, ref, watch } from 'vue'
-import useClickOutside from '../../use/useClickOutside'
+import useClickOutside from '../../hooks/useClickOutside'
 
 const dropdownRef = ref<null | HTMLElement>(null)
 const isClickOutside = useClickOutside(dropdownRef)

src/module/select/index.vue

@@ -22,7 +22,7 @@
 
 <script setup name="LaySelect" lang="ts">
 import { defineProps, provide, reactive, ref, watch } from 'vue'
-import useClickOutside from '../../use/useClickOutside'
+import useClickOutside from '../../hooks/useClickOutside'
 
 const selectRef = ref<null | HTMLElement>(null)
 const isClickOutside = useClickOutside(selectRef)

src/module/tab/index.vue

@@ -40,6 +40,7 @@ import {
   ref,
   onUpdated,
   onMounted,
+  watch,
 } from 'vue'
 
 const slot = useSlots()
@@ -57,16 +58,6 @@ const setItemInstanceBySlot = function (nodeList: VNode[]) {
   })
 }
 
-onUpdated(() => {
-  childrens.value = []
-  setItemInstanceBySlot((slot.default && slot.default()) as VNode[])
-})
-
-onMounted(() => {
-  childrens.value = []
-  setItemInstanceBySlot((slot.default && slot.default()) as VNode[])
-})
-
 const props = defineProps<{
   type?: string
   modelValue: string
@@ -83,6 +74,7 @@ const active = computed({
     emit('update:modelValue', val)
   },
 })
+const slotsChange = ref(true)
 
 const change = function (id: any) {
   emit('update:modelValue', id)
@@ -93,5 +85,11 @@ const close = function (id: any) {
   emit('close', id)
 }
 
+watch(slotsChange, function () {
+  childrens.value = []
+  setItemInstanceBySlot((slot.default && slot.default()) as VNode[])
+})
+
 provide('active', active)
+provide('slotsChange', slotsChange)
 </script>

src/module/tabItem/index.vue

@@ -11,13 +11,15 @@ export default {
 </script>
 
 <script setup name="LayTabItem" lang="ts">
-import { defineProps, inject } from 'vue'
+import { defineProps, inject, defineEmits, Ref } from 'vue'
 
 const props = defineProps<{
   id?: string
 }>()
 
 const active = inject('active')
+const slotsChange: Ref<boolean> = inject('slotsChange') as Ref<boolean>
+slotsChange.value = !slotsChange.value
 </script>