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