wach、computed、filter的区别及使用场景

• 监听属性：watch
  具体用法如下所示：

<template>
  <div id="different_type">
    <el-button type="primary" size="small">城市名称</el-button>
    <el-input type="text" v-model="cityName" style="width:200px;margin-left:20px"></el-input><br>
    <el-input type="text" v-model="student.name" style="width:200px;margin-left:20px"></el-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cityName:'linFen',
      student:{
        name:'仙女',
        age:18
      }
    }
  },
  watch:{
    //1.简单监听
    cityName(newName,oldName){
      console.log(newName,oldName)  //linFenl,linfen
    },
    //2.发生变化时，调用监听处理函数
    cityName: 'nameChange',
    //3.immediate和handler     immediate：立即监听，当值第一次绑定时，就会执行handler函数
    cityName:{
      handler(newName,oldName){
        console.log(newName,oldName)
      },
      immediate:true
    },
    //4.监听对象，当要监听对象内部属性的变化时，需要深度监听，deep:true
    student:{
      handler(newName){
        console.log(newName.name)
      },
      deep:true,
      immediate:true
    },
    //5.可将4.优化成如下形式，即直接监听对象的某个属性
    'student.name':{
      handler(newName){
        console.log(newName)
      },
      // deep:true,
      immediate:true
    }
  },
  methods: {
    nameChange(){
      alert(1)
    }
  },
}
</script>

• 计算属性：computed
  具体用法如下所示：

<template>
  <div id="different_type">
    <div>{{message.split('').reverse().join("")}}</div>
    <div v-for="(item,index) in result" :key="index">
      <div>
          <p>{{item.total}}</p>
      </div>
    </div>
    总数：{{resultTotalR}}
  </div>
</template>
<script>
export default {
  data() {
    return {
      message:'helloWord',
      result:[{
        name:"张三",
        total:2
      },{
        name:"李四",
        total:3
      },{
        name:"王五",
        total:5
      }]
    }
  },
  computed:{
    resultTotalR(){
      let resultTotal=0
      this.result.forEach((item,index)=>{
        resultTotal+=item.total
      })
      return resultTotal
    }
  },
  methods: {
   
  },
}
</script>

计算结果：

• filter
  具体用法如下所示：

使用场景举例：
后台返回的数据是数字，我们需要根据数字显示相对应的文字
<template>
  <div id="different_type">
    <p>
      <span :class="orderItem.status | getOrderStatus | getOrderStatusClass">{{ orderItem.status | getOrderStatus }}</span>
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderItem:{
        id: 2,
        order_num: '123456789',
        status: 1 // 1 待付款 2 待发货 3 待收货
      }
    }
  },
 
  filters:{
    getOrderStatus(status) {
      switch (status.toString()) {
        case '1':
            return '待付款';
        case '2':
            return '待发货';
        case '3':
            return '待收货';
        default:
            return '';
      }
    },
    getOrderStatusClass(status) {
      if (status == '待付款') {
        console.log(status,"hhh")
          return 'not-pay'
      }else if(status == '待发货'){
          return 'not-send'
      }
      return ''
    }
  },
  methods: {
    
  },
}
</script>
<style lang="scss" scoped>
#different_type {
  width: 100%;
  .not-pay {
    color: red;
  }
  .not-send{
    color: blue;
  }
}
</style>

效果图：

三者的区别：
computed:

	支持缓存，只有依赖数据发生改变，才会重新进行计算
	不支持异步，当computed内有异步操作时无效，无法监听数据的变化

watch:

	不支持缓存，数据变化，直接会触发相应的操作
	支持异步操作

filter:

它可以当做函数使用,通过一些处理返回一些新的东西
eg:当后台返回的数据是数字，我们需要根据数字显示相对应的文字时使用，