perf(client): use shallowRef for html element ref

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

View File

@ -35,7 +35,7 @@ const emit = defineEmits<{
(ev: 'update:modelValue', v: boolean): void;
}>();
let button = $ref<HTMLElement>();
let button = $shallowRef<HTMLElement>();
const checked = toRefs(props).modelValue;
const toggle = () => {
if (props.disabled) return;

View File

@ -40,7 +40,7 @@ const props = withDefaults(defineProps<{
let opened = $ref(props.defaultOpen);
let openedAtLeastOnce = $ref(props.defaultOpen);
let root = $ref<HTMLElement>();
let root = $shallowRef<HTMLElement>();
function enter(el) {
const elementHeight = el.getBoundingClientRect().height;

View File

@ -34,7 +34,7 @@
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
import { onMounted, onUnmounted, nextTick, ref, shallowRef, watch, computed, toRefs } from 'vue';
import { debounce } from 'throttle-debounce';
import MkButton from '@/components/MkButton.vue';
import { useInterval } from '@/scripts/use-interval';
@ -74,9 +74,9 @@ const focused = ref(false);
const changed = ref(false);
const invalid = ref(false);
const filled = computed(() => v.value !== '' && v.value != null);
const inputEl = ref<HTMLElement>();
const prefixEl = ref<HTMLElement>();
const suffixEl = ref<HTMLElement>();
const inputEl = shallowRef<HTMLElement>();
const prefixEl = shallowRef<HTMLElement>();
const suffixEl = shallowRef<HTMLElement>();
const height =
props.small ? 35 :
props.large ? 39 :

View File

@ -34,7 +34,7 @@ const emit = defineEmits<{
(ev: 'update:modelValue', v: boolean): void;
}>();
let button = $ref<HTMLElement>();
let button = $shallowRef<HTMLElement>();
const checked = toRefs(props).modelValue;
const toggle = () => {
if (props.disabled) return;