vue计算属性与侦听器

vue的computed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步.

这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分.

computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的场景.

watch监听数据,有关联但是没有依赖,只要某个数据发生变化,就可以处理一些数据或者派发事件并同步/异步执行.

计算属性

计算属性表现为同步处理数据.

金融领域的分期付款,P2P年化收益,带有计算性质的,都可以优先考虑computed,不需要关注点击事件或者其他数据,只要将计算规则写在属性里,就能实时获取对应的数据.

电商领域的购物车统计,一个数据依赖于一个或者多个数据,当购物车数量和产品变化时,自动计算出价格*数量的总和,如果有优惠券或者折扣,自动减去优惠和计算折扣金额即可,同上实时计算,只要购买数量,购买价格,优惠券,折扣券等任意一个发生变化,总价都会自动跟踪变化.

侦听器

主要适用于与事件和交互有关的场景,数据变化为条件,适用于一个数据同时触发多个事物.

如当借款额度大于可借额度时,弹出toast提示,并将当前借款额度调整到最大额度,可以看到,数据的变化为触发弹框提示,有且仅在一定金额条件下才触发,而不是实时触发.

实例

computer
一个姓输入框,一个名输入框,实时展示全名.

<div id="name">  {{fullName}}  </div>
​
<script>
    export default {  
        name: 'test',  
        data() {
		  return {
		    firstName: 'da',  
            lastName: 'shixiong', 
		  };
		},  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
	        full:{
			    get(){
			        return this.firstName + '-' + this.lateName
			    },
			    set(value){
			        const nameArr = value.split('-')
			        this.firstName = nameArr[0]
			        this.lateName = nameArr[1]
			    }
		    }
	    }
    }
</script>

watch
一个金额输入框,监听金额数值大小,达到条件时给出温馨提示

<div id="Amount">  
    <input v-model="Amount" /> 
</div>
​
<script>
    export default {  
        name: 'test',  
        data() {
		  return { 
            Amount: 100, 
            num: 20, 
            obj:{
		      a:1
		    },
		  }
        },  
        watch: {  
            Amount: function (newVal,oldVal) {  
                if(newVal>5000) {
                    alert("最大额度可借5000元")
                    this.Amount=5000
                }
            },
            num: {
              handler(newval,oldval){
                 console.log(newval,oldval)
              },
              immediate: true   //页面首次加载会立即执行
            }，
		    obj:{
		      handler(newName,oldName){
		          //执行代码
		      },
		      deep:true //为true，表示深度监听，这时候就能监测到a值变化
		    },
		    //优化deep
		    'obj.a':{
		      handler(newName,oldName){
		          //执行代码
		      },
		      deep:true //为true，表示深度监听，这时候就能监测到a值变化
		    }
        }  
    }
</script>