十一、性能优化（事件委托、路由赖加载、根组件App发一次请求）

事件委托

事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件（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>

 

路由赖加载

当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
结合Vue的异步组件和Webpack的代码分割功能，轻松实现路由组件的懒加载。

 

vuex的派发可以放在根组件App中

根组件app无论如何跳转路由只执行一次请求，一次请求的数据全部组件使用