• Javaweb之Vue生命周期的详细解析

    2.4 生命周期

    vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

    状态阶段周期
    beforeCreate创建前
    created创建后
    beforeMount挂载前
    mounted挂载完成
    beforeUpdate更新前
    updated更新后
    beforeDestroy销毁前
    destroyed销毁后

    下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：

    其中我们需要重点关注的是mounted,其他的我们了解即可。

    mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

    我们在VS Code中创建名为18. Vue-生命周期.html的文件编写代码来演示效果，提前准备如下代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Vue-指令-v-fortitle>
    8.     <script src="js/vue.js">script>
    9. head>
    10. <body>
    11.     <div id="app">
    12. ​
    13.     div>
    14. body>
    15. <script>
    16.     //定义Vue对象
    17.     new Vue({
    18.         el: "#app", //vue接管区域
    19.         data:{
    20.            
    21.         },
    22.         methods: {
    23.             
    24.         }
    25.     })
    26. script>
    27. html>

    然后我们编写mounted声明周期的钩子函数，与methods同级，代码如下：

    浏览器打开，运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂在，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。

  • 相关阅读:
    [附源码]java毕业设计基于web的硕士研究生入学考务管理
    会议论文和期刊论文在写作上有什么区别？有什么侧重点？
    C语言描述数据结构 —— 常见排序(3)计数排序、归并排序
    c++ 回调函数，std::function，std::bind
    网络规划设计师之OSI七层模型之物理层
    钉钉旧版服务端SDK支持异步方法的升级改造
    性能测试基本流程
    零基础转行软件测试岗位有哪些一定要注意的地方？
    【OpenVINO™】使用OpenVINO™ C# API 部署 YOLO-World实现实时开放词汇对象检测
    (一) SpringCloud+Security+Oauth2微服务授权初步认识
  • 原文地址：https://blog.csdn.net/qq_69748833/article/details/134497099