vue：watch如何监听多个变量

watch监听方法每次只能监听一个变量，单纯的使用watch是无法监听多个变量的，但是我们通过computed计算属性返回一个对象，然后使用watch监听这个计算属性的方法，只要值改变就会触发watch。

<template>
  <div class="demo">
    <a-button
      type="primary"
      @click="
        () => {
          this.isLace = !this.isLace
        }
      "
    >
      {{ isOnchange }}
    </a-button>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data() {
    return {
      isLace: false,
      loading: false,
    }
  },

  computed: {
    isOnchange({ isLace, loading }) {
      //等同于 const { isLace , loading }=this
      return { isLace, loading }
    },
  },

  watch: {
    //只要有一个值改变都会触发监听
    isOnchange: function (o, n) {
      // o改变后的值
      // �n改变前的值
      console.log(o, n)
    },
  },
}
</script>

总结：watch监听多个变量也就是利用计算属性computed把多个变量通过对象的形式返回，然后watch去监听computed计算属性，只要值改变了就先触发computed属性计算，在触发watch监听