js事件委托

1. 事件冒泡
元素嵌套，当元素触发事件时，他会向上一级一级的向上传递，直到到最外层window

2. 事件委托
把一个元素的事件委托给别的元素（所有外层元素都可以监听他这个事件的触发）

原理：利用事件冒泡来处理委托事件

3. 事件委托的优缺点
减少事件的绑定 节省内存

减少工作量

4. vite快的地方
webpack 会吧所有的代码都编译成我们的 es5，或者es6 每次编译都比较耗时
vite 是有所选择的编译 improt export 

代码如下：

<div @click="carChange">
 
  <van-card
    v-for="item in 9"
    :key="item"
    num="3"
    price="2.00"
    desc="描述信息"
    title="商品标题"
    thumb="https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  >
    <template #tags>
      <van-tag plain type="danger">规格1</van-tag>
      <van-tag plain type="danger">规格二</van-tag>
    </template>
    <template #footer>
      <van-button class="detail" data-type="detail" :data-id="item" size="mini">详情</van-button>
      <van-button class="car" data-type="addCar" :data-id="item" size="mini">加购</van-button>
    </template>
  </van-card>
</div>
 
 
 
 
<script setup>
const carChange = e => {
  const target = e.target
  const type = target.getAttribute('data-type')
  const id = target.getAttribute('data-id')
  if(type) {
    change[type](id)
  }
}
const change = {
  detail(id) {
    console.log('detail',id)
  },
  addCar(id) {
    console.log('addCar',id)
  }
}
</script>