Study notes on Vue computing attributes

This article has shared learning notes on Vue computing attributes for your reference. The specific content is as follows

① Expressions in the template are actually only used for simple operations, and for complex logic, computer properties are used.

②Basic example:

<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 ('').reverse().join('') 
 } 
 } 
})

Here we declare a computer property reversedMessage, and the function we provide will be used as a getter for the property.

③Computer cache vs Methods

The same effect can be achieved by calling the method in the expression:

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

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

The same function can be defined as a method instead of a computer property. For the final result, both ways are indeed the same. However, different computer attributes are cached based on their dependencies. The computed attribute will only be re-evaluated when its related dependencies have changed, which means that as long as the message has not changed, multiple accesses to the reversedMessage computed attribute will immediately return the previous computed result without having to execute the function again.
The following computed properties will no longer be updated because () is not a responsive dependency:

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

The method call will always execute the function whenever a re-render occurs.

④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){ 
   = val + '' +  
 }, 
 lastName:function(val){ 
  =  + '' +val 
 } 
 } 
})

computed:

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

⑤ Calculate setter:

The computed attribute has only getter by default, but if you need it, you can provide a setter:

// ... 
computed: { 
 fullName: { 
 // getter 
 get: function () { 
  return  + ' ' +  
 }, 
 // setter 
 set: function (newValue) { 
  var names = (' ') 
   = names[0] 
   = names[ - 1] 
 } 
 } 
} 
// ...

When running = 'John Doe', the setter will be called, and the corresponding will be updated.

⑥ Observe watchers

This is useful when you want to perform asynchronous operations or overhead operations when the data changes accordingly.

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

&lt;script src="/[email protected]/dist/"&gt;&lt;/script&gt; 
&lt;script src="/[email protected]/"&gt;&lt;/script&gt; 
&lt;script&gt; 
var watchExampleVM = new Vue({ 
 el: '#watch-example', 
 data: { 
 question: '', 
 answer: 'I cannot give you an answer until you ask a question!' 
 }, 
 watch: { 
 // If the question changes, this function will run question: function (newQuestion) { 
   = 'Waiting for you to stop typing...' 
  () 
 } 
 }, 
 methods: { 
 // _.debounce is a function that limits the frequency of operations through lodash. // In this example, we want to limit the frequency of access to /api // Ajax request will not be issued until the user has entered it. // Learn more about _.debounce function (and its cousin // _.throttle), reference: /docs#debounce getAnswer: _.debounce( 
  function () { 
  var vm = this 
  if (('?') === -1) { 
    = 'Questions usually contain a question mark. ;-)' 
   return 
  } 
   = 'Thinking...' 
  ('/api') 
   .then(function (response) { 
    = _.capitalize() 
   }) 
   .catch(function (error) { 
    = 'Error! Could not reach the API. ' + error 
   }) 
  }, 
  // This is the number of milliseconds we stop entering for the user to wait  500 
 ) 
 } 
}) 
&lt;/script&gt;

In this example, using the watch option allows us to perform asynchronous operations, limiting the frequency of the operation we perform, and setting an intermediate state before getting the final result, which cannot be done by the computed attribute.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.