vue中watch和computed的区别

watch和computed都是监听数据，都是当依赖的数据发生改变时，被依赖的数据就自动发生改变。

他们之间的区别就是：
1.computed是监听多个数据改变一个数据，一般用于计算一些比较复杂的场景，比如购物车计算价格，就是多对一
watch是监听一个数据从而改变多个数据，通过观察一个数据的变化去改变其他数据，比如搜索框提示列表，就是一对多
2.computed用于计算，watch用于观察
3.computed一定要有return
4.computed具有缓存性，当依赖的数据没有发生变化，就会从缓存中取出数据，所以computed的性能比watch要好一点
5.计算属性不能在data中声明
6.watch中可以进行异步或者开销较大的操作

下面举一个非常简单的例子来说明他们的基本使用方法

computed:

name是由 firstName+secondName 计算出来的
当我改变firstName时，name会自动计算出新的值
改变secondName时，同理，name会自动计算

代码如下：

<template>
  <div>
    <div>
      <p>我的名字叫<b>{{name}}</b></p>
      <div class="btn" @click="changeFirstName">改firstName(张->王)</div>
      <div class="btn" @click="changeSecondName">改SecondName(三四->五六)</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "张 ",
      secondName: "三四"
    };
  },
  computed: {
    name() {
      return this.firstName + this.secondName;
    }
  },
  methods: {
    changeFirstName() {
      this.firstName = '王 '  //通过改变firstName改变name
    },
    changeSecondName(){
      this.secondName = '五六'   //通过改变secondName改变name
    }
  }
};
</script>

watch:

当输入值ipt发生变化时，会通过监听这个数据，来改变其他的各个数据

<template>
  <div>
    <div>
      <input type="text" v-model="ipt">
      <p>姓名<b>{{name}}</b></p>
      <p>性别<b>{{gender}}</b></p>
      <p>年龄<b>{{age}}</b></p>
      <p>身高<b>{{height}}</b></p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name:'小明',
      gender:'男',
      age:'26',
      height:'180',
      ipt:'小明'
    };
  },
  watch:{
    // 通过输入框文字的变化，来改变下面的数据
    ipt(val){
      if(val == '小红'){
        this.name = '小红'
        this.gender = '女'
        this.age = 18
        this.height = 160
      }else{
        this.name = '无'
        this.gender = '无'
        this.age = '无'
        this.height = '无'
      }
    }
  },
  methods: {
  }
};
</script>