vue 2.0 + element Ui 2.0版本 时 循

vue 2.0 + element Ui 2.0版本 时 循环使用 el-popover 时 数据量大时 页面渲染卡顿问题

优化思路就是将el-popover提出来，不参与循环，让el-popover只渲染一次，这样在首屏渲染时，速度就会大大提升。这样就有两个问题需要解决:

1、如何将popover slot中的reference与for循环中的button关联起来，用来确定popover的出现位置。
2、如何触发popover显示与关闭

el-popover有几种激活方式，分click与v-model等。

1、click模式下，需要将button作为reference slot，只有点击reference才会显示popover，点击非popover区域会自动关闭popover，但是我们需要将popover提出来，而reference在v-for中渲染，自然不可能使用slot。
2、使用v-model时可以很方便控制显示与关闭但是点击非popover区域无法自动关闭。

<template id="test">
    <div>
        <div v-for='item in 100'>
            <el-button @click='clickPop(item)' :ref='`bt`+item'>click 激活</el-button>
        </div>
        <el-popover
                v-if='showPop'
                ref='pop'
                :reference='reference'
                placement="bottom"
                title="标题"
                width="200"
                trigger="click"
        >
            <el-button @click='$refs.pop.doClose()'>自定义关闭按钮</el-button>
        </el-popover>
    </div>
</template>
<script>
 data() {
            return {
                reference:{},
                // 控制渲染条件 如果不用v-if会报错 具体可自行尝试
                showPop: false,
                // 保存当前激活的refrence id
                activeId:'',
            };
        },
methods:{
            clickPop(item){
                // 这个操作是为了避免与源码中的点击reference doToggle方法冲突
                if (this.activeId === item && this.showPop) return
                this.showPop = false
                this.activeId = item
                // 因为reference是需要获取dom的引用 所以需要是$el
                this.reference = this.$refs['bt'+item][0].$el
                this.$nextTick(() => {
                    // 等待显示的popover销毁后再 重新渲染新的popover
                    this.showPop = true
                    this.$nextTick(() => {
                        // 此时才能获取refs引用
                        this.$refs.pop.doShow()
                    })
                })
            }
        }
</script>

抄袭 https://blog.csdn.net/weixin_45753473/article/details/119893112 这个大哥 （里边有详细分析可参考）