Vue 中watch监听对象，对象中有多个属性同时改变时，会多次触发执行函数

现象

<script>
  export default {
    data() {
      return {
        obj: {
          A: 'aaa',
          B: 'bbb',
          C: 'ccc',
        },
      }
    },
    watch: {
      // 同时改变obj中 A,B 会触发两次console.log()
      // deep=false 后 改变A值 不会触发console.log()
      obj: {
        handler() {
          console.log('1222')
        },
        deep: true,
      },
    },
  }
</script>

解决方法

<script>
  export default {
    data() {
      return {
        obj: {
          A: 'aaa',
          B: 'bbb',
          C: 'ccc',
        },
      }
    },
    computed: {
      str() {
        const str1 = ''
        Object.keys(obj).forEach((item) => {
          str1 += str1 + item
        })
        return str1
      },
    },
    watch: {
      str: {
        handler() {
          console.log('1222')
        },
      },
    },
  }
</script>

有更好的方法，欢迎留言！