• 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面向对象】封装的认识与实现
    Kutools for Excel v26.10 Excel插件工具箱中文版
    ML.NET 更新
    【SQL刷题】DAY15----SQL联结表专项练习
    无人机倾斜摄影技术在测绘中的应用
    maven打包可执行jar含依赖lib
    GO语言学习笔记(与Java的比较学习)（三）
    使用 PHP、PDO 和 MySQL 的 CRUD 应用程序
    C# 中的“智能枚举”：如何在枚举中增加行为
    Activiti工作流学习笔记(四)——工作流引擎中责任链模式的建立与应用原理
  • 原文地址：https://blog.csdn.net/qq_69748833/article/details/134497099