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)

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

<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
  }
}
赞 (0)

相关推荐