vue学习笔记——组件的优化

Vue 应用性能优化指南

1 给组件定义name，然后在同级目录新建index文件：

import Count from './count.vue'
export Count;

2 优化大数据的列表

import VirtualList from 'vue-virtual-scroll-list'

<template>
  <div class="box">
    <Select v-model="selectData" style="width:200px">
      <virtual-list :size="30" :remain="6">
        <Option v-for="item in list" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </virtual-list>
    </Select>
  </div>
</template>

size表示每一行的高度 remain表示预渲染几个

3 使用es6语法 :key="checked${item.value}"

4 组件出现消失 先消失再出现的效果：