preface

In our templates, we have always bound only simple property keys. In fact, vue.js provides full JavaScript expression support for all data binding, but putting too much logic into a template can overload the template, especially if this code occurs more than once. So when you encounter complex logic, you can choose to use computed properties

I’m going to use a simple addition example here to look at the effects of calculating properties and other methods.

1. Calculate attributes

Evaluate properties – When the value of a dependent property changes, the value of the property is automatically updated, as is the associated PART of the DOM

    <div class="">computed:</div>
    <input type="text" v-model="num1" >
    <input type="text" v-model="num2" >
    <input type="text" :value="addnum" >
Copy the code
    computed:{
        addnum: {//getter
            get:function(){
            return parseInt(this.num1)+parseInt(this.num2)
            }
            //setter
            set:function(){
                / /...}}},Copy the code

In the default getter, addnum executes when num1, the value of num2 that the property depends on, changes, otherwise it uses the result of the previous calculation. In the calculated property, you can also provide setters, if needed, that execute methods when the calculated property changes.

2.methods

And of course we can do it in a very simple way

    <div class="">methods:</div>
    <input type="text" v-model="num5" >
    <input type="text" v-model="num6" >
    <input type="text" :value="add()" >
Copy the code
methods:{
    add(){
      return parseInt(this.num5)+parseInt(this.num6)
    }
  }
Copy the code

3.watched

In addition to the above two methods, you can also use $watch provided by VUE to listen for changes in data

<div class="">watch:</div>
    <input type="text" v-model="num3" >
    <input type="text" v-model="num4" >
    <input type="text" :value="addnum2" >
Copy the code
watch:{
    num3:function(newvalue){
      this.num3 = newvalue;
      this.later_add();  // To a method that can be executed asynchronously
    },
    num4:function(newvalue){
      this.num4 = newvalue;
      this.later_add(); }},methods:{
    later_add(){
      setTimeout((a)= > {
        this.addnum2 = parseInt(this.num3) + parseInt(this.num4)
      }, 2000); }}Copy the code

Comparison and summary

1. Calculated attributes and methods

In contrast to methods, computed properties are based on their dependency cache and only trigger recalculation when the values of their dependencies change, unlike normal method functions, which are re-executed every time they are re-rendered.

2. Calculate attributes and WATCHED

watch:{
    num3:function(newvalue){
      this.num3 = newvalue;
      this.later_add();  // To a method that can be executed asynchronously
    },
    num4:function(newvalue){
      this.num4 = newvalue;
      this.later_add(); }}, methods:{later_add(){setTimeout()(a)= > {
        this.addnum2 = parseInt(this.num3) + parseInt(this.num4)
      }, 2000); }}Copy the code

Code here feels like repetitive, each value to write a similar code, but you carefully found, here still can call other functions, under this operation, we can realize the asynchronous operation, for example, the important data request operation (of course I’m here just a simple delay the execution, but the same), this is to calculate attribute cannot do.