十一、效能優化（事件委託、根元件App發一次請求）
阿新 • • 發佈：2022-04-13
一、事件委託
事件委託也叫事件代理，“事件代理”即是把原本需要繫結在子元素的響應事件（click、keydown…）委託給父元素， 讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。 事件委託的好處： 1.減少事件數量，提高效能 2.預測未來元素，新新增的元素仍然可以觸發該事件 3.避免記憶體外洩，在低版本的IE中，防止刪除元素而沒有移除事件而造成的記憶體溢位<template> <div id="root" @click="eventDelegation($event)"> <div v-for="(item, i) in arr" :key="i"> <div class="test" :id="i">點我是{{ i }}</div> </div> </div> </template> <script> export default { name: "student", data() { return { arr: [0, 1, 2, 3, 4, 5], }; }, methods: { eventDelegation(event) { console.log((event.target.style = "color:red")); }, }, }; </script> <style> #root { width: 100%; } .test { border: 1px solid red; cursor: pointer; } </style>
二、vuex的派發可以放在根元件App中（根元件app無論如何跳轉路由只執行一次請求，一次請求的資料全部元件用）