Analyze the difference between computed and watch in Vue

1. Introduction to computed

computed is used to monitor self-defined variables. The variable is not declared in data , but is defined directly in computed and can be used directly on the page.

//Basic use {{msg}}
<input v-model="name" /> 
  
 //Calculated properties computed:{
 msg:function(){
  return this.name
 }
}

In the input box, when name value is changed, msg value will also change. This is because computed monitors its own attribute msg , and once it finds name changes, msg will be updated immediately.

Note: msg cannot be defined in data , otherwise an error will be reported.

1.1, get and set usage

<input v-model="full" ><br>
<input v-model="first" > <br>
<input v-model="second" > 

data(){
 return {
  first:'beauty',
  Second: 'Sister'
 }
},
computed:{
 full:
  get(){ //The callback function is executed when the current property value needs to be read, and the value of the current property is calculated and returned based on the relevant data return this.first + ' ' + this.second
   },
   set(val){ //Monitor the changes of the current attribute value, execute when the attribute value changes, and update the related attribute data let names = val.split(' ')
    this.first = names[0]
    this.second = names[1]
  }
 }
}

get method: When first and second change, the get method will be called to update the value of full .

set method: When the value of full is modified, set method is called, val is the latest value of full .

1.2. Computed attribute cache

We can also achieve this effect by splicing data through methods. The code is as follows.

<div> {{ full() }} </div>
  
data(){
 return {
  first:'beauty',
  Second: 'Sister'
 }
},
methods:{
 full(){
 return this.first + ' ' + this.second
 }
},

In a page, data may be used multiple times. We implement computed and method methods together and reference the data multiple times in the page. See the following effects.

<div>
  computed value:
  {{full}} {{full}} {{full}} {{full}}
</div>

<div>
  Methods calculate value:
  {{fullt}} ​​{{fullt}} ​​{{fullt}} ​​{{fullt}}
</div>

data(){
 return {
  first:'beauty',
  Second: 'Sister'
 }
},
computed:{
 full:function(){
  console.log('computed')
  return this.first + ' ' + this.second
 }
},
methods:{
 fullt(){
  console.log('method')
  return this.first + ' ' + this.second
 }
 }

The running results are:

According to the results, it is not difficult to find that the data obtained by the method needs to be recalculated several times after being used several times, but the calculated properties are not. Instead, they are cached based on their responsive dependencies and will be recalculated only when the dependent property value changes. Since it requires fewer calculations, it has better performance.

2. Introduction to watch

watch is to monitor the data changes on the Vue instance. In layman's terms, it is to detect the data declared in data . Not only can simple data be monitored, but also objects or object properties can be monitored.

Demo1: Monitoring simple data

<input v-model="first" > <br>
  
data(){
 return {
  first:'beauty',
  }
 },
watch:{
 first( newVal , oldVal ){
 console.log('newVal',newVal) // the latest value of first console.log('oldVal',oldVal) // the previous value of first}
},
// When modifying the value of first, the latest value will be printed immediately

Demo2: Monitoring Object

When monitoring an object, you need to use deep monitoring.

<input v-model="per.name">
  
data(){
 return {
  per:
   name:'Qianqian',
   age:'18'
   }
  }
 },
watch:{
 per:
  handler(oldVal,newVal){
   console.log('newVal',newVal)
   console.log('oldVal',oldVal)
  },
  deep:true,
 }
},

When modifying per.name , it is found that the values ​​of newVal and oldVal are the same. This is because the pointers they store point to the same place. Therefore, although deep monitoring can monitor changes in objects, it cannot monitor which specific attribute has changed.

Demo3: Monitor a single property of an object

// Method 1: Directly reference the object's properties <input v-model="per.name">
  
data(){
 return {
  per:
   name:'Qianqian',
   age:'18'
   }
  }
 },
watch:{
 'per.name':function(newVal,oldVal){
   console.log('newVal->',newVal)
   console.log('oldVal->',oldVal)
  }
},

You can also use computed as an intermediate conversion, as follows:

// Method 2: Using computed
<input v-model="per.name">
  
data(){
 return {
  per:
   name:'Qianqian',
   age:'18'
   }
  }
 },
watch:{
 perName(){
  console.log('name changed')
  }
},
computed:{
 perName:function(){
  return this.per.name
 }
},

Demo4: Listen to the value passed by props component

props:{
 mm:String
},
//Don't use immediate
watch:{
 mm(newV,oldV){
   console.log('newV',newV)
   console.log('oldV',oldV)
 }
}

//Use immediate
watch:{
 mm:{
  immediate:true,
  handler(newV,oldV){
   console.log('newV',newV)
   console.log('oldV',oldV)
  }
}

When immediate is not used, when the page is loaded for the first time, the printing in mm monitored by watch is not executed.

When using immediate , the result will also be printed when loading for the first time: newV 11 oldV undefined .

The main function of immediate is to trigger the callback function immediately when the component is loaded.

3. The difference between the two

3.1. For computed

• The data monitored computed is not declared in data
• computed does not support asynchrony. When there is an asynchronous operation in computed , it is impossible to monitor data changes.
• computed has a cache. When the page is re-rendered and the value remains unchanged, the previous calculation result will be directly returned without recalculation.
• If a property is calculated from other properties, this property depends on other properties, generally use computed
• When computed property value is a function, get method is used by default. If the attribute value is an attribute value, the attribute has a get and set method, and set method is called when the data changes.

computed:{
 //The property value is the function perName:function(){
  return this.per.name
 },
 //The attribute value is the attribute value full:{
  get(){ },
  set(val){ }
 }
},

3.2. For watch

• The monitored data must be declared in data or props
• Support asynchronous operation
• Without caching, the page will be re-rendered and the value will be executed even if it does not change.
• When an attribute value changes, the corresponding operation needs to be performed
• When the monitored data changes, other operations will be triggered. The function has two parameters:

immediate : The component is loaded and the callback function is triggered immediately
deep : deep monitoring, mainly for complex data. For example, when monitoring an object, add deep monitoring, and any change in attribute value will trigger it.
Note: After adding deep listening to the object, the old and new values ​​output are the same.

When computed page is re-rendered, the calculation will not be repeated, but watch will be recalculated, so computed performance is higher.

IV. Application Scenarios

When numerical calculations are required and depend on other data, computed should be used because the caching feature of computed can be used to avoid recalculation every time a value is obtained.

When you need to perform asynchronous operations or operations with high overhead when data changes, you should use watch . computed does not support asynchrony. If you need to limit the frequency of executing operations, you can use computed as an intermediate state.

Summarize:

This is the end of this article about analyzing the difference between Vue's computed and watch . For more information about the difference between Vue's computed and watch , please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!