• Vue2生命周期详解

    目录

    1，生命周期概念

    1.1概念：

    1.2生命周期图解：

    2.生命周期过程解读

    2.1创建阶段

     2.2更新阶段

     2.3销毁阶段

     3.完整代码

    4，总结：

    1，生命周期概念

    1.1概念：

    所谓生命周期指的是vue实例的从创建到更新再到销毁的这么一个过程，就如同我们人类的一生一样，说起来就莫名有点伤感，从出生，到成长，到辉煌顶峰，最后到死亡......（自己的见解）

    生命周期函数别名‘钩子函数’，类似a(){}   b(){}   这种在vue中为生命周期函数，重点的为mounted（创建完成函数），beforeDestroy（销毁前善后工作），这两个钩子常用。

    1.2生命周期图解：

    直接看图肯定是一脸懵逼的，所以我们坐下来慢慢说

    2.生命周期过程解读

    2.1创建阶段

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <script src="./vue.js">script>
    10. head>
    11.  
    12. <body>
    13.     <div id="app">
    14.  
    15.         计算器：{{num}}
    16.       
    17.     div>
    18. body>
    19. <script>
    20.     new Vue({
    21.         el: '#app',
    22.         data() {
    23.             return {
    24.                 num: 0,
    25.             };
    26.         },
    27. //生命周期，，钩子函数a(){}  b(){}  此类型为生命周期函数
    28.         beforeCreate() {//vue实例创造之前，没有解析模板，没有挂载，data数据
    29.             console.log(this.num)//undefind
    30.             // debugger;打断点
    31.         },
    32.         created() {//vue实例创建完成，但并未挂载，没有解析模板
    33.             console.log(this.num)//0
    34.             // debugger;
    35.         },
    36.         beforeMount() {//在挂载渲染前最后一次更改数据的机会，这个阶段操作dom不奏效
    37.             this.num = 100;
    38.             console.log('beforeMount', this.num)//beforeMount 100
    39.             // debugger;
    40.         },
    41.  
    42.         mounted() {//vue实例挂载完成，解析模板，初始化
    43.             console.log(this.num)
    44.  
    45.             setInterval(() => {
    46.                 this.num++
    47.             }, 1000)
    48.         },
    49.    })
    50.  
    51. script>

     beforeCreate() vue实例创造之前，没有解析模板，没有挂载，data数据

    created() vue实例创建完成，但并未挂载，没有解析模板 

     

     beforeMount() 在挂载渲染前最后一次更改数据的机会，这个阶段操作dom不奏效 

     

    mounted() vue实例挂载完成，解析模板，初始化 

     

     2.2更新阶段

    1.  // 2，更新状态阶段
    2.         beforeUpdate() {//（data中数据已发生变化，view层数据变化之前），后vue的虚拟dom机制会从新构建虚拟dom
    3.             //  与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。
    4.             console.log('beforeUpdate', this.num)//打印num为101,视图层{{num}}未渲染，只是占位符
    5.             // debugger;
    6.         },
    7.         updated() {//完成更新
    8.             console.log('updated', this.num)//updated 101  ,更新完成，页面渲染也完成{{num}}为101
    9.             // debugger;
    10.         },

     

    beforeUpdate() （data中数据已发生变化，view层数据变化之前），后vue的虚拟dom机制会从新构建虚拟dom 与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。

           updated()更新完成，页面渲染也完成{{num}}为101 

     

     2.3销毁阶段

    1.   beforeDestroy() {//这里善后:清除计时器、清除非指令绑定的事件等等…’)。
    2.             console.log('beforeDestroy', '处理善后工作');
    3.         },
    4.         destroyed() {//销毁后（Dom元素存在，只是再也不受vue控制）
    5.             console.log(' destroyed', this)//this指向还是vue，vue存在，只是销毁后，断开vue和dom的联系，无法操作dom
    6.         },

    执行两个销毁函数

    beforeDestroy() 这里善后:清除计时器、清除非指令绑定的事件等等…’)。

     destroyed()销毁后（Dom元素存在，只是再也不受vue控制）

    this指向还是vue，vue存在，只是销毁后，断开vue和dom的联系，无法操作dom 

     3.完整代码

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <script src="./vue.js">script>
    10. head>
    11.  
    12. <body>
    13.     <div id="app">
    14.         计算器：{{num}}
    15.         <button @click="add">点我加1button>
    16.         <button @click="destroy">点我销毁button>
    17.     div>
    18. body>
    19. <script>
    20.     new Vue({
    21.         el: '#app',
    22.         data() {
    23.             return {
    24.                 num: 0,
    25.             };
    26.         },
    27.         methods: {
    28.             add() {
    29.                 this.num++
    30.             },
    31.             destroy() {
    32.                 console.log('即将销毁');
    33.                 this.$destroy()//Vm.$destroy()：销毁后自定义事件会失效，但原生DOM事件依然有效。销毁后会调用销毁阶段的两个钩子。
    34.             }
    35.         },
    36.         //生命周期，，钩子函数a(){}  b(){}  此类型为生命周期函数
    37.         beforeCreate() {//vue实例创造之前，没有解析模板，没有挂载，data数据
    38.             console.log(this.num)//undefind
    39.             // debugger;  打断点
    40.         },
    41.         created() {//vue实例创建完成，但并未挂载，没有解析模板
    42.             console.log(this.num)//0
    43.             // debugger;
    44.         },
    45.         beforeMount() {//在挂载渲染前最后一次更改数据的机会，这个阶段操作dom不奏效
    46.             this.num = 100;
    47.             console.log('beforeMount', this.num)//beforeMount 100
    48.             // debugger;
    49.         },
    50.  
    51.         mounted() {//vue实例挂载完成，解析模板，初始化
    52.             console.log(this.num)
    53.             // debugger;
    54.             setInterval(() => {
    55.                 this.num++
    56.             }, 1000)
    57.         },
    58.         // 2，更新状态阶段
    59.         beforeUpdate() {//（data中数据已发生变化，view层数据变化之前），后vue的虚拟dom机制会从新构建虚拟dom
    60.             //  与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。
    61.             console.log('beforeUpdate', this.num)//打印num为101,视图层{{num}}未渲染，只是占位符
    62.             // debugger;
    63.         },
    64.         updated() {//完成更新
    65.             console.log('updated', this.num)//updated 101  ,更新完成，页面渲染也完成{{num}}为101
    66.             // debugger;
    67.         },
    68.         //3,销毁阶段
    69.         beforeDestroy() {//这里善后:清除计时器、清除非指令绑定的事件等等…’)。
    70.             console.log('beforeDestroy', '处理善后工作');
    71.         },
    72.         destroyed() {//销毁后（Dom元素存在，只是再也不受vue控制）
    73.             console.log(' destroyed', this)//this指向还是vue，vue存在，只是销毁后，断开vue和dom的联系，无法操作dom
    74.         },
    75.  
    76.  
    77.  
    78.     })
    79.  
    80. script>
    81.  
    82. html>

    4，总结：

     beforeCreate初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

    vue实例中的el，data，data中的message都为undefined。

     created实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 主要应用：调用数据，调用方法，调用异步函数

    beforeMount载入前（完成了data和el数据初始化），可是页面中的内容仍是vue中的占位符，data中的message信息没有被挂在到Bom节点中，在这里能够在渲染前最后一次更改数据的机会，不会触发其余的钩子函数，通常能够在这里作初始数据。这个阶段操作DOM是不奏效的。

     mounted载入后html已经渲染(ajax请求能够放在这个函数中)，把vue实例中的data里的message挂载到BOM节点中去。

     beforeUpdate状态完成更新之前（data中数据已发生变化，view层数据变化之前），后vue的虚拟dom机制会从新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。

    updated数据已经更改完成，dom也从新render完成。

    Vm.$destroy()：销毁后自定义事件会失效，但原生DOM事件依然有效。销毁后会调用下面两个钩子。

     beforeDestroy销毁前执行（$destroy方法被调用的时候就会执行）,通常在这里善后:清除计时器、清除非指令绑定的事件等等…’)。

    destroyed销毁后 （Dom元素存在，只是再也不受vue控制）,卸载watcher，事件监听，子组件

    常用的生命周期钩子：

    mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

    beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

    关于销毁Vue实例：

    1.销毁后借助Vue开发者工具看不到任何信息。

    2.销毁后自定义事件会失效，但原生DOM事件依然有效。

    3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

  • 相关阅读:
    深度学习入门（9）神经网络Affine与Softmax层的计算图表示方式及其误差反向传播的代码实现
    【DL】第 12 章： 生成式深度学习
    数据结构——二叉树的基本概念及顺序存储（堆）
    【MySQL高级】索引
    高项 进度管理论文
    【译】.NET 7 中的性能改进（十一）
    Maven除了管理包还能干嘛？
    Java基础之《HTML5标签（1）》
    RISCV学习笔记7.10(开源虚拟机篇)--AlmaLinux虚拟机安装python与labview自动化软件
    SpriteRenderer和Image组件的区别
  • 原文地址：https://blog.csdn.net/m0_71345904/article/details/126262555