Conceptos básicos de la API compuesta de Vue3: configuración

Conceptos básicos de la API de composición - Documentación de Vue3

Configuración - Documentación de Vue3

La configuración es una opción del componente, por lo que se escribe en el objeto de exportación del componente. al igual que otras opciones de componentes.

La documentación oficial lo describe de la siguiente manera:

Las opciones de configuración deben ser una función que acepte accesorios y contexto.

Además, todo lo que devolvamos de la configuración estará expuesto al resto del componente (propiedades calculadas, métodos, enlaces de ciclo de vida, etc.), así como a la plantilla del componente.

Personalmente, creo que es seguro decir:

Como se esperaba de los componentes estándar, los accesorios en la función de configuración son reactivos y se pasarán en los nuevos accesorios y se actualizarán cuando estén disponibles.

El contexto es un objeto JavaScript ordinario, que expone las propiedades de tres componentes:

El contexto es un objeto JavaScript ordinario, es decir, no responde. Esto significa que puede hacerlo de forma segura. utilice refactorizaciones de ES6 en contexto.

Los atributos y las ranuras son objetos con estado que siempre se actualizan a medida que se actualiza el componente en sí. Esto significa que debes evitar desestructurarlos y siempre hacer referencia a los atributos como attrs.x o slots.x. Tenga en cuenta que, a diferencia de los accesorios, los atributos y las ranuras no responden. Si planea cambiar los efectos secundarios de la aplicación según los atributos o las ranuras, debe realizar los cambios en el enlace del ciclo de vida onUpdated.

Si la configuración devuelve un objeto, se puede acceder a las propiedades del objeto en la plantilla del componente, al igual que el atributo props pasado a la configuración:

la configuración también puede devolver una función de representación. Esta función puede se puede usar directamente con el estado de respuesta declarado en el mismo alcance:

La nueva opción del componente de configuración se ejecutará antes de que se cree el componente y servirá como punto de entrada a la API de composición una vez que se hayan resuelto los accesorios. .

En setup(), dado que setup() se llama antes de que se resuelvan otras opciones del componente, no se convierte en una referencia a la instancia activa, por lo que el comportamiento en setup() es el mismo que en otras opciones. . el comportamiento es completamente diferente. Esto puede causar confusión al usar setup() con otras API basadas en opciones.

reactive() recibe un objeto normal y devuelve el proxy de respuesta del objeto normal. Equivalente a Vue.observable() de 2.x

Las transformaciones de respuesta son "profundas": afectan todas las propiedades anidadas dentro del objeto. Según la implementación del proxy ES2015, el objeto proxy devuelto no es igual al objeto original. Se recomienda utilizar únicamente objetos proxy para evitar depender del objeto original.

Recibe un valor de parámetro y devuelve una respuesta y un objeto de referencia mutable. El objeto ref tiene una única propiedad .value que apunta al valor interno.

Si se pasa ref como un objeto, se llamará al método reactivo para una transformación reactiva profunda.

Hay dos formas de utilizar la API de computación reactiva:

Pasar un objeto (reactivo o normal) o una referencia y devolver un proxy de solo lectura del objeto original. Los servidores proxy de sólo lectura son "profundos" y cualquier propiedad anidada dentro del objeto también es de sólo lectura.

Ejecute inmediatamente la función entrante, realice un seguimiento reactivo de sus dependencias y vuelva a ejecutar la función cuando las dependencias cambien.

Cuando se llama a watchEffect en la función setup() de un componente o en un enlace de ciclo de vida, el detector se vincula al ciclo de vida del componente y se detiene automáticamente cuando se descarga el componente.

En algunos casos, también es posible llamar explícitamente al valor de retorno para dejar de escuchar:

A veces, las funciones de efectos secundarios realizan efectos secundarios asincrónicos y estas respuestas deben borrarse cuando caducan (es decir, el estado ha cambiado antes de que finalice la respuesta). Por lo tanto, una función que detecta efectos secundarios entrantes puede tomar la función onInvalidate como entrada y usarla para registrar una devolución de llamada para limpiar cuando caduque. Esta devolución de llamada de invalidación se activará cuando:

La razón por la que registramos la devolución de llamada de invalidación pasando una función en lugar de devolver una función desde la devolución de llamada (como React useEffect) es porque el valor de retorno es muy útil para El manejo de errores asincrónicos es importante.

Al realizar una solicitud de datos, la función de efecto secundario suele ser una función asincrónica:

Sabemos que las funciones asincrónicas devuelven implícitamente Promise, pero la función de limpieza debe registrarse antes de resolver el problema. Promesa. Además, Vue se basa en la Promesa devuelta para manejar automáticamente errores potenciales en la cadena de Promesa.

El sistema reactivo de Vue almacena en caché las funciones de efectos secundarios y las actualiza de forma asincrónica, lo que evita llamadas repetidas innecesarias debido a múltiples cambios de estado en el mismo tick. En la implementación principal, la función de actualización del componente también es un efecto secundario monitoreado. Cuando una función de efecto secundario definida por el usuario se pone en cola, se ejecutará después de que se hayan actualizado todos los componentes:

En este ejemplo:

Tenga en cuenta que la ejecución de inicialización se ejecutará antes el componente está montado. Entonces, si desea acceder al DOM (o referencia de plantilla) al escribir una función de efecto secundario, hágalo en el gancho onMounted:

Si el efecto secundario necesita sincronizarse o volver a ejecutarse antes de actualizar el componente, podemos pasarle un Objeto con atributo de descarga como opciones (el valor predeterminado es "publicar"):

Las opciones onTrack y onTrigger se pueden usar para depurar el comportamiento del oyente.

Ambas devoluciones de llamada recibirán un evento de depuración que contiene información sobre el proyecto del que dependen. Se recomienda escribir declaraciones de depuración en las siguientes devoluciones de llamada para verificar las dependencias:

onTrack y onTrigger solo están disponibles en modo de desarrollo.

La Watch API es totalmente equivalente a 2.x this.$watch (y las opciones correspondientes en watch). El reloj necesita escuchar una fuente de datos específica y realizar efectos secundarios en la función de devolución de llamada. El valor predeterminado es la ejecución diferida, es decir, la devolución de llamada solo se ejecuta cuando cambia la fuente de datos monitoreada.

Los ganchos del ciclo de vida se pueden registrar importando directamente funciones en la serie onXXX: