Computed – Calculates the attributes

Why computed?

  • Computed is used to process data bound to the UI.
  • Processing data directly in a Template requires writing complex logic and expressions, which can be cumbersome and difficult to maintain.
<div class="example">
  {{ message.split('').reverse().join('')}}
<div>
Copy the code

Computational properties are recommended if you need to process data through complex logic.

Computed main usage

getter

template

<div>
  <p>Raw values :{{message}}</p>
  <p>Calculate the value of the property :{{message}}</p>
</div>
Copy the code

data


const vm = new Vue({
  data(){
    return { message: 'hello' }
  }
 computed:{  reverseMessage(){  return this.message.split(' ').reverse().join(' ')  }  } })  // Output the result // Raw value: Hello // Calculate the attribute value: olleH Copy the code

Getter and setter

  • Computed has only getters by default, but a setter can be provided if needed.
  • The getter is mainly used to read the current property data, and calculate and return the value of the current property;
  • Setters listen for changes in the value of the current property, and immediately execute and update the data for the property concerned.
const vm = new Vue({
  data(){
   return {
     firstName: 'Foo'.     lastName: 'Bar'
 }  },  computed: {  fullName(){  get() { return this.firstName + ' ' + this.lastName  },  set(newValue){// value is the latest value of fullName  const names = value.split(' ')  this.firstName = names[0];  this.lastName = names[1];  }  }  } }) Copy the code

Watch – the listener

define

When data changes, a function is executed.

Main usage

Use a

template

<div>
  <button @click=" n += 1 ">n+1</button>
  <button @click=" obj.a + 'hi' ">obj.a + 'hi'</button>
  <button @click=" obj.a = {a:'a'} ">Obj. a = New object</button>
</div>
 Copy the code

data

const vm = new Vue({
  data(){
    return {
      n: 0.      obj: {a:'a'}
 }  },  watch: { n(){ console.log('n changed')}  },  obj: { handler(value, oldValue){ console.log('the obj has changed')}, deep: true // If you want Vue to think that an object has changed, use deep: true; otherwise, use deep: false  },  "obj.a"{  handler(value, oldValue){ console.log('obj. A changed')}, immediate: true // This property specifies that the callback will be called immediately after the listening starts  } }) Copy the code

Note: You cannot use this in watch.

Use two

vm.$watch('xxx', fn, {deep: true.immediate: true})
Copy the code

The computed and watch

The same

Both execute a function when the data changes.

The difference between

  • Watch has immediate, which indicates whether to execute this function on the first render. The other is deep, which means that when we listen to an object, we want to listen for changes in the object.

  • Computed is used to calculate a value and is invoked without parentheses and automatically cached based on dependencies.

conclusion

  • Computed is used to calculate complex data.
  • Watch is mainly used to monitor data and perform some operations on the data.
  • When a requirement is encountered that can be implemented using computed and watch, computed is preferred.

This article was typeset using MDNICE