Vue 项目中如何优雅的使用弹出提示库

弹出提示框组件（比如element-ui的popover）在大数据循环中使用会存在性能问题，页面的操作会出现卡顿，一般在大数据循环的场景下，就不建议使用复杂的组件。这种情况下如何优雅的使用弹出提示呢？

首先要放弃在循环中使用弹出提示组件，可以改为鼠标移到循环的元素上，再调用第三方库或者自己写一个全局的提示库来做提示，这样在循环初始化时就不会消耗大量性能。

<div v-for="item in list" @mouseover="showTip">
</div>

在循环中使用组件的好处是可以绑定当前循环的数据项，弹出提示的内容和操作可以非常方便的拿到绑定数据。使用第三方弹出提示库，弹出的内容如果是html，比如要使用Vue组件，由于第三方库弹出的节点是自己创建的，已经脱离了当前Vue组件环境，因此我们需要把弹出的html变为一个Vue的挂载点。

比如我们使用第三方提示库 tippy。

import Vue from 'vue'
import tippy from 'tippy.js'
import 'tippy.js/themes/light.css'
import TipContent from './TipContent.vue'

export default {
  methods:{
      showTip(e) {
            const constructor = Vue.extend(TipContent)
            const instance = new constructor({
                el: document.createElement('div'),
                data: {
                    info: this.info
                }
            })
            const tip = tippy(e.target, {
                interactive: true,
                appendTo: document.body,
                maxWidth: 'none',
                delay: [400, 0],
                theme: 'light',
                content: instance.$el
            })
        }
  }
}

1. TipContent是弹出提示的Vue组件，这里面和项目的其他组件一样，可以使用element-ui的组件库，也可以使用公共库等；
2. 通过Vue.extend的方式将组件变成一个Vue“类”，接着创建一个挂载点，通过这种方式就可以将当前组件的数据传入到提示的组件中；
3. 将挂载元素传入第三库，这样就可以显示出弹出框了。