页面大量输入框性能优化

遇到一个性能问题是这样的：

我有一个表格，表格里面的每一个格子都可以编辑，开始我没多想直接就撸，反正就是一个输入框。

然后我本地开发时问题不大，因为行列都是动态的，本地数据也不多，电脑性能也还行

哐哐上线后，客户炸了，怎么我进入这个页面还好好的，点编辑之后要七八秒才反应过来

然后表格数据量大概是60多行20多列，也就是当前页面存在1200个输入框左右

开始也是一脸懵逼，然后再本地再调试相同数据量的输入框，大概渲染时间也要3-4秒，完犊子

原因：不同的dom渲染消耗的内存是不一样的，很明显一个input标签就要比一个span标签消耗多得多

然后我就写了这个组件： 做一个假的输入框，实际它只是一个span，只是看起来像一个输入框，当我点击它的时候，它变成一个输入框并且聚焦在当前这个输入框上，也就是用户感知是一个输入框，实际它偷偷切换了，并且在失焦的时候再把它变成span

size和elementUi的是一样的，样式也是抄elementUi的 上组件代码

<template>
  <div class="jm-fakeInput">
    <span v-if="!showInput" @click="spanclick" class="fakeInput" :class="{'mini':size==='mini','small':size==='small'}">{{value}}</span>
    <input v-else ref="myinput" @blur="inputBlur" :value="value" @input="$emit('input', $event.target.value)" class="fakeInput" :class="{'mini':size==='mini','small':size==='small'}"/>
  </div>
</template>
<script>
export default {
  name: 'fakeInput',
  props: ['value', 'size'],
  data () {
    return {
      showInput: false
    }
  },
  methods: {
    spanclick (event) {
      this.showInput = true
      this.$nextTick(() => {
        this.$refs['myinput'].focus()
      })
    },
    inputBlur () {
      this.showInput = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .jm-fakeInput{
    .fakeInput{
      width: 100%;
      background-color: #FFF;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
    }
    .mini{
      height: 28px!important;
      line-height: 28px!important;
    }
    .small{
      height: 32px!important;
      line-height: 32px!important;
    }
  }
</style>

然后开始只是用在一个地方，后面用的地方多了 算了就直接弄成插件来用吧

文件目录：

index.js:

import fakeInput from './fakeInput.vue'
fakeInput.install = function (Vue) {
  Vue.component(fakeInput.name, fakeInput)
}

export default fakeInput

在main.js里面引入插件：

// 引入假的输入框
import fakeInput from './components/fakeInput/index'
Vue.use(fakeInput)

这样就可以直接在页面像用elementUi的一样使用啦

<fakeInput v-model="value" size="mini"/>