三分钟学会computed计算属性和watch监听属性

OMO

计算属性computed

<template>
<div id="app">
 
    <div> {{ aaa }} </div>        <!-- 3 -->
 
</div>
</template>
 
 
       new Vue({
		  el: '#app',
		  data: {
			a:1,
			b:2,
		  },
		  computed: {
            // 注册一个函数aaa,计算下a+b等于多少
			aaa: function () {
			  return this.a + this.b
			}
		  },
		})

computed     计算属性是基于他们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。  // 官网原话，

简单来说，就是a 和 b，只有data中的 a和b发生了变化，他的响应式依赖发生了变化， aaa函数才会再次执行。如果数据a  b没有发生改变，多次访问aaa 会立即返回之前的计算结果，而不需要在执行一次函数。

aaa是计算属性，计算属性调用的时候可以不用带括号  {{ aaa }}

 监听属性watch

<template>
<div id="app">
 
    <div> {{ aa }} </div>      
 
</div>
</template>
 
 
       new Vue({
		  el: '#app',
		  data: {
        // 只要aa改变了，就会触发对应的函数
			aa:1,
			b:2,
		  },
		  watch: {
// 要监听的数据名 ： 你的函数
              aa: function (oldData,newData) {
                 console.log('aa改变了，你可以在这里做你想做的事')
		      }
                //俩参数， oldData是改变前的数据，newData是改变后的数据
		  },
		})

watch 是监听器，一般用来监听数据的变化，并做一一些你想做的事情。

以你要监听的属性为键，后面注册一个函数，也可以直接写一个函数名。

// 带俩参数， oldData是改变前的数据，newData是改变后的数据

应用场景

computed 

当多个属性影响一个属性的时候，可以用computed，

假设你的双11购物车，有一个总价，里有三个商品，每个商品十块，一共30，其中一个涨了一块钱，总价被其中一个商品单价影响，变成了31，又一个商品也涨了一块，总价又变成了32，总价收到了多个商品的影响

 watch

当一个属性影响多个属性的时候，可以用watch

假如你逛淘宝有一张优惠卷，商品1是10元，商品2是100元，优惠卷是九折，此时商品1是9元，商品2为90元，当优惠卷变成五折，商品1变成5元，商品2变成50元，

这就是一个属性影响了多个属性。