Prefácio
Os atributos calculados são usados para descrever a expressão declarativa de que um valor depende de outros valores. Quando você vincula os dados a uma propriedade calculada em um modelo, o VUE atualiza o DOM quando qualquer valor depende de faz com que a propriedade calculada altere. Esse recurso é muito poderoso, pode tornar seu código mais declarativo, orientado a dados e fácil de manter.
As expressões nos modelos são muito convenientes, mas na verdade são usadas apenas para operações simples.
O modelo é descrever a estrutura da visão. Colocar muita lógica no modelo tornará o modelo muito pesado e difícil de manter.
É por isso que vue.js limita expressões de ligação a uma expressão,
Se mais de uma expressão for necessária, as propriedades calculadas devem ser usadas.
Vamos dar uma olhada neste exemplo simples
<div id = "Exemplo"> a = {{a}}, b = {{b}} </div> var VM = new Vue ({// O motivo da nomeação da VM é que isso é realmente VM em MVVM el: '#example', dados: {a: 1}, computado: {/ a get a get para get para gets para get para gets para get para #exum ', {a: 1},/{/ a {/ a), para a vm. Retorne isso.A + 1}}})Resultado da saída:
a = 1, b = 2
Aqui declaramos uma propriedade computada b. A função que fornecemos será usada como um getter para a propriedade vm.b.
console.log (vm.b) // -> 2vm.a = 3console.log (vm.b) // -> 3
Você pode vincular propriedades computadas em um modelo como se vincularia uma propriedade normal. O Vue sabe que o VM.B depende do VM.A; portanto, quando o VM.A muda, as ligações que dependem do VM.B também serão atualizadas. E o melhor é que criamos essa dependência declarativamente: os getters das propriedades computadas são limpas e não temos efeitos colaterais, por isso também são fáceis de testar e entender.
Se você deseja observar alterações de dados nas instâncias do VUE, pode usar um método fornecido pelo vue.js $watch .
<div id = "Demo"> {{FullName}} </div> var VM = new Vue ({Data: {FirstName: 'Foo', LastName: 'Bar', FullName: 'Foo Bar'}}) VM. this.lastName}) vm. $ watch ('lastName', function (val) {this.fullname = this.firstname + '' + val}) No entanto, o método acima também pode ser implementado usando computed :
var VM = new Vue ({Data: {FirstName: 'Foo', LastName: 'Bar'}, computado: {fullName: function () {return this.firstname + '' this.lastname}}}) É mais fácil escrever dessa maneira? Não há código duplicado desnecessário? O funcionário também incentiva o uso de métodos computed .
Quando falei sobre computed acima, foi mencionado que esse método fornece o método get padrão. Então, existe set ?
// ... compute: {fullName: {// getter get: function () {return this.firstname + '' + this.lastName}, // setter set: function (newValue) {var names = newValue.split ('') this.firstname = names [0] this.LastName = names = names = names = names = names = names = names = names = names. Se ligarmos para vm.fullName = 'John Doe' , setter será chamado. vm.firstName e vm.lastName também terão atualizações correspondentes. Esse método é útil às vezes.
Resumir
O exposto acima é sobre atributos de computação vue.js. Espero que este artigo seja útil para todos. O editor também atualizará o conteúdo sobre o vue.js um após o outro. Amigos interessados podem continuar a seguir wulin.com.