Prefacio esta pregunta diciendo que soy muy nuevo en la API de composición, por lo que todavía estoy tratando de descubrir las mejores prácticas. Estoy escribiendo una función componible useResizeObserver usando la API de composición de Vue para rastrear los cambios de dimensión en un elemento de destino. Debido a que tengo que esperar a que se monte el elemento, no puedo llamar a mi componible desde el nivel superior en el método setup() en mi componente como se muestra en la mayoría de los ejemplos, sino que tengo que llamarlo desde onMounted() , donde tener acceso a la ref de mi elemento.
onMounted(async () => { elementDimensions.value = useResizeObserver(modalContent.value); } Esto me obligó a tener otra ref a la que elementDimensions declarada en el nivel superior de la función setup() , que inicialicé en null .
setup(props) { const elementDimensions = ref(null); const modalContent = ref(null); ... } Aquí está la función useResizeObserver en sí:
export default function useResizeObserver(element) { const elementHeight = ref(0); const elementWidth = ref(0); const resizeObserver = new ResizeObserver(entries => { elementHeight.value = entries[0].contentRect.height; elementWidth.value = entries[0].contentRect.width; }); if (element) { resizeObserver.observe(element); } onUnmounted(() => { resizeObserver.disconnect(); }); return { elementHeight, elementWidth }; } Esto realmente funciona bien para darme lo que quiero, pero me pregunto si hay una mejor manera de lograrlo. De la forma en que se implementan las cosas en este momento, termino con referencias "anidadas", ya que termino envolviendo elementHeight y elementWidth (que ya son referencias) en otra referencia dentro del componente ( elementDimensions ). ¿Hay una mejor manera recomendada de hacer esto cuando necesita pasar un elemento a un componible desde onMounted() ?
Se supone que las funciones de composición se usan directamente en setup , cualquier otro uso depende de la implementación y debe verificarse.
Las referencias son básicamente objetos que permiten pasar un valor por referencia en lugar de por valor. Uno de sus usos es pasar una referencia antes y acceder cuando un valor está actualizado.
Debería ser:
setup(props) { const modalContent = ref(null); const elementDimensions = useResizeObserver(modalContent); ... }y
export default function useResizeObserver(element) { const elementHeight = ref(0); const elementWidth = ref(0); let resizeObserver; onMounted(() => { if (element.value) { resizeObserver = new ResizeObserver(...); resizeObserver.observe(element.value); } } onUnmounted(() => { if (resizeObserver) resizeObserver.disconnect(); }); return { elementHeight, elementWidth }; }