0

Estou iniciando o estudo com o Vue.js e me deparei com uma situação dentro de uma das opções e imagino que sirva para outras opções que é o uso do termo function, por exemplo:

var vm = new Vue({
  methods : {

    /* assim */

    enviar() {
      // code
    },

    /* ou assim */

    enviar: function() {
      // code
    },

  }
})

E com isso minha dúvida é se tem diferença em cada uma das sintaxes e de navegadores?

3
  • Estou trabalhando com Vue a mais de um ano, e nunca me fiz essa pergunta, sempre uso enviar(), mas se eu nao me engano, você usar enviar: function(){} tem alguns problemas com o this. Commented 28/09/2017 às 12:14
  • Então, na documentação eu sempre vi usando a forma com o funcion(){} e dai olhando uns videos vi que foi usando sem, e dai com isso que me surgiu a dúvida. Commented 28/09/2017 às 12:27
  • Eu acredito que não tenho muita diferença, que é algo como Arrow Functions, pois, se fizer um teste, e tentar usar o this, vai dar um erro, voce terá que usar let self = this, diferente se usar so com () Commented 28/09/2017 às 12:28

1 Resposta 1

3

Segundo a documentação na Mozilla, enviar apesar de ser à forma contraída de enviar: function(), a forma contraída é uma função nomeada, enquanto que a segunda é uma função anonima.

Note : The shorthand syntax uses named function instead of anonymous functions (as in …foo: function() {}…). Named functions can be called from the function body (this is impossible for anonymous function as there is no identifier to refer to). For more details, see function.

Fonte: Method definitions

Porem se você executar o código abaixo, verá que a forma contraída se comporta como uma função anonima, pelo menos é este comportamento que estou tendo ao executar no Opera.

var teste = {
  nomeada: function nomeada(imprimir) {
    return !imprimir ? nomeada(true) : console.log("nomeada");
  },
  curta(imprimir) {
    return !imprimir ? curta(true) : console.log("curta");
  },
  anomina: function(imprimir) {
    return !imprimir ? anomina(true) : console.log("anomina");
  }
}

try {
  teste.nomeada();
} catch (e) {
  console.error(e.message);
}
try {
  teste.curta();
} catch (e) {
  console.error(e.message);
}
try {
  teste.anomina();
} catch (e) {
  console.error(e.message);
}

Um outro ponto curioso, é que na documentação na Mozilla fala que a forma contraída não pode ser utilizada como.

Method definitions are not constructable

All method definitions are not constructors and will throw a TypeError if you try to instantiate them.

Fonte: Method definitions

Mas ao executar o código abaixo, obtive um comportamento diferente do apontado. Pelo menos foi o que aconteceu ao executar no Opera.

var teste = {
  nomeada: function nomeada() {
    this.nome = "nomeada";
  },
  curta() {
    this.nome = "curta";
  },
  anomina: function() {
    this.nome = "anomina";
  }
}

try {
  console.log(new teste.nomeada);
} catch (e) {
  console.error(e.message);
}
try {
  console.log(new teste.curta);
} catch (e) {
  console.error(e.message);
}
try {
  console.log(new teste.anomina);
} catch (e) {
  console.error(e.message);
}

Um outro ponto, é quanto a compatibilidade com os browsers, funções curtas podem ser utilizadas apenas em browsers mais recentes/atualizados. Porém, como está a utilizar o VueJS, deve está utilizando o vue-cli, o gulp-babel ou qual quer solução que transpile o seu javaScript ES5 para algo compatível com browser antigos, então isto não chega a ser um problema.

2
  • Então Tobias, muito obrigado pela resposta, mas ainda fiquei com dúvida de qual a melhor forma de usar, se a curta ou a anonima, e ainda não estou usando o vue-cli ou qualquer outra solução que transpile o js, só o vue puro mesmo Commented 28/09/2017 às 13:01
  • 1
    @MarceloDiniz eu te aconselho fortemente a utilizar pelo menos o gulp-babel. Mas se decidir continuar sem, e você não tem controle sobre qual browser os usuários vão utilizar, então deve evitar a forma contraída. no mais, não tem um melhor ou pior, a diferença aqui é apenas de estilo, use o que achar mais legivel. Commented 28/09/2017 às 13:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .