了解vue计算属性和methods、watched

前言

在咱们的模板中，咱们一直都只绑定简单的属性键值。但实际上，对于全部的数据绑定， Vue.js 都提供了彻底的 JavaScript表达式支持，可是若是在模板中放入过多的逻辑会让模板太重，尤为当这种代码不止一次出现的时候。因此当遇到复杂的逻辑时，你能够选择使用计算属性

这里我用一个简单的相加的例子，先来看一下计算属性和其余方式下实现的效果。

1.计算属性

计算属性——当其依赖属性的值发生变化时，这个属性的值会自动更新，与其相关的DOM部分也会同步自动更新

<div class="">computed:</div>
    <input type="text" v-model="num1" >
    <input type="text" v-model="num2" >
    <input type="text" :value="addnum" >
复制代码

computed:{
        addnum:{
        //getter
            get:function(){
            return parseInt(this.num1)+parseInt(this.num2)
            }
            //setter
            set:function(){
                //......
            }
        }
      },
复制代码

其中addnum是计算属性，在默认的getter里，当计算属性里依赖的num1,num2的值变化后，addnum就会执行，不然他就使用上一次的计算结果，计算属性里，若是有须要，还能够提供setter，这里当计算属性改变时，会执行相应的方法。

2.methods

固然咱们也能够用一个简单的方法来计算

<div class="">methods:</div>
    <input type="text" v-model="num5" >
    <input type="text" v-model="num6" >
    <input type="text" :value="add()" >
复制代码

methods:{
    add(){
      return parseInt(this.num5)+parseInt(this.num6)
    }
  }
复制代码

3.watched

除了上面两种外，还可使用vue提供的$watch，监听data里面数据的变化

<div class="">watch:</div>
    <input type="text" v-model="num3" >
    <input type="text" v-model="num4" >
    <input type="text" :value="addnum2" >
复制代码

watch:{
    num3:function(newvalue){
      this.num3 = newvalue;
      this.later_add();  //交给一个方法，能够异步执行
    },
    num4:function(newvalue){
      this.num4 = newvalue;
      this.later_add();
    }
  },
methods:{
    later_add(){
      setTimeout(() => {
        this.addnum2 = parseInt(this.num3) + parseInt(this.num4)
      }, 2000);
    }
  }
复制代码

比较、总结

1.计算属性与methods

相比于方法，计算属性基于它的依赖缓存，只有当其依赖的值发生变化的时候，才会触发从新计算，而不像普通的方法函数，每当从新渲染的时后，都会从新执行一遍。

2.计算属性和watched

watch:{
    num3:function(newvalue){
      this.num3 = newvalue;
      this.later_add();  //交给一个方法，能够异步执行
    },
    num4:function(newvalue){
      this.num4 = newvalue;
      this.later_add();
    }
}，
methods:{
    later_add(){
      setTimeout(() => {
        this.addnum2 = parseInt(this.num3) + parseInt(this.num4)
      }, 2000);
    }
  }
复制代码

这里的代码感受像是重复的，每一个值都要写一份这样相似的代码，可是你仔细发现，这里还可调用别的函数，在这个操做下，咱们就能够实现异步操做（固然我这里只是一个简单的延迟执行，可是殊途同归嘛），这是计算属性没法作到的。