Vue3 碰撞检测：如何判断两个 div 元素是否发生碰撞

在 Vue3 中，可以使用getBoundingClientRect()方法来获取元素的位置和大小信息。然后，通过比较两个元素的位置信息，可以判断它们是否发生了碰撞。

首先，给需要检测碰撞的两个div元素分别添加一个ref属性。

<div ref='div1'></div>
<div ref='div2'></div>

然后，在 Vue 组件的mounted或者updated生命周期钩子函数中，获取这两个div元素的位置信息，并进行碰撞检测。

mounted() {
  this.checkCollision();
},

updated() {
  this.checkCollision();
},

methods: {
  checkCollision() {
    const div1Rect = this.$refs.div1.getBoundingClientRect();
    const div2Rect = this.$refs.div2.getBoundingClientRect();

    // 检测碰撞
    if (
      div1Rect.right >= div2Rect.left &&
      div1Rect.left <= div2Rect.right &&
      div1Rect.bottom >= div2Rect.top &&
      div1Rect.top <= div2Rect.bottom
    ) {
      console.log('发生碰撞');
    } else {
      console.log('未发生碰撞');
    }
  }
}

在checkCollision方法中，通过比较两个div元素的left、right、top和bottom属性，来判断它们是否有重叠部分。如果有重叠部分，则说明发生了碰撞。

需要注意的是，getBoundingClientRect()方法返回的位置信息是相对于viewport的，如果需要相对于其他元素进行比较，可以通过减去参考元素的位置信息来计算相对位置。