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>

笔记参考

相关推荐
谢尔登4 小时前
Vue3 应用实例创建及页面渲染底层原理
javascript·vue.js·ecmascript
小笔学长4 小时前
XMLHttpRequest 对象:传统的网络请求方式
javascript·xmlhttprequest·前端开发·网络请求实战·跨域问题解决
IT_陈寒5 小时前
SpringBoot性能翻倍秘籍:5个被低估的配置项让我QPS提升200%
前端·人工智能·后端
破晓之翼5 小时前
EASDEP 自动单据生成DEMO
javascript
阿珊和她的猫5 小时前
Webpack 常用插件深度解析
前端·webpack·node.js
kylezhao20196 小时前
第三节、C# 上位机面向对象编程详解(工控硬件封装实战版)
开发语言·前端·c#
行思理6 小时前
css 样式新手教程
前端·css·html5
帅帅在睡觉6 小时前
组件的创建与挂载
javascript·vue.js·elementui
幽络源小助理6 小时前
基于SpringBoot+Vue的实验室管理系统源码 | 教育类JavaWeb项目免费下载 – 幽络源
vue.js·spring boot·后端
qq_406176146 小时前
JavaScript闭包:从底层原理到实战
开发语言·前端·javascript