能否在Vue组件中使用GlideJS？附运行异常代码求助

可行性说明 #

Vue完全支持集成glidejs这类第三方DOM交互库，你当前代码运行失败是初始化时机错误和DOM选择逻辑不合理导致的，按如下方式修改即可正常运行。

原有代码问题梳理 #

• 实例化Glide的代码写在了script顶层，执行时组件还未完成挂载，页面上不存在.glide对应的DOM节点，初始化直接失效
• 直接使用类选择器.glide匹配元素，页面存在多个轮播组件时会出现选择冲突，无法正确对应当前组件内的轮播元素
• 未配置实例销毁逻辑，组件卸载时会残留无用的事件监听，造成内存泄漏

修正后完整代码 #

<template>
    <div>
        <!-- 给轮播元素添加ref，用于精准获取当前组件内的DOM节点 -->
        <div ref="glide" class="glide">
            <div class="glide__track" data-glide-el="track">
                <ul class="glide__slides">
                    <li class="glide__slide">0</li>
                    <li class="glide__slide">1</li>
                    <li class="glide__slide">2</li>
                </ul>
            </div>
            <div class="glide__arrows" data-glide-el="controls">
                <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
                <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
            </div>
        </div>
    </div>
</template>

<script>
import Glide from '@glidejs/glide'
export default {
    name: 'Carousel',
    data() {
        return {
            // 存储Glide实例，方便后续调用方法和销毁
            glideInstance: null
        }
    },
    // 组件挂载完成后，DOM已经渲染完成，此时再初始化轮播
    mounted() {
        this.glideInstance = new Glide(this.$refs.glide).mount()
    },
    // 组件卸载前销毁轮播实例，清除绑定的事件监听
    beforeUnmount() {
        if (this.glideInstance) {
            this.glideInstance.destroy()
        }
    }
}
</script>

<style scoped>
    /* 如果样式导入后不生效，可以将该行导入放到项目全局样式文件中 */
    @import '../assets/styles/glide/glide.core.min.css';
</style>

额外注意事项 #

• 如果你使用的是Vue2版本，将beforeUnmount生命周期钩子替换为beforeDestroy即可
• 如果需要自定义轮播配置，可以在实例化Glide时传入第二个参数，比如new Glide(this.$refs.glide, { autoplay: 3000 })来开启自动播放

内容的提问来源于stack exchange，提问作者Filipe