解决Vue项目中使用原生/jquery插件无法获取DOM的问题

简介: 解决Vue项目中使用原生/jquery插件无法获取DOM的问题记录。

您好,如果喜欢我的文章,可以关注我的公众号「量子前端」,将不定期关注推送前端好文~

问题场景

Vue项目中有需求,是使用jquery的滚动插件,插件本质是在window.onload中获取滚动DOM并且对他进行一些操作。

发现问题

脚本中的DOM获取到的结果为null,因此脚本也没有生效,如图:
在这里插入图片描述
在这里插入图片描述
项目目录是这样的:
在这里插入图片描述
我原来的理解:脚本在app容器下面,脚本执行中会获取到DOM,但是仔细思考Vue的渲染原理,其实Vue在生成虚拟DOM之后是进行真实DOM的异步渲染,为了性能角度,并且在修改完状态后也是异步的方式进行渲染,想要在Vue中获取DOM可以使用nextTick。
而这些插件其实都是同步代码,在Vue的源码初始化结束后,就已经开始进行脚本了,此时的应用事件队列应该是这样的:
异步队列:Vue根据虚拟DOM生成真实DOM,可以获取到某些已经挂载好的DOM;
同步队列:我们正在逐个执行的js脚本。

因此会出现在脚本中无法获取DOM的情况。

解决方案

了解了原理后,解决方案其实就有了思路,既然脚本中的获取DOM是同步获取,那不妨将它变成异步获取DOM,进行一个监听,如果没有DOM,在下一次监听时再次尝试获取,获取到了以后进行实际的插件业务,插件中修改后的代码如下:
在这里插入图片描述

总结

其实项目耦合度往往很高,在一些特定情况下会提供给开发者了解项目技术栈的一些设计原理(源码),如果博主对于Vue的源码有了比较深刻的认识,对于此类问题也会迎刃而解,因此在开发的业余时间还是要保持学习源码,学习设计思路的习惯。

目录
相关文章
|
7月前
|
JavaScript 算法
Vue 中如何手动更新虚拟 DOM?
Vue 中如何手动更新虚拟 DOM?
358 57
|
7月前
|
JavaScript 前端开发
百叶窗效果的jQuery幻灯片插件
百叶窗效果的jQuery幻灯片插件
|
7月前
|
JavaScript
jquery无限循环内容滑块插件
jquery无限循环内容滑块插件
|
7月前
|
JavaScript
简单轻量级的jquery图表插件
简单轻量级的jquery图表插件
|
7月前
|
JavaScript
jQuery响应式内容选项卡插件
jQuery响应式内容选项卡插件
|
7月前
|
JavaScript 前端开发
带完成百分比的jQuery表单插件
带完成百分比的jQuery表单插件
|
7月前
|
JavaScript 内存技术
支持多种动画特效的响应式jQuery幻灯片插件
支持多种动画特效的响应式jQuery幻灯片插件
|
29天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
183 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
629 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能