hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

Vue进修系列(四)——明白生命周期和钩子

2019-11-18杂谈搜奇网48°c
A+ A-

 媒介

    在上一篇中,我们对日常平凡举行vue开辟中碰到的经常运用指令举行归类申明解说,也许已学会了怎样去完成数据绑定,以及完成动态的完成数据展现功用,运用指令,能够更好更快的举行开辟。而在这一篇中,我们将经由历程实例,探讨vue的生命周期。

    万物皆有灵,人间万物都具有魂魄,小到江山湖海,花草树木,蚂蚁到人类,以及一切的动植物,大到地球星空和宇宙,都具有魂魄,能够说他们都是有生命的,只是他们的生命形状是我们人类所不能明白的存在。在生产中,生命周期浅显来说,就是从天然中来回到天然中去的全历程,也就是从收集材料设想,到加工生产后流畅运用的历程,以及产物报废,进而回归大天然的历程,这全部历程就是一个完全的生命周期。因而,在开辟运用项目的中,从启动页面的加载,页面衬着到烧毁,也算是生命周期。Vue把全部生命周期划分为建立、挂载、更新、烧毁等阶段,每一个阶段都邑给一些“钩子”让我们来做一些我们想完成的行动。这里的“钩子”能够这么明白,就是在每一个阶段用钩子钩住,并举行相应的操纵。 

          

 

     进修生命周期,能够使我们更好的明白Vue的生命机制,经由历程相识每一个阶段的钩子,能够更好的完成我们的营业代码,处置惩罚越发庞杂的营业逻辑。

 内容

    Vue每一个组件都有属于本身的生命周期,从最先建立、初始化数据、编译模板、挂载Dom、衬着→更新→衬着、卸载等这就是一个组件的生命周期。

    在全部生命周期内,统共分为8个阶段建立前/后,载入前/后,更新前/后,烧毁前/后。

 实行递次

    *图片来自官网,只需你明白了这张图,也就对Vue的生命周期有了一个大抵的相识。

    在谈到Vue的生命周期的时刻,我们起首须要建立一个实例:

 最先

一、建立前/后

1.beforeCreate-建立前 :实例建立前:这个阶段实例的data、methods是读不到的(el 和 data 并未初始化)

  var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 组件刚刚被建立,组件属性盘算前状况===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  //undefined
        },
})

2.created-建立完成 :实例建立后:这个阶段已完成了数据观察(data observer),属性和要领的运算, watch/event 事宜回调。mount挂载阶段还没最先,$el 属性如今不可见,数据并没有在DOM元素上举行衬着(完成了data数据的初始化,el没有)

 var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
        created: function () {
            console.group('created 组件建立终了,属性已绑定但dom还未生成的状况===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
})

 二、载入前/后

1.beforeMount 预备载入——在挂载最先之前被挪用:相干的 render 函数初次被挪用。顺序运转,控制台看输出 (完成了假造el和data初始化)

  var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      }, 
        beforeMount: function () {
            console.group('beforeMount 模板挂载前状况===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
})

 2.mounted 挂载完成——el选项的DOM节点 被新建立的 vm.$el 替代,并挂载到实例上去以后挪用今生命周期函数。此时实例的数据在DOM节点上举行衬着(完成了实在el和data初始化)

var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
        mounted: function () {
            console.group('mounted 模板挂载完毕状况===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
})

 

 

 这个时刻,页面衬着的四个阶段已完成了,我们看看流程:(刚最先的时刻beforeCreate阶段,数据和页面都没有衬着,然则页面的静态数据已被加载出来,然后一步一步,先vue实例,然后挂载,到最后页面衬着完成)

三、更新前/后

1.beforeUpdate 更新Data之前——数据更新时挪用,但不举行DOM从新衬着,在数据更新时DOM没衬着前能够在这个生命函数里举行状况处置惩罚

当修正vue实例的data时,vue就会自动帮我们更新衬着视图,在这个历程当中,vue供应了beforeUpdate的钩子给我们,在检测到我们要修正数据的时刻,更新衬着视图之前就会触发钩子beforeUpdate。

  var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状况===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
})

控制台输入 app.message = '艾三元'

由图看来,我们的 Data 数据已更新了,然则页面里还没有更新

2.update :这个状况下数据更新而且DOM从新衬着,当这个生命周期函数被挪用时,组件 DOM 已更新,所以你如今能够实行依赖于 DOM 的操纵。当实例每次举行数据更新时updated都邑实行

 var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      }, 
        updated: function () {
            console.group('updated 更新完成状况===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message);
        },
})

四、烧毁前/后

1.beforeDestroy :页面烧毁前——实例烧毁之前挪用。挪用实例的destroy( )要领能够烧毁当前的组件,在烧毁前,会触发beforeDestroy钩子。

  var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
        beforeDestroy: function () {
            console.group('beforeDestroy 烧毁前状况===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
})

控制台输入 app.$destroy()

 2.destroyed :烧毁完成——Vue 实例烧毁后挪用。挪用后,Vue 实例指导的一切东西都邑解绑定,一切的事宜监听器会被移除,一切的子实例也会被烧毁。

var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
        destroyed: function () {
            console.group('destroyed 烧毁完成状况===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
})

 

这个时刻我们能够看到,vue 实例被烧毁后,再修正 Data 页面也已不能修正页面 DOM 了。

 源码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
        beforeCreate: function () {
           console.group('beforeCreate 组件刚刚被建立,组件属性盘算前状况===============》');
           console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
           console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
           console.log("%c%s", "color:red","message: " + this.message)  //undefined
        },
        created: function () {
           console.group('created 组件建立终了,属性已绑定但dom还未生成的状况===============》');
           console.log("%c%s", "color:red","el     : " + this.$el); //undefined
           console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
           console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
           console.group('beforeMount 模板挂载前状况===============》');
           console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
           console.log(this.$el);
           console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
           console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 模板挂载完毕状况===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状况===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状况===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 烧毁前状况===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 烧毁完成状况===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>
View Code

附加申明

1.说说钩子是什么时刻触发的?

Vue文档源码:在实例化的时刻

function Vue(opt){    

    this._init(opt)

}
Vue.prototype._init(opt){
    ... 兼并选项
    ... 设置初始值 ,事宜 等数据
    initLifecycle(vm)
    callHook(vm, 'beforeCreate');
    ... 初始化选项等数据
    callHook(vm, 'created');
    ...猎取挂载的DOM 父节点
    callHook(vm, 'beforeMount');
    ...剖析模板成衬着函数,并实行衬着函数,生成DOM插进去页面
    vm._isMounted = true;
    callHook(vm, 'mounted');
}
// 组件更新时会挪用这个函数
Vue.prototype._update = function(

    vnode, hydrating

) {    

    if (vm._isMounted) {

        callHook(vm, 'beforeUpdate');
    }
    ...从新挪用衬着函数,对照旧节点和新节点,获得最小差别,然后只更新这部分页面
    callHook(vm, 'updated');
}
// 节点被移除时会挪用这个函数
Vue.prototype.$destroy = function() {
    callHook(vm, 'beforeDestroy');
    vm._isBeingDestroyed = true;
    ...实例被消弭,移除一切 watcher
    vm._isDestroyed = true;
    ...DOM被移除
    callHook(vm, 'destroyed');
}

 在实行钩子的时刻,会触发这个函数,遍历实行,绑定上下文

function callHook(vm, hook) {    

    // 是本身传入的 created 等回调

    var handlers = vm.$options[hook];    

    if (handlers) {        

    for (var i = 0,j = handlers.length; i < j; i++) {

            handlers[i].call(vm);
        }
    }
}

总结

1.经由历程简朴相识 Vue 生命周期的八个阶段,能够运用在以后的开辟中,针对差别的阶段的钩子采用差别的操纵,更好的完成我们的营业代码,处置惩罚越发庞杂的营业逻辑。

2.参考资料Vue官网

3.下一篇最先建立项目运用

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
Vue进修系列(四)——明白生命周期和钩子

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

本文来源:搜奇网

本文地址:https://www.sou7.cn/282189.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>