解决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的源码有了比较深刻的认识,对于此类问题也会迎刃而解,因此在开发的业余时间还是要保持学习源码,学习设计思路的习惯。

目录
相关文章
|
3月前
|
缓存 编解码 JavaScript
DOM 和 BOM 在项目中应用时的性能优化方法
【10月更文挑战第19天】总之,优化 DOM 和 BOM 的性能需要综合考虑多个方面,通过合理的设计和技术手段,提升项目的运行效率和用户体验。在实际开发中,要不断地进行性能优化实践,以适应不断变化的需求和技术发展。
|
3月前
|
JavaScript 安全 物联网
DOM 和 BOM 在项目中的应用
【10月更文挑战第19天】在现代网页开发和应用项目中,DOM(文档对象模型)和 BOM(浏览器对象模型)扮演着至关重要的角色。它们为开发者提供了与网页文档和浏览器环境进行交互的能力,使项目能够实现丰富的功能和用户体验。
|
3月前
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
428 1
|
4月前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
122 0
react字符串转为dom标签,类似于Vue中的v-html
|
5月前
|
移动开发 JavaScript 前端开发
【Vue面试题二十二】、什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路
这篇文章深入探讨了虚拟DOM的概念、必要性以及在Vue中的实现方式,解释了虚拟DOM如何作为真实DOM的轻量级抽象,通过优化DOM操作提高性能,并实现跨平台渲染的能力。
【Vue面试题二十二】、什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路
|
3月前
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
68 0
|
7月前
|
JavaScript 前端开发
Vue的`v-if`和`v-show`用于条件渲染,`v-if`按需编译/销毁DOM,适合不频繁切换且节省初始化资源
【6月更文挑战第25天】Vue的`v-if`和`v-show`用于条件渲染,`v-if`按需编译/销毁DOM,适合不频繁切换且节省初始化资源;`v-show`则始终编译,仅通过CSS切换显示,适合频繁切换,初始渲染成本高但切换性能好。选择取决于元素显示状态的变化频率和初始渲染需求。
87 2
|
6月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$("p")`、`$("#myDiv")`、`$(".myClass")`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
43 0
|
6月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
52 0
|
7月前
|
JavaScript 前端开发 API
jQuery对象与DOM对象简介及相互转换
jQuery对象与DOM对象简介及相互转换