es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo crear un gancho personalizado para el oyente de eventos Vue3 CompositionAPI

31 Jul, 2023 Programación

Soy relativamente nuevo en Vue. En React, puedo usar useEffect en mis custom hooks, pero no tengo idea de cómo hacerlo en Vue. Quería crear un custom hook para escuchar el cambio de tamaño de la ventana. Así es como lo hice en React.

useDimensions.js

import React, { useState, useEffect } from ‘react’;

function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
width, height
};
}

export default function useWindowDimensions() {
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

useEffect(() => {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}

window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);

}, [])

return windowDimensions;
}

Y lo llamo en mi componente como let {width, height} = useDimensions()
¿Cómo lo hago en Vue3? ¿CompositionAPI?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    En Vue 3, puedes lograr una funcionalidad similar usando los ganchos de ciclo de vida onMounted y onUnmounted y la función ref del paquete @vue/composition-api. Así es como puedes convertir el gancho personalizado de React en una función de composición de Vue 3:

    import { ref, onMounted, onUnmounted } from '@vue/composition-api';

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return { width, height };
}

export default function useWindowDimensions() {
  const windowDimensions = ref(getWindowDimensions());

  function handleResize() {
    windowDimensions.value = getWindowDimensions();
  }

  onMounted(() => {
    window.addEventListener('resize', handleResize);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });

  return windowDimensions;
}

    Luego, puedes usarlo en un componente de la siguiente manera:

    <template>
  <div>
    Ancho: {{ dimensions.width }}
    Altura: {{ dimensions.height }}
  </div>
</template>

<script>
import useWindowDimensions from '../path/to/useWindowDimensions';

export default {
  setup() {
    const dimensions = useWindowDimensions();

    return { dimensions };
  }
}
</script>

    Ten en cuenta que la sintaxis para usar funciones de composición es diferente de usar la API de opciones en Vue 2, por lo que deberás envolver la función setup de tu componente con defineComponent si estás usando TypeScript.

Comments are closed.