Carlos Andres Doncel Martínez

Son funciones que observan cambios en valores reactivos específicos y ejecutan una función callback cuando estos valores cambian. Estas funciones son útiles cuando se requieren mostrar ciertos valores según los cambios realizados por el usuario en el estado de la aplicación.

Ejemplo:

Cuando se necesite mostrar en los inputs de un formulario un mensaje que le diga al usuario que ese campo es requerido y no debe estar vacío, usar un wacth sería lo ideal para lograr esa funcionalidad.

Es una característica que se comporta como una función la cual permite crear valores derivados (que también son reactivos), basados en otros valores reactivos del estado de la aplicación.

Estado de la aplicación , se refiere a los datos y variables que describen el estado actual de la interfaz de usuario y su lógica interna.

Propiedades Computadas Vs Funciones Normales

Las propiedades computadas son preferibles cuando necesitan valores derivados de otros datos y se quiere tomar beneficio de la reactividad y el caching automático. Por otro lado, las funciones normales son útiles para operaciones que no requieren reactividad o cuando no importa recalcular el valor cada vez que se invoca la función.

Son funciones especiales que puedes usar en tus componentes para ejecutar código en momentos específicos del ciclo de vida del componente.

¿Que es el ciclo de vida de un componente?

Son las diferentes etapas por las que pasa un componente desde que es creado hasta que es destruido. Estas etapas incluyen la creación, el montaje, la actualización y el desmontaje del componente. Los hooks te permiten "engancharte" a estas etapas para realizar acciones específicas.

Etapas del Ciclo de Vida y Hooks Comunes

1. Creación (Creation):

   • beforeCreate: Se llama justo antes de que el componente sea creado. En este punto, el componente todavía no tiene acceso a sus datos ni a sus métodos.
   • created: Se llama inmediatamente después de que el componente ha sido creado. Aquí ya puedes acceder a los datos y métodos, pero el componente aún no se ha renderizado en el DOM.

2. Montaje (Mounting):

   • beforeMount: Se llama justo antes de que el componente sea montado en el DOM. En este punto, el template ha sido compilado pero aún no se ha insertado en el DOM.
   • mounted: Se llama justo después de que el componente ha sido montado en el DOM. Aquí ya puedes acceder a los elementos del DOM y manipularlos si es necesario.

3. Actualización (Updating):

   • beforeUpdate: Se llama justo antes de que el componente se actualice debido a cambios en los datos reactivos. Es útil si necesitas realizar alguna acción justo antes de que se apliquen los cambios.
   • updated: Se llama después de que el componente se haya actualizado en el DOM. Aquí puedes realizar acciones basadas en el nuevo estado del DOM.

4. Desmontaje (Unmounting):

   • beforeUnmount: Se llama justo antes de que el componente sea desmontado y eliminado del DOM.
   • unmounted: Se llama después de que el componente ha sido desmontado del DOM. Aquí puedes limpiar cualquier cosa que el componente haya hecho, como eliminar eventos o cancelar suscripciones.

Ejemplo Práctico

Imagina que tienes un componente que muestra un mensaje y quieres registrar en la consola en qué momento se crean, montan, actualizan y desmontan las modificaciones.

onBeforeCreate y onCreated son hooks especiales que no están en Vue 3 por defecto como los otros, pero aquí los añadí para mostrar el flujo completo de un componente. Normalmente, sólo los hooks de montaje, actualización y desmontaje se utilizan en setup.

1<script setup lang="ts">
2import {
3  onBeforeMount,
4  onBeforeUnmount,
5  onBeforeUpdate,
6  onMounted,
7  onUnmounted,
8  onUpdated,
9  ref
10} from 'vue'
11
12const mensaje = ref('Soy un mensaje reactivo')
13
14onBeforeMount(() => {
15  console.log('El componente está a punto de ser montado en el DOM')
16})
17
18onMounted(() => {
19  console.log('El componente ha sido montado en el DOM')
20})
21
22onBeforeUpdate(() => {
23  console.log('El componente está a punto de actualizarse')
24})
25
26onUpdated(() => {
27  console.log('El componente se ha actualizado')
28})
29
30onBeforeUnmount(() => {
31  console.log('El componente está a punto de ser desmontado')
32})
33
34onUnmounted(() => {
35  console.log('El componente ha sido desmontado')
36})
37</script>

A lo largo del curso se menciona varias veces este concepto; sin embargo, no se explica concretamente su significado.

En programación, la inferencia se refiere al proceso mediante el cual un compilador o intérprete deduce automáticamente ciertos aspectos del código, como los tipos de las variables, sin que el programador tenga que especificarlos explícitamente. Veamos un ejemplo:

1let nombre = "Juan"; // El compilador infiere(deduce) que 'nombre' es de tipo string

Esto se deduce, ya que el compilador del lenguaje toma como referencia el valor que se está signando a la variable o constante.

Permitir que los datos y las vistas estén vinculados de manera que, cuando los datos cambian, la vista se actualiza automáticamente para reflejar esos cambios. Esto se logra mediante dos principales APIs: ref y reactive.

ref: Se utiliza para definir un valor reactivo único.

reactive: Se utiliza para definir un objeto reactivo que contiene múltiples propiedades.

buen dia, estoy realizando un pequeño proyecto aplicando conocimientos adquiridos en el curos de programacion orientada a objetos, la pequeña aplicacion funciona "pero de una manera extraña😣😥". se ha creado un formulario en el cual esta la opcion de elegir que tipo de usario se va a crear (profesor o alumno), la informacion se puede ingresar correctamente, pero si selecciono de primeras el tipo de usuario alumno al momento de dar click al boton crear usuario(submit) la informacion no se envia y no se imprime en el DOM; Lo mas extraño es que si elijo al tipo de usuario profesor de primeras si me envia e inserta la informacion, luego cuando vuelvo a cambiar el tipo de usario por alumno ahi si me imprime la informacion que le asigne al tipo alumno😵🥴🤯😩

Agradezco muchisimo si alguien me puedise orientar y ayudarme a descubrir y a corregir este funcionamiento tan extraño.

Adjunto link para la descarga del proyecto: https://we.tl/t-9pWt7bGWO5

Intentando restaurar la BD desde el backup en la nueva BD me encontre con el problema Permission denied lo cual no me deja realizar el respectivo proceso de restauracion.

en la imagen que les dejo se puede observar la forma correcta de realizar la restaruacion del backup sin que tengan problemas con permisos denegados, estan simple como reemplazar el backSlash \ por un slash simple / en la ruta donde esta almacenado el backup.

Para realizar este proceso se debe acceder a la ruta de instalación de postgres desde la consola de comandos y allí ubicar el ejecutable pg_dump, en windows la ruta por defecto es la siguiente: C:\Program Files\PostgreSQL\13\bin; una vez ubicado en la ruta se ingresa todo el comando a ejecutar para el respectivo proceso del backup de nuestra base de datos.

en caso de querer guardar el archivo backup en alguna ruta en especial, despues del comando -f entre comillas dobles " " ingresamos la ruta donde queremos que nos guarde el archivo, ejemplo: -f "D:\Desktop[MiprimerBackup.sql](//MiprimerBackup.sql)" , en el ejemplo anterior observamos que la ruta que se eligio fue el disco local D en la carpeta escritorio asigando el nombre del archivo generado con su respectiva extension.

En el ejemplo que se muestra usando el INSERT con el comando SELECT, El profesor menciona que los Tipos de Datos en cada tabla deben ser exactamente iguales para que se pueda ejecutar la accion de insertar la consulta correctamente; para quien tenga la duda si coloco un VARCHAR con un parametro diferente(ejemplo VARCHAR(50) en la tabla donde se realizara la consulta) en el ejemplo el profesor usa VARCHAR(60) en ambas, Tambien es valido y la insercion de la consulta se hace correctamente.

hola cordial saludo a tod@s..... necesito una orientacion en un problema que trato de resolver en javascript; necesito almacenar unos valores dentro de una propiedad de un objeto pero que este valor no se reinicie y pueda seguir añadiendo mas valores.

aqui les dejo el codigo del problema.... agradezco muchisimo la ayuda y respectiva orientacion

1
2const MENU = [
3   {
4       producto: "Hamburguesa sencilla",
5       precio: 5000,
6       codigo: "HS01"
7   },
8
9   {
10       producto: "Hamburguesa especial",
11       precio: 12000,
12       codigo: "HE02"
13   },
14
15   {
16       producto: "Papas a la francesa",
17       precio: 4000,
18       codigo: "PF03"
19   },
20
21   {
22       producto: "Gaseosa",
23       precio: 2500,
24       codigo: "GS04"
25   },
26]
27
28const restaurante = {
29 vendidos: [],
30 totalVentas: 0
31}
32
33
34const usuario = {
35 nombre: "Andres",
36 edad: 22,
37 deuda: 0,
38}
39
40
41const MOSTAR_MENU = () => {
42 console.log("Codigo - Producto - Precio")
43 for (let item of MENU) {
44   console.log(`${item.codigo} - ${item.producto} - ${item.precio}`)
45 }
46}
47
48let pedido = []
49
50
51const REALIZAR_PEDIDO = codigo => {
52 codigo = codigo.toUpperCase()
53 if (!codigo) return "no se admiten campos vacios"
54 if (typeof codigo != "string") return "el valor ingresado no es valido"
55 const buscar = MENU.find(item => item.codigo === codigo)
56 if (!buscar) return "producto no encontrado"
57 pedido.push(buscar)
58 restaurante.vendidos = pedido.slice()
59}
60
61
62
63const MOSTAR_PEDIDO = () => {
64 console.log("Codigo - Producto- Precio")
65 for (let item of pedido) {
66   console.log(`${item.codigo} - ${item.producto} - ${item.precio}`)
67 }
68}
69
70
71
72const totalPagar = () => {
73
74 for (costo of pedido) {
75   usuario.deuda += costo.precio
76   pedido = [] //aqui se esta reiniciando la variable pedido, lo cual a su vez me reinicia tambien el valor de la propiedad  del objeto restaurante.vendidos
77 }
78 return ` ${usuario.nombre}, Debes pagar un total de $${usuario.deuda}`
79}
80
81const PAGAR_PEDIDO = pago => {
82 switch (true) {
83   case pago < usuario.deuda:
84     console.log(`no te alcanza para pagar tu deuda; necesitas agregar $${usuario.deuda - pago} mas, para poder llevarte tu compra`)
85     break;
86   case pago === usuario.deuda:
87     console.log(`has pagado completamente tu deuda`)
88     usuario.deuda = 0
89     pedido = []
90     break
91   case typeof pago != "number":
92     console.log("el valor de pago ingresado no es valido")
93     break
94   default:
95     console.log(`has pagado completamente tu deuda y tienes un cambio de $${pago - usuario.deuda}`)
96     usuario.deuda = 0
97     pedido = []
98     break;
99 }
100}
101
102
103
104const VERVENTAS = () => {
105 console.log(` las ventas realizadas fueron : `)
106 for (let item of restaurante.vendidos) {
107   restaurante.totalVentas += item.precio
108   console.log(`${item.codigo} - ${item.producto} - ${item.precio}`)
109 }
110 return `para un total en ventas de: ${restaurante.totalVentas}`
111}
112