Differences between computed properties and methods in VueJS

Navigation
1

Within VueJS we have two options to manipulate the data that are within the reach of our instance of VueJS :

  • Computed properties
  • Methods (functions in the way we already know them)

    • METHODS EXAMPLE 

        let app = new Vue({
      el: '#app',
      data:{
        valor: 0
      },
      methods:{
        aumenta(){
          return console.log(this.valor)
        }
      },
      created(){
        this.aumenta()
      }
    })

    That is invoked like this 

    <button @click="aumenta(valor += 1)">Métodos</button>

    EXAMPLE OF COMPUTED PROPERTIES 

        let app = new Vue({
      el: '#app',
      data:{
        valor: 0
      },
      computed:{
        aumenta: function(){
          return console.log(this.valor += 1)
        }
      },
      created(){
        this.aumenta()
      }
    })

    That is invoked like this 

    <div id="app">
  {{ this.aumenta }}
</div>

    However:

  • Does a computed property accept parameters?
  • Can a computed property be invoked as a function of the methods tag?
    • asked by element 07.10.2018 в 16:01
    source

    2 answers

    1

    We will observe through 2 examples the similarities and differences between a computed property and the functions within methods

    EXAMPLE OF METHODS WITH A PARAMETER 

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <div id="app">
      <button @click="saludar('SO  en español')">Mostrar mensaje de saludo</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
          el: '#app',
          data:{
            message: "Hola hola: "
          },
          methods:{
            saludar: function(comunidad){
              return console.log(this.message+comunidad)
            }
          }
        })
    </script>
    </body>
    </html>

    From the previous example we can notice the following:

  • The hello function, found within the methods tag, accepts parameters
  • The parameter is passed in the invocation of the function
  • For the functionality of saludar() to be observed we must associate it with an event that is triggered by the user; in this case the click event with the shortened syntax of @click()

    • EXAMPLE OF COMPUTED PROPERTIES 

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="app">
  {{ this.myName }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
      el: '#app',
      data:{
        valor: 0,
        name: 'Alfredo P'
      },
      computed:{
        myName: function(){
          return this.name
        }
      },
      created(){
        this.myName()
      }
    })
</script>
</body>
</html>

    From the previous example we can notice the following:

  • A computed property does not accept parameters
  • A computed property can not be called, because it has become a property; then we only need to invoke it like that {{ this.myName }}
    • answered by 07.10.2018 / 16:01
    source
    1

    To answer this type of questions you should always go to the official documentation.

    There are several ways to manipulate the data in a Vue instance, not only the computed properties and the methods , in fact you can use both and not modify the data of your instance. In fact at any point of the execution of your program you can manipulate the data of your Vue instance.

    The main advantage of the computed properties vs the methods is that they are cached based on their dependencies. That is, the computed properties are only invoked in case some property on which they depend change their value, which gains a lot in efficiency, however the methods are always called when the Vue instance is redistributed.

    The computed properties can not be called with parameters, since they are shown in the Vue instance as properties and not as methods and their objective is not to supply the need for a method, but to gain clarity and efficiency with respect to a very complex logic written in the view.

    For more information: Official Documentation.

        
    answered by 07.10.2018 в 21:55
    Establish that all the fields that they fill in the grid are string C # + Windows Forms Difference between ./ and ../ in require Node.js