Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf(client): use shallowRef for html element ref

Browse source
This commit is contained in:
syuilo 2023-01-03 10:12:37 +09:00
parent a0af80f8c5
commit 2184240ef1
59 changed files with 114 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/frontend/src/pages/admin/_header_.vue
View file

@ -28,7 +28,7 @@
</template>
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref, inject, watch, nextTick } from 'vue';
import { computed, onMounted, onUnmounted, ref, shallowRef, inject, watch, nextTick } from 'vue';
import tinycolor from 'tinycolor2';
import { popupMenu } from '@/os';
import { url } from '@/config';
@ -64,9 +64,9 @@ const emit = defineEmits<{
const metadata = injectPageMetadata();
const el = ref<HTMLElement>(null);
const el = shallowRef<HTMLElement>(null);
const tabRefs = {};
const tabHighlightEl = $ref<HTMLElement | null>(null);
const tabHighlightEl = $shallowRef<HTMLElement | null>(null);
const bg = ref(null);
const height = ref(0);
const hasTabs = computed(() => {

2
packages/frontend/src/pages/admin/overview.active-users.vue
View file

@ -23,7 +23,7 @@ import { initChart } from '@/scripts/init-chart';
initChart();
const chartEl = $ref<HTMLCanvasElement>(null);
const chartEl = $shallowRef<HTMLCanvasElement>(null);
const now = new Date();
let chartInstance: Chart = null;
const chartLimit = 7;

4
packages/frontend/src/pages/admin/overview.ap-requests.vue
View file

@ -34,8 +34,8 @@ import { initChart } from '@/scripts/init-chart';
initChart();
const chartLimit = 50;
const chartEl = $ref<HTMLCanvasElement>();
const chartEl2 = $ref<HTMLCanvasElement>();
const chartEl = $shallowRef<HTMLCanvasElement>();
const chartEl2 = $shallowRef<HTMLCanvasElement>();
let fetching = $ref(true);
const { handler: externalTooltipHandler } = useChartTooltip();

4
packages/frontend/src/pages/admin/overview.pie.vue
View file

@ -3,7 +3,7 @@
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
import { Chart } from 'chart.js';
import number from '@/filters/number';
import { defaultStore } from '@/store';
@ -16,7 +16,7 @@ const props = defineProps<{
data: { name: string; value: number; color: string; onClick?: () => void }[];
}>();
const chartEl = ref<HTMLCanvasElement>(null);
const chartEl = shallowRef<HTMLCanvasElement>(null);
const { handler: externalTooltipHandler } = useChartTooltip({
position: 'middle',

4
packages/frontend/src/pages/admin/overview.queue.chart.vue
View file

@ -3,7 +3,7 @@
</template>
<script lang="ts" setup>
import { watch, onMounted, onUnmounted, ref } from 'vue';
import { watch, onMounted, onUnmounted, ref, shallowRef } from 'vue';
import { Chart } from 'chart.js';
import number from '@/filters/number';
import * as os from '@/os';
@ -19,7 +19,7 @@ const props = defineProps<{
type: string;
}>();
const chartEl = ref<HTMLCanvasElement>(null);
const chartEl = shallowRef<HTMLCanvasElement>(null);
const { handler: externalTooltipHandler } = useChartTooltip();

2
packages/frontend/src/pages/admin/overview.vue
View file

@ -82,7 +82,7 @@ import { defaultStore } from '@/store';
import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
import MkFolder from '@/components/MkFolder.vue';
const rootEl = $ref<HTMLElement>();
const rootEl = $shallowRef<HTMLElement>();
let serverInfo: any = $ref(null);
let topSubInstancesForPie: any = $ref(null);
let topPubInstancesForPie: any = $ref(null);

4
packages/frontend/src/pages/admin/queue.chart.chart.vue
View file

@ -3,7 +3,7 @@
</template>
<script lang="ts" setup>
import { watch, onMounted, onUnmounted, ref } from 'vue';
import { watch, onMounted, onUnmounted, ref, shallowRef } from 'vue';
import { Chart } from 'chart.js';
import number from '@/filters/number';
import * as os from '@/os';
@ -19,7 +19,7 @@ const props = defineProps<{
type: string;
}>();
const chartEl = ref<HTMLCanvasElement>(null);
const chartEl = shallowRef<HTMLCanvasElement>(null);
const { handler: externalTooltipHandler } = useChartTooltip();