你值得拥有的一些Vue技巧

1. 动态组件 结合 v-for

import baseA from '@/components/base/baseA'
import baseB from "@/components/base/baseB";
import baseC from "@/components/base/baseC";
import baseD from "@/components/base/baseD";

export default{
      components:{ baseA, baseB, baseC, baseD }
}

在页面里 componentList:['ColorIn','LineIn','Header','Footer'] 使用下面的代码即可将代码依次循环

<component v-for="(item,index) in componentList" :key="index" :is="item" />

编译结果如下

<baseA> </baseA>
<baseB> </baseB>
<baseC> </baseC>
<baseD> </baseD>

2. $on('hook:生命周期') 来简化 window 监听

我们通常会这么用

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);
  })
}

如上, 较之前打方法而言, 这个写法的好处在于可以开启一个事件监听器的同时，就在beforeDestroy生命周期中挂载一个删除事件监听器的事件。比上面的写法会更加安全，更加有助于避免内存泄露并防止事件冲突。

3. 子组件@hook:生命周期监听子组件的生命周期回调

举个栗子

<child @hook:mounted="listenChildMounted" />

4. Object.freeze()

Vue是使用 Object.defineProperty 对数据进行双向绑定，而对于只做展示使用的长列表，可以使用 Object.freeze() 进行冻结，使它无法被修改，从而提高性能.

$post('xxx').then(res=>{
    this.list=Object.freeze(res.data.result);
})

注意: 改变 list 的值不会更新，但改变引用会触发更新

5. v-for绑定key不建议使用index

有的时候v-for列表可能存有删除，交换位置等操作，这种时候index的顺序变换会导致同一条数据，在此刻的index置换，所以，不建议v-for的key绑定index, 建议使用另外的并且值唯一的变量

6. v-for不建议配合v-if

v-for 的优先级比 v-if 高，也就是说，假设总计 100 条数据，即使经过 v-if 以后，只剩下50 条显示，但是 v-for 早就循环了一遍 100 条数据，解决办法就是用一个计算属性先将数据过滤了以后，v-for 循环过滤了之后的数据