在vue的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧

优雅处理事件监听和移除#  

有时候我们会遇到这样的场景,需要自己去监听一些事件什么的，可能会像下面这个写，但是有时候可能因为mounted和destroyed不再一个位置啥的，导致忘记清除对事件监听。可以利用 hook 去监听钩子事件将它们写在一起  

mounted() {
    window.addEventListener('resize', this.func)
},
destroyed() {
    window.removeEventListener('resize', this.func)
},
methods:{
    func(){

    }
}

更改后

mounted() {
    window.addEventListener('resize', this.func)
    this.$once("hook:beforeDestroy", ()=> {
        window.removeEventListener('resize', this.func)
    });
},
methods:{
    func(){

    }
}

.sync 修饰符#

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。 不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 show prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

this.$emit('update:show', newShow)

父组件可以监听那个事件并根据需要更新一个本地的数据

<dialog  v-bind:title="show"  v-on:update:show="show = $event"></dialog>

使用 .sync 简写

<dialog :title.sync="doc.title"></dialog>

属性事件传递#

有时候需要对一些组件进行更高层次封装，例如有一个普通表格组件，需要实现能有行内编辑等一些功能时候，就需要对表格进行二次封装。像表格组件属性较多时，需要一个个去传递，非常不友好并且费时

<template>
  <BaseTable v-bind="$props" v-on="$listeners"> <!-- ... --> </BaseTable>
</template>

<script>
  import BaseTable from "./BaseTable";

  export default {
    components: {
      BaseTable
    }
  };
</script>

可以看到传递属性和事件的方便性，而不用一个个去传递,还有$attrs（props、class、style 除外的其他 attribute ）可以使用

Watch的初始立即执行#

当 watch 一个变量的时候，初始化时并不会执行，如下面的例子，你需要在created的时候手动调用一次。

created() {
  this.search();
},
watch: {
  searchText(){
    this.search()
  },
}

上面这样的做法可以使用，但很麻烦，我们可以添加immediate属性，这样初始化的时候就会自动触发(不用再写created去调用了)，然后上面的代码就能简化为

watch: {
  searchText: {
    handler(){
        this.search()
    },
    immediate: true
  }
}