VUE2生命周期页面加载顺序

已于 2025-03-01 00:05:25 修改
阅读量540 收藏 5
点赞数 5
文章标签： vue
于 2025-02-28 23:16:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Climbman/article/details/145940097
版权

使用 Vue CLI 4.5 运行 vue create myvue 创建项目，并通过 npm run serve 运行后，会生成一个标准的 Vue 项目目录结构。以下是生成目录的详细说明，以及运行 localhost:8080 后 Vue 页面的加载顺序。

1. 生成目录结构

运行 vue create myvue 后，生成的项目目录结构如下：

myvue/
├── node_modules/          # 项目依赖包
├── public/                # 静态资源目录（不会被Webpack处理）
│   ├── index.html         # 项目入口HTML文件
│   └── favicon.ico        # 网站图标
├── src/                   # 项目源码目录
│   ├── assets/            # 静态资源（图片、字体等，会被Webpack处理）
│   ├── components/        # Vue组件
│   ├── App.vue            # 根组件
│   ├── main.js            # 项目入口文件
│   └── router/            # Vue Router 路由配置（如果选择了路由）
│   └── store/             # Vuex 状态管理（如果选择了Vuex）
├── .gitignore             # Git忽略文件配置
├── babel.config.js        # Babel 配置文件
├── package.json           # 项目依赖和脚本配置
├── package-lock.json      # 依赖版本锁定文件
├── README.md              # 项目说明文件
└── vue.config.js          # Vue CLI 配置文件（可选）

2. 运行 npm run serve 后访问 localhost:8080

运行 npm run serve 后，Vue CLI 会启动一个开发服务器，默认地址为 http://localhost:8080。访问该地址时，Vue 页面的加载顺序如下：

3. Vue 页面加载顺序

以下是访问 localhost:8080 后，Vue 页面的加载顺序：

（1）加载 public/index.html
  • 浏览器首先加载 public/index.html 文件。
  • 该文件是 Vue 应用的入口 HTML 文件，包含一个 <div id="app"></div> 容器，用于挂载 Vue 应用。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MyVue</title>
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
</head>
<body>
  <div id="app"></div>
  <!-- 构建后的脚本会被自动注入到这里 -->
</body>
</html>
（2）加载并执行 src/main.js
  • main.js 是 Vue 应用的入口 JavaScript 文件。
  • 它初始化 Vue 实例，并将根组件 App.vue 挂载到 index.html 中的 <div id="app"></div>。
import Vue from 'vue'
import App from './App.vue'
import router from './router' // 如果选择了路由
import store from './store'   // 如果选择了Vuex

Vue.config.productionTip = false

new Vue({
  router, // 如果选择了路由
  store,  // 如果选择了Vuex
  render: h => h(App)
}).$mount('#app')
（3）加载并渲染 src/App.vue
  • App.vue 是 Vue 应用的根组件。
  • 它通常包含一个 <router-view>，用于渲染路由匹配的组件。
<template>
  <div id="app">
    <router-view></router-view> <!-- 路由匹配的组件会渲染到这里 -->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 全局样式 */
</style>
（4）加载并渲染路由组件
  • 如果项目中配置了 Vue Router，则会根据路由配置加载对应的组件。
  • 默认情况下，Vue CLI 会生成一个 src/views/Home.vue 作为首页组件。
// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue') // 懒加载
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router
  • 访问 localhost:8080/ 时，Home.vue 组件会被渲染到 <router-view> 中。
（5）组件生命周期钩子执行
  • 在组件加载和渲染过程中，Vue 的生命周期钩子会按顺序执行：
    1. beforeCreate：组件实例初始化之前。
    2. created：组件实例创建完成，数据已初始化。
    3. beforeMount：组件挂载到 DOM 之前。
    4. mounted：组件挂载到 DOM 之后，此时可以访问 DOM 元素。

4. 总结

访问 localhost:8080 后，Vue 页面的加载顺序如下：

  1. 加载 public/index.html。
  2. 加载并执行 src/main.js，初始化 Vue 实例。
  3. 加载并渲染根组件 src/App.vue。
  4. 根据路由配置加载并渲染对应的路由组件（如 src/views/Home.vue）。
  5. 执行组件的生命周期钩子（beforeCreate -> created -> beforeMount -> mounted）。

5. 注意事项

  • 如果使用了 异步组件 或 懒加载，相关组件会在需要时动态加载。
  • 如果使用了 Vuex，状态管理会在 main.js 中初始化，并在组件中通过 this.$store 访问。
  • 开发模式下，Vue CLI 会启用热重载（Hot Module Replacement，HMR），修改代码后页面会自动更新。

通过以上步骤，Vue 应用完成了从入口文件到组件渲染的完整加载过程。

是的，Vue 项目可以进行单步调试。Vue 是基于 JavaScript 的框架，因此可以使用浏览器的开发者工具或 IDE 的调试功能来实现单步调试。以下是几种常见的调试方法：

VUE调试

1. 使用浏览器开发者工具调试

现代浏览器（如 Chrome、Firefox、Edge）都提供了强大的开发者工具，支持单步调试 JavaScript 代码。

步骤：

  1. 打开开发者工具：

    • 在浏览器中按 F12 或 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（Mac）。
    • 切换到 Sources 面板。

  2. 找到 Vue 组件代码：

    • 在 Sources 面板中，找到 webpack:// 目录，这里会显示 Vue 项目的源码。
    • 如果是 Vue CLI 创建的项目，源码会被映射到 src/ 目录下。

  3. 设置断点：

    • 在代码的行号上点击，设置断点。
    • 刷新页面或触发相应操作，代码执行到断点时会暂停。

  4. 单步调试：

    • 使用调试工具栏中的按钮进行单步调试：
      • Step Over (F10)：逐行执行代码。
      • Step Into (F11)：进入函数内部。
      • Step Out (Shift + F11)：跳出当前函数。
      • Resume (F8)：继续执行到下一个断点。

  5. 检查变量和调用栈：

    • 在右侧的 Scope 面板中查看当前作用域的变量。
    • 在 Call Stack 面板中查看函数调用栈。

2. 使用 VS Code 调试 Vue 项目

VS Code 是一款强大的代码编辑器，支持直接调试 Vue 项目。

步骤：

  1. 安装 Debugger for Chrome 插件：

    • 在 VS Code 的扩展商店中搜索并安装 Debugger for Chrome。

  2. 配置调试文件：

    • 在项目根目录下创建 .vscode/launch.json 文件，并添加以下配置：
      {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug Vue App",
      "url": "http://localhost:8080", // 确保与开发服务器地址一致
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

  3. 启动调试：

    • 在 VS Code 中按 F5 启动调试。
    • 浏览器会自动打开，并连接到 VS Code 的调试器。

  4. 设置断点：

    • 在 VS Code 中打开 Vue 组件文件（如 src/App.vue），在代码行号左侧点击设置断点。

  5. 单步调试：

    • 使用 VS Code 的调试工具栏进行单步调试：
      • Step Over (F10)：逐行执行代码。
      • Step Into (F11)：进入函数内部。
      • Step Out (Shift + F11)：跳出当前函数。
      • Continue (F5)：继续执行到下一个断点。

3. 使用 Vue Devtools 调试

Vue Devtools 是 Vue 官方提供的浏览器扩展，专门用于调试 Vue 应用。

步骤：

  1. 安装 Vue Devtools：

    • 在 Chrome 或 Firefox 的扩展商店中搜索 Vue Devtools 并安装。

  2. 打开 Vue Devtools：

    • 在浏览器中按 F12 打开开发者工具，切换到 Vue 选项卡。

  3. 检查组件状态：

    • 在 Vue Devtools 中，可以查看组件的层次结构、props、data、computed 属性等。
    • 支持实时修改组件的状态并查看效果。

  4. 事件调试：

    • 在 Events 面板中，可以查看组件触发的事件及其参数。

4. 调试技巧

  • 调试异步代码：
    • 在 async/await 或 Promise 代码中设置断点，可以观察异步操作的执行顺序。
  • 调试生命周期钩子：
    • 在 created、mounted 等生命周期钩子中设置断点，观察组件的初始化过程。
  • 调试 Vuex：
    • 在 Vuex 的 mutations 或 actions 中设置断点，观察状态的变化。

5. 注意事项

  • Source Map：
    • 确保 Vue 项目的 Source Map 已启用（默认情况下，Vue CLI 会生成 Source Map）。
    • 如果 Source Map 未启用，调试时可能无法定位到源码。
  • 生产环境调试：
    • 生产环境下，代码通常会被压缩和混淆，调试起来比较困难。建议在开发环境下调试。

总结

Vue 项目可以通过以下方式进行单步调试：

  1. 浏览器开发者工具：直接调试运行中的 Vue 应用。
  2. VS Code：通过 Debugger for Chrome 插件调试 Vue 项目。
  3. Vue Devtools：专门用于调试 Vue 组件和状态。

通过合理使用这些工具，可以高效地调试 Vue 应用，定位和解决问题。

学习3人组
关注
一文读懂Vue生命周期（Vue2）
蓑笠翁
05-06 2038
vue生命周期，keepalive生命周期，vue页面数据更新生命周期等详解。
vue2生命周期
Cheny_Yang的博客
04-18 1668
Vue实例的生命周期指的是从创建、初始化、挂载、更新到销毁的整个过程。每个阶段都有相应的生命周期钩子函数，可以让开发者在不同的阶段执行自定义的逻辑。created$elrendermounted$elupdateddestroyed提供了一个视觉化的方式来理解这些阶段和钩子函数。显示了实例从创建到销毁的整个流程，以及在这个过程中可以利用的钩子函数。生命周期图包括两条路径：一条是从创建到挂载的路径，另一条是从更新到销毁的路径。Vue实例的生命周期及其钩子函数对编写可靠和高效的Vue应用至关重要。
掌控 Vue 组件的“脉搏”：生命周期钩子函数的执行顺序与应用场景详解
最新发布
Liudazhuangshuai的博客
04-08 1280
本文深入介绍了 Vue 2 组件的生命周期钩子，将组件的“一生”划分为创建、挂载、更新和销毁四个主要阶段，并详细解释了每个阶段对应的钩子函数 (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed)。通过清晰的代码示例，展示了在不同生命周期阶段可以进行的操作，例如数据初始化、API 调用、DOM 操作、事件监听器的绑定与解绑、定时器的清理等。
浅谈Vue的加载顺序探讨
08-29
本篇文章主要介绍了Vue的加载顺序探讨，详细的介绍了加载顺序以及如何判断所有的子组件加载完成。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue 的组件加载顺序和渲染顺序
小草莓的博客
09-23 3039
综上所述，Vue 中组件的加载和渲染顺序是先加载父组件，再递归地加载子组件，然后按照深度优先遍历的方式渲染子组件，再依次向上渲染父组件。
vue 组件数据加载解析顺序
weixin_45549481的博客
02-29 1604
vue组件数据加载解析顺序
Vue的加载顺序探讨(一)
热门推荐
甘焕的博客
11-29 1万+
在Vuejs 1.0版本中，如果父子组件进行配合，它们的生命周期执行具有如下特点：1. created总是先父后子生命周期函数created总是按照从父到子的顺序依次执行，但是兄弟之间没有严格按照这样的顺序执行，估计是采用了异步函数，不仅如此，子组件在父组件中的插入顺序也是随机的，并没有什么特别的规律。假定子组件的引用顺序如下
vue的5种加载顺序
weixin_47950594的博客
11-16 2303
vue父子组件的加载顺序父子组件的加载顺序子组件若有 props 的话更新顺序是四步，若无的话两步不触发父亲的钩子父组件更新顺序销毁过程有多个子组件的加载顺序 父子组件的加载顺序 1.父 beforeCreate 2.父 created 3.父 beforeMount 4.子 beforeCreate 5.子 created 6.子 beforeMount 7.子 mounted 8.父 mounted 子组件若有 props 的话更新顺序是四步，若无的话两步不触发父亲的钩子 1.父 beforeUpdat
Vue的生命周期详细介绍
vue888的博客
09-21 2491
Vue的生命周期详细介绍
uni-app页面生命周期（微信小程序）与vue生命周期的执行顺序
id_lutra的博客
10-22 2586
最近接受一个新项目用的uni-app写小程序，自己翻了很多文档，总结一下： uni-app的页面生命周期函数（微信小程序）： onInit 监听页面初始化，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad onLaunch:function(){//当uni-app初始化完成时触发（全局只触发一次） console.log('App onLaunch') } onLoad 监听页面加载，其参数为上个...
vue中文件加载顺序
Lucky_girl_wan的博客
02-20 5494
从加载顺序中可以看出main.js是先执行的，但出现（index.html>app.vue>main.js）问题是由ES6的模块化加载规则导致的。因为ES6是编译时加载且import命令具有提升效果，会提升到整个模块的头部，优先执行，故导致上述问题。ES6、CommonJs、AMD的加载规则。
vue.js页面加载执行created,mounted的先后顺序说明
01-21
created页面加载未渲染html之前执行。 mounted渲染html后再执行。 由于created在html模板生产之前所以无法对Dom进行操作而mounted可以。 补充知识：关于Vue子组件data选项某个属性引用子组件props定义的属性的几点思考 学过Vue的都知道Vue等MVVM框架相对于传统的JS库比如Jquery最大的区别在于数据驱动视图，重点在于数据，拿到数据后将数据通过模板{{}}语法或者v-html展示在页面上。 我们也都知道在Vue父子组件可以通过Props实现父组件传递到子组件。 在项目开发中，我们会遇到这种需求，页面初始化时，父组件通过接口拿到需要数据，然后拿到
vue的页面加载流程和主要文件
欢迎来到我的博客
07-28 482
设计蓝图，一启动就瞬间搭建好蓝图。拿到施工位置并且手上有。
Vue组件加载顺序
一蓑烟雨97的博客
06-20 3882
Vue组件加载顺序
VUe 方法加载顺序
zhang804633234的专栏
01-22 1859
//在实例初始化之后、创建之前执行 beforeCreate(){ console.log("我最先加载"); } //实例创建后执行 created(){ console.log("其次是我"); }, //在挂载开始之前调用 beforeMounted(){ console.log("轮到我了"); } //挂载前加载过滤器 filters: { console.log("接着是我..
vue项目的加载顺序
monparadis的博客
12-08 5882
vue项目的入口：main.js vue项目唯一的页面：index.html vue的特点：就是将所有的vue页面（实质上是所有的js代码），全部整合到app.vue（app.js）中合成一个template放入index.html中的页面里面 vue的加载顺序：先加载组件，然后是加载app.vue（由内往外加载），所以很多小伙伴（其实是我）把一切请求放到app.vue的mounted中使用，再从组件中调用其实就大错特错了，实际上你会发现组件中的mouted方法会先执行，你要获取的变量其实未定义 但
vue组件的加载顺序,看完之后收获满满~~~
几乎每一篇都是保姆级讲解
06-06 3661
这篇文章不是项目上的问题,而是vue组件加载的一个过程,为什么突发奇想的写一篇这个文章,那是因为我,还有很多的人,可能对页面执行的一个顺序都不知道,只知道写功能,然后到了出bug的时候,都不知道是哪里出了问题,所以这篇文章是重中之重,我将带大家去领悟领悟首先,看下图,这是一个父组件,里面包括了很多子组件下面我们就举例这两个组件说明,他们的script是怎么执行的呢?据我的结论就是他执行的顺序是子组件按照从上到下依次执行,但是需要注意的是,如果一个组件里面有mounted他们会后执行,再去执行其他组件,有点绕
Vue中关于computed、methods、watch，mounted的区别
qq_39399050的博客
06-23 7283
computed
vue生命周期及执行顺序
ernesto的博客
03-12 4405
vue生命周期
vue生命周期加载顺序
10-18
Vue 的生命周期钩子函数可以分为 8 个阶段，按照加载顺序依次为： 1. beforeCreate：实例刚被创建，数据观测和事件机制都未初始化，无法访问 data、computed、methods 等属性和方法。 2. created：实例已经完成数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值