Vue监听一个数组id是否与另一个数组id相同的方法

要监听一个数组中对象的属性，需要用到 Vue 中提供的 $watch 或 $watchCollection 方法。具体实现步骤如下：

1. 在数据中定义两个数组，分别为 idArray 和 targetArray，如下代码所示：

data() {
  return {
    idArray: [1, 2, 3],
    targetArray: [{id: 1, name: 'Tom'}, {id: 2, name: 'Jerry'}, {id: 4, name: 'Peter'}],
  }
}

其中，idArray 是需要监听的数组，targetArray 是需要比较的数组。

1. 在 created 生命钩子函数中使用 $watch 或 $watchCollection 监听 idArray 数组，当它发生变化时进行对比操作。$watchCollection 在这里用来监听一个数组数据来源的变化，所以当数组内某一对象属性值发生改变时，还需要使用 $watchCollection 来对对象进行监听。

created() {
  this.$watchCollection('targetArray', (newVal, oldVal) => {
    console.log('targetArray has changed')
    this.compareId(newVal, oldVal) // 比较targetArray与idArray中的id是否相同
  })

  this.$watch('idArray', (newVal, oldVal) => {
    console.log('idArray has changed')
    this.compareId(this.targetArray, []) // 将oldVal置为空数组，表示不需要比较旧值
  })
},

1. 编写 compareId 函数，实现对比操作。遍历 targetArray 中的对象，判断其中的 id 是否在 idArray 中出现过。

compareId(newVal, oldVal) {
  console.log('compareId function')
  for (let item of newVal) {
    if (this.idArray.includes(item.id)) {
      console.log(`${item.id} exist in idArray`)
      // do something
    } else {
      console.log(`${item.id} does not exist in idArray`)
    }
  }
}

完整代码如下：

<template>
  <div>
    <p>idArray: {{idArray}}</p>
    <p>targetArray: {{targetArray}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      idArray: [1, 2, 3],
      targetArray: [{id: 1, name: 'Tom'}, {id: 2, name: 'Jerry'}, {id: 4, name: 'Peter'}],
    }
  },
  created() {
    this.$watchCollection('targetArray', (newVal, oldVal) => {
      console.log('targetArray has changed')
      this.compareId(newVal, oldVal) // 比较targetArray与idArray中的id是否相同
    })

    this.$watch('idArray', (newVal, oldVal) => {
      console.log('idArray has changed')
      this.compareId(this.targetArray, []) // 将oldVal置为空数组，表示不需要比较旧值
    })
  },
  methods: {
    compareId(newVal, oldVal) {
      console.log('compareId function')
      for (let item of newVal) {
        if (this.idArray.includes(item.id)) {
          console.log(`${item.id} exist in idArray`)
          // do something
        } else {
          console.log(`${item.id} does not exist in idArray`)
        }
      }
    }
  }
}
</script>

示例1：当idArray数组中的id发生变化时，控制台输出如下内容：

idArray has changed
compareId function
1 exist in idArray
2 exist in idArray
3 does not exist in idArray

示例2：当targetArray数组中的一个对象的id发生变化时，控制台输出如下内容：

targetArray has changed
compareId function
1 exist in idArray
2 exist in idArray
4 does not exist in idArray