Vue开发高级小技巧

1.事件绑定和解绑

通常，我们会在mounted中给dom绑定事件，然后在beforeDestroy中解绑。不过，有的时候，绑定和解绑写在两个不同的函数里面会觉得有些麻烦，也不利于维护。其实，可以通过$once+hook将事件绑定和解绑写在一起。

原写法：

  public mounted() {
    this.targetRef.addEventListener("click", this.add, false);
  }
  public beforeDestroy() {
    this.targetRef.removeEventListener("click", this.add);
  }

新写法 

  public mounted() {
    this.initEvent();
  }
  private initEvent() {
    this.targetRef.addEventListener("click", this.add, false);
    this.$once("hook:beforeDestroy", () => {
      this.targetRef.removeEventListener("click", this.add);
    });
  }

这样，同一个功能就内聚了。

类似的，清除定时器也可以这么写。

2.父组件传递事件监听和属性

在开发中，曾有一些这样的需求。我们要对某个组件做一个包装，比如给按钮包装一个指令，在不需要修改逻辑的情况下快速实现一些额外的功能。

那么，原组