vue中computed与watch

        在vue项目中，computed与watch是经常用到的两个属性，一般在面试中也会被提及，本文章主要是总结的一些自己的理解，如有错误请大家指出，附上vue官网说明：vue官方文档

一、自己理解

        1.计算属性

                计算属性依赖于一个旧值返回一个新值，当旧值改变时会触发新值改变。计算属性具有缓存的概念，对于其需要计算的值会缓存起来，当其余值改变时，会从缓存中判断计算值是否改变，没改变则不执行计算属性。

        2.监听器

                会监听一个值，当这个值改变时，会触发相应的方法或者逻辑。

        3.计算属性与监听器

                计算属性只会根据旧值返回一个新值，监听器会监听某个值的变化，当这个值发生改变时，会执行这个方法，可以进行异步操作。

        4.应用场景（便于大家理解）

                需求：根据用户输入的金额进行优惠金额的显示，比如打6.4折，可以通过计算属性进行解决。

                需求：当用户输入金额小于1000时，显示可以凑齐减免的商品，可以通过数据监听，触发异步请求，获取数据。

二、计算属性的使用

<template>
  <div>
    <button @click="changCount">{{data}}</button>
    <div>{{count}}</div>
</div>
</template>

<script>
export default {
  data(){
    return{
      data : 1
    }
  },
  computed:{
    count(){
      return this.data+1
    }
  },
  methods:{
    changCount(){
      this.data++
    }
  }
}
</script>

<style>

</style>

三、监听器的使用

//HTML
<div>
    <button @click="changCount">{{count}}</button>
</div>
//JS
export default {
  data(){
    return{
      data : 1
    }
  },
  computed:{
    count(){
      return this.data+1
    }
  },
  watch:{
    count(){
      this.tanchuang()
    }
  },
  methods:{
    changCount(){
      this.data++
    },
    tanchuang(){
      alert(777)
    }
  }
}