v-for元素綁定事件代理

題目：

vue 在 v-for 時給每項元素綁定事件需要用事件代理嗎？為什么？

解析：

事件代理作用主要是 2 個

1. 將事件處理程序代理到父節點，減少內存占用率
2. 動態生成子節點時能自動綁定事件處理程序到父節點

這里我生成了十萬個 span 節點，通過 performance monitor 來監控內存占用率和事件監聽器的數量，對比以下 3 種情況

 

1、不使用事件代理，每個 span 節點綁定一個 click 事件，並指向同一個事件處理程序

 <div>
      <span 
        v-for="(item,index) of 100000" 
        :key="index" 
        @click="handleClick">
        {{item}}
      </span>
 </div>

 

2、不使用事件代理，每個 span 節點綁定一個 click 事件，並指向不同的事件處理程序

  <div>
      <span 
        v-for="(item,index) of 100000" 
        :key="index" 
        @click="function () {}">
        {{item}}
      </span>
  </div>

 

3、使用事件代理

<div  @click="handleClick">
      <span 
        v-for="(item,index) of 100000"  
        :key="index">
        {{item}}
      </span>
 </div>

可以看到使用事件代理無論是監聽器數量和內存占用率都比前兩者要少

同時對比 3 個圖中監聽器的數量以及我以往閱讀 vue 源碼的過程中，並沒有發現 vue 會自動做事件代理，
但是一般給 v-for 綁定事件時，都會讓節點指向同一個事件處理程序（第二種情況可以運行，但是 eslint 會警告），

一定程度上比每生成一個節點都綁定一個不同的事件處理程序性能好，但是監聽器的數量仍不會變，所以使用事件代理會更好一點。