Vue中使用document操作DOM报错但jQuery可正常使用的原因咨询

嘿，我来帮你捋明白这个事儿哈！

首先得纠正你一个小误解：Vue本质上是浏览器端的前端框架，它大部分时候都是运行在浏览器环境里的，只有当你用到服务端渲染（SSR，比如Nuxt.js的服务端渲染阶段）或者在Node环境下直接执行Vue代码时，才会处于没有document这类浏览器专属对象的环境中。

那为什么直接用document会报错呢？很简单——Node环境里根本就没有document、window这些浏览器特有的全局对象，你直接调用document自然会抛出ReferenceError: document is not defined的错误。

那jQuery为啥不会报错？这就得说jQuery源码的兼容设计了：它在加载的时候会先检查当前环境是否存在浏览器的DOM对象（比如document）。如果是在Node环境下加载jQuery，它不会初始化任何DOM相关的逻辑，只是以一个空壳的形式存在，不会立刻抛出错误。而当你的代码最终运行到浏览器端（比如SSR完成后客户端接管页面），或者你是在Vue的mounted这类客户端生命周期钩子（此时已经处于浏览器环境，DOM也已挂载）里使用jQuery，它就能正常访问document并操作DOM了。

另外补充一种可能的场景：如果你是在Vue的created钩子（此时组件还没挂载到DOM树上）里用document.querySelector找元素，可能会拿到null，但这不是document不存在的错误，而是目标元素还没被渲染出来。不过你说的是直接报错，所以更大概率是服务端渲染场景下的问题。

备注：内容来源于stack exchange，提问作者Acaibird