vue的生命周期和钩子函数

更新日期: 2019-12-01阅读: 2.1k标签: 生命周期

本章目标

学会并了解vue的生命周期和钩子函数


vue的生命周期和钩子函数

其实在提到vue的生命周期和钩子函数的时候,有的人认为常用的钩子函数有10个,也有的人认为是8个,无论是10个还是8个对于我而言都是一样的,我们主要讲解8个vue的钩子函数。首先来一波官网的对于vue生命周期的图解


这一张图对于vue的生命周期已经讲解的特别详细了,但是光靠这一张图还不足于了解它的生命周期,我们需要实践一下,有句古话说的好,实践是检验道理的唯一标准,介绍一下vue的钩子函数。


beforeCreate(实例创建前)

实例组件刚开始创建,元素dom数据都还没有初始化

应用场景:可以在这加个loading事件

created(实例创建后)

数据data已经初始化完成,方法也已经可以调用,但是dom为渲染,在这个周期里面如果进行请求是可以改变数据并渲染,由于dom未挂载,请求过多或者占用时间过长会导致页面线上空白

应用场景:在这结束loading,还做一些初始化,实现函数自执行 

beforeMoute(元素挂载前)

dom未完成挂载,数据初始化完成,但是数据的双向绑定还是{{}},这是因为vue采用了虚拟dom技术

mouted(元素挂载后)

数据和dom都完成挂载,在上一个周期占位的数据把值渲染进去,一般请求会放在这个地方,因为这边请求改变数据之后刚好能渲染

beforeUpdate(实例更新前)

只要是页面数据改变了都会触发,数据更新之前,页面数据还是原来的数据,当你请求赋值一个数据的时候就会执行这个周期,如果没有数据改变不执行

updated(实例更新后)

只要是页面数据改变了都会触发,数据更新完毕,页面的数据是更新完成的,beforeUpdated和updated要谨慎使用,因为页面更新数据的时候都会触发,在这里操作数据很影响性能和死循环

beforeDestory(实例销毁前)

实例销毁之前调用,在这一步,实例仍然完全可用

destory(实例销毁后)

Vue实例销毁后调用,调用后,Vue实例指示的所有内容都会解除绑定,所有的事件监听器都会被移除,所有的子实例也会被销毁


实例一

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue的生命周期实例一</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="msg" />
            {{msg}}
        </div>
        <button onclick="destory()">销毁</button>
        <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    msg:'vue'
                },
                beforeCreate(){
                    console.log('vue实例创建前:'+this.msg+','+this.$el);
                    //    数据data和dom都还没有初始化
                },
                created(){
                    console.log('vue实例创建后:'+this.msg+','+this.$el);
                    //数据dom初始化完成,dom还没有初始化完成
                },
                beforeMount(){
                    console.log('元素挂载前:');
                    console.log(this.$el);
                },
                mounted(){
                    console.log('元素挂载后:');
                    console.log(this.$el);
                },
                beforeUpdate(){
                    console.log('实例更新前');
                    console.log(this.msg);
                    console.log(this.$el);
                },
                updated(){
                    console.log('实例更新后');
                    console.log(this.msg);
                    console.log(this.$el);
                },
                beforeDestroy(){
                    console.log('实例销毁前');
                    console.log(this.msg);
                },
                destroyed(){
                    console.log('实例销毁后');
                    console.log(this.msg);
                }
            });
            function destory(){
                vm.$destroy();
            }
        </script>
    </body>
</html>

结果



实例二

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue的生命周期实例二</title>
    </head>
    <body>
        <div id="app">
            {{name}}
        </div>
        <button onclick="destory()">销毁实例</button>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    name:'一只流浪的kk',
                    age:18
                },
                beforeCreate(){
                    console.log('============实例创建前=============');
                    console.log(this.$el);    //undefined
                    console.log(this.$data);//undefined
                },
                created(){
                    console.log('============实例创建后=============');
                    console.log(this.$el);
                    console.log(JSON.stringify(this.$data));
                },
                beforeMount(){
                    console.log('============元素挂载前=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                mounted(){
                    console.log('============元素挂载后=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                beforeUpdate(){
                    console.log('============实例更新前=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                updated(){
                    console.log('============实例更新后=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                beforeDestroy(){
                    console.log('============实例销毁前=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                destroyed(){
                    console.log('============实例销毁后=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                }
            });
            function destory(){
                vm.$destroy();
            }
        </script>
    </body>
</html>



总结

beforeCreate() : 此时$el、data 的值都为undefined,即el 和 data 并未初始化 。

create(): 此时可以拿到data的值,但是$el依旧为undefined,即data完成了 数据的初始化,el没有。

beforeMounte(): $el的值为“虚拟”的元素节点,dom未完成挂载,数据初始化完成,但是数据的双向绑定还是{{}},这是因为vue采用了虚拟dom技术。

mouted(): 数据和dom都完成挂载,在上一个周期占位的数据把值渲染进去,一般请求会放在这个地方,因为这边请求改变数据之后刚好能渲染。


链接: https://fly63.com/article/detial/7122

vue生命周期诠释

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期

Flutter中State生命周期

State 的生命周期,指的是在用户参与的情况下,其关联的 Widget 所经历的,从创建到显示,再到更新最后到停止,直至销毁等各个阶段,不同的阶段涉及到特定的任务处理。

理解react生命周期

挂载(Mounting)挂载指的是组件被实例化并插入到dom中,顺序如下:constructor -> getDerivedStateFromProps -> render -> componentDidMount,更新(Updating)当state变化或者props变化会引起更新

微信小程序APP生命周期

小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数,onLaunch----当小程序初始化完成时,会触发 onLaunch

React 生命周期详解

请不要死记生命周期的顺序和作用,要理解 React 将这些生命周期暴露出来给开发者调用是因为开发者有使用这些生命周期的需求,通过这些生命周期,我们可以完成一些事情。主要可分为 初始化阶段、挂载阶段、更新阶段、卸载阶段

vue组件的生命周期

Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文

图解React组件生命周期

每个React类组件都包含“生命周期方法”(function组件是没有生命周期方法的),你可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法。在接下来的文章中,生命周期方法的书写会遵照如下规则,以方便大家理解。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!