vue生命周期 和 最常用的mounted

生命周期:指一个对象从创建到销毁的整个过程。

生命周期的八个阶段:每个阶段会自动执行一个生命周期方法(钩子), 让开发者有机会在特定的阶段执行自己的代码

|---------------|----------|
| 状态 | 阶段周期 |
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 载入前 |
| mounted | 挂载完成 |
| beforeUpdate | 数据更新前 |
| updated | 数据更新后 |
| beforeUnmount | 组件销毁前 |
| unmounted | 组件销毁后 |

Vue生命周期典型的应用场景:在页面加载完毕时,发起异步请求,加载数据,渲染页面。

javascript 复制代码
<script type="module">
   import { createApp } from 'https://.../vue.esm-browser.js'
   const app = createApp({
     data() {
       return {
         message: "Hello Vue"
       }
     },
     //生命周期-钩子函数 mounted
     mounted() {
       console.log('Vue挂载完毕, 发送请求获取数据 ...');
     }
   }).mount("#app");
</script>

笔记参考

相关推荐
:-)12 分钟前
idea中的vue文件没有高亮显示
前端·javascript·vue.js·ecmascript·intellij-idea
IPdodo_14 分钟前
2026年AI 数据采集代理 IP 选型:成功率、并发、轮换与成本评估
前端·网络·人工智能·chrome·python·http·网络调试
计算机魔术师21 分钟前
AI问诊5秒出结果,医生反而更忙了
前端
郭邯23 分钟前
从需求到上线:我用 AI 辅助开发了一个在线倒计时器
前端
全栈项目管理程序猿26 分钟前
ArcGIS JS 基础教程(14):Map、View 与 Layer 关系
javascript
Damai28 分钟前
Next.js 切换动态路由后,为什么页面还保留着上一个分类的数据?
前端·react.js
程序员鱼皮28 分钟前
爆火的《牛来》模型正式发布!DeepSeek 的排名又下降了。。
前端·后端·ai编程
MocMoc34 分钟前
从零落地全栈 Monorepo:Turbo + npm workspaces 实战(附一个记账小应用)
前端
灯澜忆梦36 分钟前
【基于GO的Web开发15】gin路由和路由组
前端·后端·golang·gin
Southern Wind41 分钟前
从一段文字到一部动态漫:如何打造全流程分镜创作工作台 StoryCanvas AI
前端·javascript·vue.js·人工智能