vue中computed和watch搭配使用，监听props传递的两个或多个值的变化

vue中computed和watch搭配使用，同时监听两个或多个值的变化

<template>
  <van-popup
    :value="show"
    :style="{ height: '7rem' }"
    @click-overlay="handleCancel"
    class="smart-room-popup"
    position="bottom"
    round
  >
    <header class="header mt20">
      <div class="h-left" @click="handleCancel">取消</div>
      <div class="h-center">请选择房间号</div>
      <div class="h-right" @click="initRoom" v-if="!initRoomBtn">获取可查房</div>
      <div class="h-right" v-else></div>
    </header>

    <main class="mt30">
      <div class="get-room" @click="initRoom" v-if="initRoomBtn">
        <van-button
          :plain="isPass"
          color="#4646E6"
        ><span style="font-size:0.38rem">+</span> 获取可查房</van-button>
      </div>
      <div class="rooms-list-wrapper" v-if="checkingRoomsData.length > 0 && !initRoomBtn">
        <ul class="rooms-list">
          <li class="room-item" v-for="(item, idx) in checkingRoomsData" :key="idx" @click="selectedRoom(idx, item, lockRoom)" :class="{'active': selectedRoomItem.roomNo == item.roomNo || rooms[0] == item.roomNo }">
            <div class="roomNoName ellipse">{{ item.roomNo }}</div>
            <div class="roomNoType ellipse">{{ item.roomTypeName }}</div>
            <div class="checked-flag" v-if="item.checkFlag == 1">本期已查</div>
          </li>
        </ul>
      </div>

      <div class="rooms-list-wrapper" v-if="checkingRoomsData.length == 0 && !initRoomBtn">
        <div class="empty-data">
          <img src="@/assets/img/no_data@2x.png" />
          <span class="tip-msg">暂无相关数据</span>
        </div>
      </div>
      <div class="start-check">
        <van-button
          :disabled="disabled"
          color="#4646E6"
          @click="startCheck"
        >开始检查</van-button>
      </div>
    </main>
  </van-popup>
</template>

<script>
import { getPmsCheckingRoomInfo, lockPMSRoom, finishPMSRoom } from '@/api/myTaskStore'
export default {
  name: 'smart-room-popup',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    rooms: {
      type: Array,
      default() {
        return []
      }
    },
    hotelId: {
      type: String,
      default: ''
    },
    taskType:{
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      roomNos: [],
      disabled: true,
      isPass: true,
      initRoomBtn: true,
      checkingRoomsData: [],
      active: null,
      selectedRoomItem: {},
      lockRoom: false
    }
  },
  computed: {
    userAccountId() {
      return this.$store.getters.userAccountID
    },
    roomsOrTaskType(){
      if(this.rooms && this.rooms.length && this.taskType == 7){
        return true
      } else {
        return false
      }
    }
  },
  watch:{
    // rooms(newVal){
    //   this.roomNos = newVal.map(roomNo => ({ val: roomNo }))
    //   if(this.roomNos.length){
    //     this.initRoom()
    //     this.disabled = true
    //     this.lockRoom = true
    //   }
    // },
    roomsOrTaskType(newVal){
      // console.log(newVal);
      if(newVal){
        this.roomNos = this.rooms.map(roomNo => ({ val: roomNo }))
        if(this.roomNos.length){
          this.disabled = true
          this.lockRoom = true
          this.initRoom()
        }
      }
    }
  },
  created() {
    // this.roomNos = this.rooms.concat(new Array(5 - this.rooms.length).fill('')).map(roomNo => ({ val: roomNo }))
  },
  methods: {
    // 智慧客房的门店自查，查询房间号
    async initRoom(){
      try {
        let parms = {
          chainCode: this.hotelId
        }
        $loading.show()
        let res = await getPmsCheckingRoomInfo(parms)
        $loading.hide()
        if(res.code === 0){
          this.$toast('获取房间号成功')
          this.checkingRoomsData = (res.item && res.item.checkingData) || []
          this.initRoomBtn = false
        } else {
          this.$toast(res.message)
          this.initRoomBtn = true
        }
      } catch (error) {
        $loading.hide()
        this.initRoom = false
        console.log(error);
        this.$toast('接口异常，请重试')
      }
    },
    selectedRoom(val, item, flag){
      if(!flag){
        this.active = val
        this.disabled = false
        this.selectedRoomItem = item
      }
    },
    // // 解锁房间
    // async finishPMSRoom(){
    //   try {
    //   } catch (error) {
    //     console.log(error);
    //   }
    // },
    // 开始检查
    async startCheck(){
      if(!this.disabled){
        $loading.show()
        try {
          let data = {
            chainCode: this.hotelId,
            roomNo: this.selectedRoomItem.roomNo,
            userAccountId: this.userAccountId,
          }
          // 锁房间
          let res = await lockPMSRoom(data)
          $loading.hide()
          if(res.code == 0){
            this.$emit('handleConfirm', [this.selectedRoomItem.roomNo])
            this.disabled = true
            this.lockRoom = true
            // 关闭弹框
            this.handleCancel()
          } else {
            this.$toast(res.message)
          }
        } catch (error) {
          $loading.hide()
          console.log(error);
          this.$toast('接口异常，请重试')
        }
      } else {

      }
    },
    handleCancel() {
      this.$emit('update:show', false)
    },
}
</script>

具体使用如上代码，通过props获取到父组件传递的值，然后在通过计算属性computed转换一下，这时候用watch监听computed的那个值就可以！自行尝试下吧。