快速理解Vue2.0的生命周期和钩子函数-vue起步之每天一点vue~
本站已不再更新,最新资源请前往zcjun.com获取!
从上图可以看出现在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
发表吐槽
你肿么看？
既然没有吐槽，那就赶紧抢沙发吧！