watch、computed使用方法及区别

1.watch 侦听器（监听器）

基本使用：监听data中的数据变化时使用, 需要在数据变化的时执行异步或开销较大的操作时，这个方法最有用
1)普通监听
① 函数

<template>
  <div class="home">
      <h1>watch侦听器</h1>
      <input type="text" v-model="msg" />
  </div>
</template>

<script>
export default{
  data(){
    return {
      msg:'',
    }
  },
  watch:{
    msg(newVal,oldVal){
      console.log(newVal,oldVal)
    },
  }
}

</script>

②对象

<template>
  <div class="home">
      <h1>watch侦听器</h1>
      <input type="text" v-model="msg" />
  </div>
</template>

<script>
export default{
  data(){
    return {
      msg:'',
    }
  },
  watch:{
    msg:{
      handler(n,o){
        console.log(n,o)
      }
    }
  }
}
</script>

2)深度监听：监听对象或者数组内内部的值
① 对象的深度监听

<template>
  <div class="home">
      <h1>watch侦听器</h1>
      <input type="text" v-model="obj.msg">
      <input type="text" v-model="obj.con">
  </div>
</template>

<script>
export default{
  data(){
    return {
      obj:{
        msg:'',
        con:''
      }
    }
  },
  watch:{
    obj:{
      handler(n,o){
        console.log(n,o)
      },
      deep:true
    }
  }
}
</script>

②数组的深度监听

<template>
  <div class="home">
    <h1>watch侦听器</h1>
    <input type="text" v-model="arr[0]" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [0, 12],
    };
  },
  watch: {
    arr: {
      handler(n, o) {
        console.log(n, o);
      },
      deep: true,
    },
  },
};
</script>

2.computed 计算属性
基本使用：不需在data中定义,就能返回所需的值,并且能进行大量的计算

<template>
  <div class="home">
    <h1>computed计算属性</h1>
    <p>商品数量:{{num}}<button @click="add">+</button></p>
    <p>商品价格:{{price}}</p>
    <p>商品总价:{{allPrice}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num:1,
      price:22
    };
  },
  methods:{
    add(){
      this.num++
    }
  },
  computed:{
    allPrice(){
      return this.num*this.price
    }
  }
};
</script>

3.区别
共同点：都是以vue的依赖追踪机制为基础的,都是希望在依赖数据发生变化的时候,被依赖的数据根据预先定义好的函数,发生‘ 自动 ’的变化。
不同点：
① watch擅长处理的场景: 一个数据影响多个数据; conputed擅长处理的场景: 一个数据受多个数据影响。当需要数据在变化时执行异步或开销较大的操作时，通过watch侦听器最有效。
② 当模板中使用了复杂的逻辑表达式时，应当使用计算属性。
③ 当需要在数据变化时执行异步或者开销较大的操作时,可以使用watch
④ watch可以进行异步操作，computed不可以，computed不修改原始数据，通过return返回处理的数据，可以包含大量的逻辑运算