• 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所绑定的钩子函数，然后自动执行，弹框。

  • 相关阅读:
    csapp第三章读书笔记
    vue中实现图片懒加载的几种方法
    MySQL----存储过程
    全局定制elementui的确认框confirm
    QDateEdit开发详解
    使用python量化交易接口有哪些分析指标和策略？
    ubuntu18安装caffe(CPU)
    java计算机毕业设计瀚绅睿茨二人二轮车租赁管理MyBatis+系统+LW文档+源码+调试部署
    使用ffmpeg将视频转成HLS(m3u8)格式
    Combiner合并
  • 原文地址：https://blog.csdn.net/qq_69748833/article/details/134497099