A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Reactividad

25/53
Recursos

Aportes 7

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Este problema ya no existe en Vue 3, a partir de Vue 3 ya pueden agregar propiedades a como lo har铆an normalmente y Vue va a reaccionar sin problemas

驴C贸mo es el sistema reactivo en VueJS?

  • El comportamiento interno de un componente de Vue est谩 muy asentado en el patr贸n MVVM y en el patr贸n Observer. Para conseguirlo, Vue presenta un sistema interno como es el siguiente:

    Cada vez que instanciamos un componente en nuestra aplicaci贸n, Vue se encarga de hacer 3 cosas:
  1. Envuelve los atributos de su objeto de datos (data()) con un m茅todo getters y setters que son usados para la obtenci贸n y modificaci贸n del datos.
  2. Incluye un manejador que observar ante posible cambios de estado interno que es el encargado de rerenderizar vistas.
  3. Cuando tiene esto preparado, renderizar el template con dichos datos interpolados en el DOM.

Comparto el c贸digo con los comentarios necesarios para recordar como funciona cada uno

<template>
    <div>
    <h1>Este es un component hijo</h1>
    <local-component></local-component>
    <localComponent></localComponent>
    <button @click="addProp">Agregar</button>

    <p>{{person}}</p>
    </div>
</template>

<script>
//Se importa el componente
import localComponent from './localComponent.vue'
//Se crea el objeto vue (todos los componentes devuelven un objeto)
export default {
    data(){
        return{
            person: {
                name:'carlos'
            }
        }
    },
    methods: {
        addProp(){
            //this.person.lastName = 'ruales' //MANERA INCORRECTA, NO QUEDA REACTIVO
            //this.$set(this.person,'lastName','ruales') //PARA AGREGAR UNO
            this.person = Object.assign({},this.person,{a:1, b:2}) //Cuando se necesitan agregar varios campos dinamicamente

        }
    },
}
</script>```


驴Alguien sabe c贸mo puedo declarar variables de forma global en el proyecto de Vue.js?
Estas variables las necesito para solo lectura.

Por fin entiendo el porqu茅 de la existencia de $set.
Si bien es mejor declarar dicha propiedad del objeto en la data inicial del componente. Puede ser que en la app el usuario quiera agregar mas de un dato a su registro (tel茅fono 3) y por ende debemos reaccionar al cambio de ese valor de manera reactiva.

Los problemas de reactividad se resuelven con:
this.$set(this.objeto, 鈥榥uevaPropiedad鈥, 鈥榲alorPropiedad鈥)

La otra forma con Ecmascript 2015
this.objeto = Object.assign({}, this.object, {nuevas propiedades})

una forma de hacerlo reactivo es forzarlo con

this.$forceUpdate();

pero puede que no sea una sol efectiva porque mas adelante puede generar m谩s issues