快速理解Vue2.0的生命周期和钩子函数-vue起步之每天一点vue~

    选择打赏方式

微信公众号伊伊兔Yi-Yi-Tu,QQ群号:455535550,淘宝天猫优惠劵领取网站:dy208.cn

3346068135-580822cd52898_articlex.png

从上图可以看出现在vue2.0都包括了哪些生命周期的函数

说白了就是组件生命周期 hook 在组件树中的调用时机

复制下面的代码可以直接在浏览器运行

<!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 : "劳资跳起来就是一共么么哒!-子成君zcjun.com" 
      },
       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)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            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>

运行结果

22:37:34.564 2.html:21 beforeCreate 创建前状态===============》
22:37:34.567 2.html:22 el     : undefined
22:37:34.569 2.html:23 data   : undefined
22:37:34.570 2.html:24 message: undefined
22:37:34.576 2.html:27 created 创建完毕状态===============》
22:37:34.577 2.html:28 el     : undefined
22:37:34.577 2.html:29 data   : [object Object]
22:37:34.579 2.html:30 message: 劳资跳起来就是一共么么哒!-子成君zcjun.com
22:37:34.596 2.html:33 beforeMount 挂载前状态===============》
22:37:34.597 2.html:34 el     : [object HTMLDivElement]
22:37:34.598 2.html:35 <div id="app">…</div>
22:37:34.604 2.html:36 data   : [object Object]
22:37:34.605 2.html:37 message: 劳资跳起来就是一共么么哒!-子成君zcjun.com
22:37:34.614 2.html:40 mounted 挂载结束状态===============》
22:37:34.614 2.html:41 el     : [object HTMLDivElement]
22:37:34.615 2.html:42 <div id="app">…</div>
22:37:34.616 2.html:43 data   : [object Object]
22:37:34.617 2.html:44 message: 劳资跳起来就是一共么么哒!-子成君zcjun.com

可以很清楚地看到,各个钩子函数在组件树中调用的先后顺序。


实际上,此处可以对照 DOM 事件的捕获和冒泡过程来看:
=========================
beforeCreate 、 created 、 beforeUpdate 、 beforeDestroy 是在“捕获”过程中调用的;
mounted 、 updated 、 destroyed 是在“冒泡”过程中调用的。
同时,可以看到,在初始化流程、 update 流程和销毁流程中,子级的相应声明周期方法都是在父级相应周期方法之间调用的。比如子级的初始化钩子函数( beforeCreate 、 created 、 mounted )都是在父级的 created 和 mounted 之间调用的,这实际上说明等到子级准备好了,父级才会将自己挂载到上一层 DOM 树中去,从而保证界面上不会闪现脏数据。

=========================
实验结束,附上总结:

beforeCreated:我们在用Vue时都要进行实例化,因此,该函数就是在Vue实例化是调用,也可以将他理解为初始化函数比较方便一点,在Vue1.0时,这个函数的名字就是init。
created:在创建实例之后进行调用。
mounted:我们可以将他理解为原生js中的window.onload=function({.,.}),或许大家也在用jquery,所以也可以理解为jquery中的$(document).ready(function(){….}),相信讲解了这两个例子,也就理解了这个函数的功能了,他的功能就是:在dom文档渲染完毕之后将要执行的函数,该函数在Vue1.0版本中名字为compiled。
beforeDestroy:该函数将在销毁实例前进行调用
destroyed:改函数将在销毁实例时进行调用 
=========================
参考文献:

https://www.jianshu.com/p/3e91a1c42397

https://blog.csdn.net/qq_36529459/article/details/78762731

https://segmentfault.com/a/1190000008010666?utm_source=tag-newest

版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:快速理解Vue2.0的生命周期和钩子函数-vue起步之每天一点vue~ https://www.zcjun.com/learn/307.html
百度收录:本文已提交百度暂未被收录!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!