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>

笔记参考

相关推荐
超人不会飞_Jay2 分钟前
2026.6.4 Vue用户中心项目笔记
前端·vue.js·笔记
copyer_xyf5 分钟前
Python 函数全面总结
前端·后端·python
时寒的笔记6 分钟前
瑞数案例欧冶解读py和js文件最终版
开发语言·javascript·ecmascript
怕浪猫9 分钟前
Electron 开发实战(十):应用打包与分发|全平台打包、签名、自定义协议实战
前端·javascript·electron
我是伪码农14 分钟前
小程序175-200
前端·javascript·小程序
懂懂tty17 分钟前
Vue3 编译优化
前端·javascript·vue.js
踩着两条虫22 分钟前
VTJ.PRO v2.4.0 多人协作与 AI 批量识图实战评测
vue.js·人工智能·低代码·figma
低保和光头哪个先来23 分钟前
源码篇 生命周期
前端·javascript·vue.js
持敬chijing24 分钟前
Web渗透之SQL注入-盲注(布尔盲注,时间盲注)
前端·sql·oracle
AI_零食25 分钟前
鸿蒙PC Electron框架天天饮水应用深度解析:健康饮水管理系统
javascript·华为·信息可视化·electron·开源·鸿蒙