解决Uncaught ReferenceError: Vue is not defined！掌握DOM加载顺序与JS、CSS、HTML执行顺序

错误剖析：Vue is not defined

在使用 Vue.js 时，如果你遇到“Uncaught ReferenceError: Vue is not defined”错误，这意味着 Vue.js 库未正确加载到页面中。解决此问题的关键在于理解 DOM 文档的加载顺序以及 JavaScript、CSS 和 HTML 的执行顺序。

DOM 文档加载顺序

• 加载 HTML ：浏览器首先加载 HTML 文档，该文档包含页面结构信息（文本、图像、链接）。
• 加载 CSS ：接下来，加载 CSS 文件，其中包含页面的样式信息（字体、颜色、布局）。
• 加载 JS ：最后，加载 JavaScript 文件，其中包含页面逻辑（事件处理、数据操作）。

JS、CSS、HTML 的执行顺序

• 解析 HTML ：加载完成后，浏览器解析 HTML 文档并生成 DOM 树，表示页面的结构。
• 应用 CSS ：DOM 树完成后，浏览器应用 CSS 样式，根据 CSS 规则定义元素的样式。
• 执行 JS ：最后，浏览器执行 JavaScript 文件中的代码，为页面添加动态交互和逻辑。

Vue.js 加载方法

要避免“Vue is not defined”错误，需要确保 Vue.js 库在页面加载时正确加载。有几种方法可以实现：

• <script> 标签 ：在 HTML 文档中添加 <script> 标签，指定 Vue.js 库的路径。
• CDN ：使用 CDN（内容分发网络）加载 Vue.js 库。
• 包管理器 ：使用 npm 等包管理器安装 Vue.js 库。

$(function(){}) 和 $(document).ready(function(){}) 的区别

这两个 jQuery 函数都用于在 DOM 加载完成后执行代码，但它们之间略有不同：

• $(function(){})：在 DOM 树解析完成后执行代码。
• $(document).ready(function(){})：在 DOM 树解析且所有资源（如图像、CSS）加载完成后执行代码。

在大多数情况下，这两个函数都可以用于在 DOM 加载完成后执行代码。但如果需要确保所有资源都已加载后再执行代码，则应使用 $(document).ready(function(){})。

结论

理解 DOM 加载顺序和 JS、CSS、HTML 的执行顺序对于避免 “Uncaught ReferenceError: Vue is not defined” 至关重要。通过正确加载 Vue.js 库，我们可以确保在页面加载时可以使用 Vue.js，从而实现动态和交互式的 Web 应用程序。

常见问题解答

1. 为什么会出现 “Vue is not defined” 错误？

当 Vue.js 库未正确加载到页面中时，就会出现此错误。

2. 如何加载 Vue.js 库？

可以使用<script>标签、CDN 或包管理器加载 Vue.js 库。

3. $(function(){}) 和 $(document).ready(function(){}) 有什么区别？

$(document).ready(function(){}) 在加载所有资源后执行代码，而 $(function(){}) 在 DOM 树解析完成后执行代码。

4. 如何确保所有资源都已加载再执行代码？

使用 $(document).ready(function(){}) 函数。

5. 如何使用 CDN 加载 Vue.js 库？

在 HTML 文档中添加以下 <script> 标签：

<script src="https://unpkg.com/vue@3"></script>