Muy buena profe, como sugerencia: Poner las letras de Visual Studio Code un poquito mas grande.
Introducción: fundamentos de Vue.js
¿Cómo convertirte en frontend developer con Vue.js?
La magia de aprender JavaScript
¿Qué es Vue.js? Frameworks, librerÃas y componentes
Declarative rendering con JavaScript
Declarative rendering con Vue.js
Reactividad a profundidad
¿Qué es la reactividad?
¿Qué es un Proxy?
Crea tu propio miniframework: MiniVue
Implementando un Proxy en MiniVue
Implementando Reflect en MiniVue
Reactividad con effect, track y trigger
Implementando effect, track y trigger en MiniVue
Templates de Vue.js
Disclaimer sobre los Templates
Proyecto: PlatziCommerce con Vue.js
Expresiones
Atributos
Conditional rendering
List rendering
Event handling
APIs internas de Vue.js
Options API vs. Composition API
data() y ref()
Métodos personalizados con Options API
Métodos personalizados con Composition API
reactive()
Segunda capa: componentes de Vue.js
Componentes de Vue con Options API
Componentes de Vue con Composition API y props
Reto con componentes
Custom events o eventos personalizados con Options API
Custom events o eventos personalizados con Composition API
Watchers con Options API
Watchers con Composition API
Computed properties con Options API
Computed properties con Composition API
Ciclos de vida de un componente
Ciclos de vida de un componente: Composition API
Siguientes pasos
Continúa tu ruta de aprendizaje profesional con Vue.js
Siguientes pasos con Vue.js
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 8
Preguntas 2
Muy buena profe, como sugerencia: Poner las letras de Visual Studio Code un poquito mas grande.
a mi no se me mostraban los cambios T.T q hacia dentro del get(){}
si les pasa eso ctrl + f5
Aquà se puede ver cómo un proxy actúa como intermediario (tal como lo dije en una clase pasada), son similares a los getters y setters de una clase, con la diferencia de que, en lugar de tener que llamar a un método, se llama directamente a la propiedad y el proxy la intercepta.
.
Los getters y otras trampas de los proxys se ejecutan justo en el momento en el que se intenta acceder a una propiedad, en este caso, justo cuando dentro de pText
accedemos mediante target[name]
, recordemos que el parámetro target
contiene la referencia en memoria de this.$data
(nuestro proxy), es por eso que funciona.
.
Les dejo en enlace a mi repositorio de esta clase ^^:
.
https://github.com/RetaxMaster/mini-vue/tree/c18944ae9a6699fbd8e704f1a70a5c636b57eb07
Para los que no entiendan lo que es el objeto Proxy en JS, es un objeto que envuelve a otro objeto (target) y captura las operaciones esenciales del objeto target
Documentación
Qué interesante, yo en lo personal para buscar si un elemento posee una propiedad utilizo Object.prototype.hasOwnProperty()
y es sencillamente porque le pregunto si directamente posee esa propiedad y no tanto a la cadena de herencia del _property_
.
En cuanto a performance, se optimiza la búsqueda a lo largo del objeto además es considerada una buena práctica JavaScript Patterns
Wow muy interesante clase
a ver si comprendÃ
este target hace referencia al objeto que esta en this.origen no?
this.$data = new Proxy(this.origen, {
get(target, propKey) { //objeto y prop
if (propKey in target) {
return target[propKey];
}
console.warn("La propiedad", name, "no existe");
return "";
}
})
No se me mostraban los cambios, ya que no habÃa realizado el cambio en mount del this.origen por this.$data
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.