Vue2生命周期详解

Ednburgh-

已于 2022-08-26 15:29:42 修改

阅读量2.9k

点赞数 30

文章标签： vue.js javascript 前端

于 2022-08-10 11:59:28 首次发布

本文链接：https://blog.csdn.net/m0_71345904/article/details/126262555

版权

1，生命周期概念

1.1概念：

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

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

1.2生命周期图解：

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

2.生命周期过程解读

2.1创建阶段

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">

        计算器：{{num}}
      
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                num: 0,
            };
        },
//生命周期，，钩子函数a(){}  b(){}  此类型为生命周期函数
        beforeCreate() {//vue实例创造之前，没有解析模板，没有挂载，data数据
            console.log(this.num)//undefind
            // debugger;打断点
        },
        created() {//vue实例创建完成，但并未挂载，没有解析模板
            console.log(this.num)//0
            // debugger;
        },
        beforeMount() {//在挂载渲染前最后一次更改数据的机会，这个阶段操作dom不奏效
            this.num = 100;
            console.log('beforeMount', this.num)//beforeMount 100
            // debugger;
        },

        mounted() {//vue实例挂载完成，解析模板，初始化
            console.log(this.num)

            setInterval(() => {
                this.num++
            }, 1000)
        },
   })

</script>

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

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

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

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

2.2更新阶段

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

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

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

2.3销毁阶段

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

执行两个销毁函数

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

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

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

3.完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        计算器：{{num}}
        <button @click="add">点我加1</button>
        <button @click="destroy">点我销毁</button>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                num: 0,
            };
        },
        methods: {
            add() {
                this.num++
            },
            destroy() {
                console.log('即将销毁');
                this.$destroy()//Vm.$destroy()：销毁后自定义事件会失效，但原生DOM事件依然有效。销毁后会调用销毁阶段的两个钩子。
            }
        },
        //生命周期，，钩子函数a(){}  b(){}  此类型为生命周期函数
        beforeCreate() {//vue实例创造之前，没有解析模板，没有挂载，data数据
            console.log(this.num)//undefind
            // debugger;  打断点
        },
        created() {//vue实例创建完成，但并未挂载，没有解析模板
            console.log(this.num)//0
            // debugger;
        },
        beforeMount() {//在挂载渲染前最后一次更改数据的机会，这个阶段操作dom不奏效
            this.num = 100;
            console.log('beforeMount', this.num)//beforeMount 100
            // debugger;
        },

        mounted() {//vue实例挂载完成，解析模板，初始化
            console.log(this.num)
            // debugger;
            setInterval(() => {
                this.num++
            }, 1000)
        },
        // 2，更新状态阶段
        beforeUpdate() {//（data中数据已发生变化，view层数据变化之前），后vue的虚拟dom机制会从新构建虚拟dom
            //  与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。
            console.log('beforeUpdate', this.num)//打印num为101,视图层{{num}}未渲染，只是占位符
            // debugger;
        },
        updated() {//完成更新
            console.log('updated', this.num)//updated 101  ,更新完成，页面渲染也完成{{num}}为101
            // debugger;
        },
        //3,销毁阶段
        beforeDestroy() {//这里善后:清除计时器、清除非指令绑定的事件等等…’)。
            console.log('beforeDestroy', '处理善后工作');
        },
        destroyed() {//销毁后（Dom元素存在，只是再也不受vue控制）
            console.log(' destroyed', this)//this指向还是vue，vue存在，只是销毁后，断开vue和dom的联系，无法操作dom
        },



    })

</script>

</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操作数据，因为即便操作数据，也不会再触发更新流程了。

Ednburgh-

关注

30
点赞
踩
26

收藏

觉得还不错? 一键收藏
22
评论
Vue2生命周期详解

常用的生命周期钩子：mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
复制链接

扫一扫