web vue项目优化

vue click事件全局防抖

const on = Vue.prototype.$on;
Vue.prototype.$on = function(event, func) {
let timer,
    newFunc = func,
    switchon = true;
if (event === "click") {
    newFunc = function() {
        if (switchon) {
            func.apply(this, arguments);
            switchon = false;
        }
        clearTimeout(timer);
        timer = setTimeout(function() {
            switchon = true;
        }, 800);
    };
}
on.call(this, event, newFunc);
};

vue中的事件委托

 <!--   html  -->
  <ul  @click.stop ="handleClick($event)" v-if="array && array.length">
              <li :data-val='el.id v-for="el in array"'>{{el.name}}</li>
  </ul>

   // methods

  handleClick (data, e) {
    if (e.target.nodeName.toLowerCase() === 'li') {
      if (e.target.dataset && e.target.dataset.hasOwnProperty('val')) {
       this.getdatafn( e.target.dataset.val)
      }
    }
  },

视图通过route.meta..KeepAlive判断是否缓存组件

 <keep-alive v-if="$route.meta.KeepAlive">
        <router-view></router-view>
      </keep-alive>
      <router-view v-else></router-view>