在vue框架开发中computed和watch都是用于监听数据变化的属性，但它们在实际使用中却有着不同。

本篇文章就来介绍在vue框架中关于computed和watch差异。

一、computed计算属性

    1.1、如果函数所依赖的属性没有发生变化，从缓存中读取

    1.2、必须有return返回

<template>
  <div>
     <h1>{{reserve}}</h1>
     <button @click="add">改变</button>
  </div>
</template>
<script>
export default {
  data(){
     return {
        title:'测试',
        num:1
     }
  },
  methods: {
     add(){
         this.num++
     }
  },
  computed:{
     reserve(){
         return this.title+this.num
     }
  }
}
</script>

二、watch监听器

    2.1、watch的函数名必须和data中的数据名一致

    2.2、watch中的函数有俩个参数，新旧

    2.3、watch中的函数是不需要调用的

    2.4、可以监听的数据来源：data，props，computed内的数据；

    2.5、watch支持异步；

    2.6、不支持缓存，监听的数据改变，直接会触发相应的操作

<template>
  <div>
    <el-input v-model="title"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title:'',
    };
  },
  watch:{
    // title值变化即触发
    title(newval,oldVal){
      console.log(this.title,newval,oldVal);
    }
  },
};
</script>

三、computed和watch区别

    3.1、computed是计算属性，watch是监听一个值的变化而执行对应的回调

    3.2、computed必须有return返回；watch可以没有

    3.3、computed当一个属性受多个属性影响的时候；watch当一条数据影响多条数据的时候