vue 使用中的小技巧 （一）

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

data 和 Object.freeze

每一个Vue实例都会代理其data对象里全部的属性，这些被代理的数据是响应式的，在其数据改变时视图也会随之更新。
在每一个vue组件中都有一个data对象，不要把全部数据都放在data中。只把须要作响应式的数据放在data对象中；缘由是：若是一个数据存在于data中，数据会被劫持，vue会给数据添加一个getter（获取数据），一个setter（设置数据），性能不会高。
能够把一些不须要响应的数据直接放到实例上，而不是在data里

data(){
    // 不须要作响应的数据
    this.list=[...]

    return {
        list2:[...]
    }
}

Object.freeze() 方法能够冻结一个对象。一个被冻结的对象不再能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象

对于一些不须要响应列表数据，也能够用 Object.freeze() 处理

data(){
   return { 
        list: []
   }
},
created () {
    let listData = Object.freeze([
            { value: 1 },
            { value: 2 }
        ])
    // 冻结 listData 
    this.list = listData;

    // 界面不会有响应
    this.list[0].value = 100;

    // 下面两种作法，界面都会响应，只是冻结 listData 没有冻结 this.list
    this.list = [
        { value: 100 },
        { value: 200 }
    ];
    this.list = Object.freeze([
        { value: 100 },
        { value: 200 }
    ]);
}

优雅处理事件监听和移除

有时候咱们会遇到这样的场景,须要本身去监听一些事件什么的，可能会像下面这个写，可是有时候可能由于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)

父组件能够监听那个事件并根据须要更新一个本地的数据

使用 .sync 简写

属性事件传递

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

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

Watch的初始当即执行

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

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

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

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