工作中常用的Vue知识点(一)

避免click事件的多次点击

有两种方式：①通过自定义指令；②通过mixin混入preventReClick方法;

①自定义指令：
// 新建preventReClick.js文件
import Vue from 'vue'
const preventReClick = Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000) // 传入绑定值就使用，默认3000毫秒内不可重复触发
      }
    })
  }
})
export { preventReClick }

// main.js文件下引用
import preventReClick from '@/.../preventReClick.js'

// 使用方式
<button v-preventReClick="1000">点击延迟1秒</button>
// 或
<button v-preventReClick>点击延迟3秒</button>

// 是不是很简单，但是有个问题，这种方式只适用于按钮标签元素

②mixin混入preventReClick方法：

// 新建mixin.js文件
const mixin = {
 // provide这种也可以，适用于全局引入，组件就直接使用：inject: ['preventReClick'],
  // provide() {
    // return {
      // preventReClick: this.preventReClick,
    // };
  // },
  data() {
    return {
      isClick: true,
    };
  },
  methods: {
    preventReClick(fn) { // 避免多次点击
      if (!this.isClick) return;
      this.isClick = false;
      fn();
      setTimeout(() => {
        this.isClick = true;
      }, 1000);
    },
  },
};
export default mixin;

// 使用方式
import mixin from './mixin'; // 引入路径
export default {
    mixins: [mixin],
}

// 原本写法：
<button @click="()=>{console.log('点击')}" >点击延迟</button>
// 更改后写法：
<button @click="preventReClick(()=>{console.log('点击')})" >点击延迟</button>

$on('hook:')监听移除事件

$on('hook:')方法，你可以仅使用一种生命周期方法（而不是两种）来定义/删除事件。

原本写法：
mounted () {
    window.addEventListener('resize', this.resizeHandler);
},
beforeDestroy () {
    window.removeEventListener('resize', this.resizeHandler);
}
 
优化写法：
mounted () {
  window.addEventListener('resize', this.resizeHandler);
  this.$on("hook:beforeDestroy", () => {
    window.removeEventListener('resize', this.resizeHandler);
  })
}

使用immediate:true，在初始化时触发watcher

如果你需要 wather 在实例初始化后立即运行，那么你所要做的就是将 wather 转换为具有 handler(newVal, oldVal) 函数以及即时 immediate: true 的对象。

watch: {
    title: {
      immediate: true,
      handler(newTitle, oldTitle) {
        console.log("Title changed from " + oldTitle + " to " + newTitle)
      }
    }
}

动态指令参数

假设你有一个按钮组件，并且在某些情况下想监听单击事件，而在其他情况下想监听双击事件。这就是这些指令派上用场的地方：

<template>
    ...
    <aButton @[someEvent]="handleSomeEvent()" />...
</template>
<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? "click" : "dbclick"
    }
  },
  methods: {
    handleSomeEvent(){
      // handle some event
    }
  }  
</script>

重用相同路由的组件

Vue出于性能原因，默认情况下共享组件将不会重新渲染，如果你尝试在使用相同组件的路由之间进行切换，则不会发生任何变化。

const routes = [
  {
    path: "/a",
    component: MyComponent
  },
  {
    path: "/b",
    component: MyComponent
  },
];

如果仍然希望重新渲染这些组件，则可以通过在 router-view 组件中提供 :key 属性来实现。

<template>
    <router-view :key="$route.path"></router-view>
</template>