0

He estado pensando un poco en como VUE maneja la direcciones de acceso para la obtención de datos y métodos, ya que evita el uso de data y methods por el uso de this, esto me parece interesante aunque no he podido encontrar documentación al respecto, me gustaría saber como lo hace internamente, pienso que podría tener una buena implementan en otros casos.

Ejemplo:

new Vue({
      el: '#app',
      mounted(){                
      
        // Como se implementa el 'data' y 'methods' a 'this' 
        console.log(this.valor);        
        this.funcion();
        
        // En vez de:
        console.log(this.data.valor);
        this.methods.funcion();
      },
      data: {
        valor: '>> valor'
      },
      methods: {
        funcion: () => console.log('>> funcion')
      }
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js" charset="utf-8"></script>
<div id="app"></div>

3
  • Yo por lo menos no entiendo claramente que estas preguntando. Supongo que leiste la documentacion, pero estas preguntando algo mas a nivel de codigo fuente. Sobre eso viste algo?
    – gbianchi
    Commented el 10 may. 2019 a las 16:10
  • No realmente, no he encontrado alguna referencia de este funcionamiento, actualizare la pregunta con un código de ejemplo.
    – ontimond
    Commented el 10 may. 2019 a las 16:15
  • ahh.. probablemente sea sugar syntasis permitida por vue. La verdad nunca me lo pregunte, habria que revisar bien que hace vue al transformar esto al js resultante...
    – gbianchi
    Commented el 10 may. 2019 a las 16:56

1 respuesta 1

0

Lo que desea saber está en la documentación y se resumen en dos puntos.

  1. Las propiedades de data, Vue, las convertirá recursivamente en getters y setters, para obtener su valor y modificarse. Es por eso que puede acceder directamente con this.valor y setear con this.valor = algo, pero también es posible acceder a las propiedades de la otra forma, this.$data.valor;, notese el $ antes.

  2. Todos los métodos tendrán como contexto this y hasta donde sé, es la única forma de acceder, no hay un $methods como para las propiedades de data.

Código

new Vue({
  el: '#app',
  mounted(){                

    // Como se implementa el 'data' y 'methods' a 'this' 
    console.log(this.valor);        
    this.funcion();

    // En vez de:
    console.log(this.$data.valor);
  },
  data: {
    valor: '>> valor'
  },
  methods: {
    funcion: () => console.log('>> funcion')
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js" charset="utf-8"></script>
<div id="app"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.