Learning Notes for Vue Computing Attributes

This article shares the study notes of Vue calculation attributes for your reference. The specific contents are as follows

(1) The expressions in the template are actually only used for simple operations, and for complex logic, computer attributes are used.

② Basic examples:

<div id = "example"> 
 <p>Original message:"{{message}}"</p> 
 <p>Computed reversed message:"{{reversedMessage}}"</p> 
</div> 

var vm = new Vue({ 
 el:"#example", 
 data:{ 
 message:"Hello" 
 }, 
 computed:{ 
 //a computed getter 
 reversedMessage:function(){ 
  //'this' points to the vm instance 
  return this.message.split('').reverse().join('') 
 } 
 } 
}) 

Here we declare a machine attribute reversedMessage, and the function we provide will be used as getter for the attribute vm. reversedMessage.

③ Computer cache vs Methods

You can do the same by calling method in the expression:

<p>Reversed message:"{{reversedMessage}}"</p> 

//in component 
methods:{ 
 reversedMessage:function(){ 
 return this.message.split('').reverse()/join('') 
 } 
} 

You can define the same function as one method instead of one computer property. For the final result, the two ways are indeed the same. However, different computer attributes are cached based on their dependencies. A computed property is re-evaluated only if its dependent dependencies change, which means that accessing the reversedMessage computed property multiple times will immediately return the previous computed result, without having to execute the function again, as long as the message has not changed.
The following computed properties will not be updated because Date. now () is not a responsive dependency:

computed:{ 
 now:function(){ 
 return Date.now() 
 } 
} 

Whenever re-rendering occurs, the method call always executes this function.

④ computed attribute vs watch attribute

<div id= "demo">{{fullName}}</div> 

watch:

var vm = new Vue({ 
 el:"#demo", 
 data:{ 
 firstName:"Foo", 
 lastName:"Bar", 
 fullName:"Foo Bar" 
 }, 
 watch:{ 
 firstName:function(val){ 
  this.fullName = val + '' + this.lastName 
 }, 
 lastName:function(val){ 
 this.fullName = this.firstName + '' +val 
 } 
 } 
}) 

computed:

var vm = new Vue({ 
 el:'#demo', 
 data:{ 
 firstName:'Foo', 
 lastName:'Bar' 
 }, 
 computed:{ 
 fullName:function(){ 
  return this.firstName + ' ' + this.lastName 
 } 
 } 
}) 

⑤ Calculate setter:

The calculated attribute only has getter by default, but one setter can be provided if necessary:

// ... 
computed: { 
 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.length - 1] 
 } 
 } 
} 
// ... 

When you run vm. fullName = 'John Doe', setter is called and vm. firstName and vm. lastName are updated accordingly.

⑥ watchers was observed

This is useful when you want to perform asynchronous or costly operations as data changes accordingly.

<div id="watch-example"> 
 <p> 
 Ask a yes/no question: 
 <input v-model="question"> 
 </p> 
 <p>{{ answer }}</p> 
</div> 

var vm = new Vue({ 
 el:"#example", 
 data:{ 
 message:"Hello" 
 }, 
 computed:{ 
 //a computed getter 
 reversedMessage:function(){ 
  //'this' points to the vm instance 
  return this.message.split('').reverse().join('') 
 } 
 } 
}) 

0

In this example, using the watch option allows us to perform an asynchronous operation, limits how often we perform it, and sets an intermediate state until the final result is obtained, which is not possible with the computed property.