Vue生命周期
代码 Vue.js发表于2018年11月17日15:43:46
更新于2018年11月17日15:50:26
0条评论 161次阅读
一、前言
在使用Vue.js写代码的过程中，虽然懂得生命周期created和mounted在什么时候调用，但对Vue生命周期却没有一个整体的理解。昨天花了点时间，看了看相关的文章，整理了一下
二、Vue生命周期
1、钩子函数
Vue生命周期中有4组8个钩子函数。分别是beforeCreate,created ; beforeMount,mounted ; beforeUpdate,updated ; beforeDestory,destoryed.
图示如下:
2、代码理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命周期学习</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
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创建完毕状态------');
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.innerHTML); //打印"{{message}}"
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.innerHTML); //打印"Vue的生命周期"
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeUpdate: function() {
console.group('beforeUpdate 更新前状态===============》');
//Chrome控制台执行 vm.message = "更新信息"
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el.innerHTML); //打印"Vue的生命周期"
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.innerHTML); //打印"更新信息"
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.innerHTML);
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.innerHTML);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message)
}
})
</script>
</html>
参考:https://segmentfault.com/a/1190000011381906?utm_source=tag-newest
3、详解
通过代码和图示其实已经能够看出Vue生命周期，知道了钩子函数在何时调用。在这里我再简明扼要的说一下。
1) beforeCreated到created
在这个时期，主要完成了数据的初始化，数据的观察，此时数据还没有挂载到Dom树,不进行渲染。。
验证:
在created函数的打印中可以看到能够打印出 this.$data , this.message 并且this.$el为undefined。
控制台输入vm.message = "观察变化" , 回车再输入vm.$data即可看到 , 观察到了数据的变化
2) created到beforeMount
这个时期，首先会观察对象中是否有el选项，有的话，再找有没有template选项，有template的话则将template编译传递到render函数，有render函数将HTML片段渲染到页面，没有template则将outerHTML当做模板进行渲染。如果没有el选项，则停止进行等待，直到vm.$mount("#app")函数进行调用。
验证:
首先注释掉实例代码中的"el"选项，可以看到页面渲染{{message}},Chrome控制台输入vm.$mount("#app"),页面渲染Vue的生命周期。
在代码中添加template: "<div>哈哈哈</div>",，刷新页面，然后Chrome控制台输入vm.$mount("#app")，可以看到页面渲染哈哈哈。这里说明template渲染优先级大于outerHTML
添加没有函数体的render函数。刷新页面，然后Chrome控制台输入vm.$mount("#app")，可以看到页面啥也没渲染，说明render函数承担着数据渲染的功能。添加函数体return createElement('h1', 'this is createElement')（注意参数createElement）。页面渲染this is createElement说明render渲染优先级大于template
3)beforeMount到mounted
这个阶段或创建vm.$el，并将DOM上的相应元素替换
验证:
观察示例代码的打印，在beforeMount函数中this.$el.innerHTML打印{{message}}，说明此时Vue实例中的数据并没有替换掉相应DOM上的元素。而mounted函数中的this.$el.innerHTML打印Vue的生命周期，说明替换完成。
4)beforeUpdate到updated
虚拟DOM树中更改了数据，再将差异更新到DOM树。
验证:
Chrome控制台输入vm.message = "观察更新",观察示例代码打印，在beforeUpdate中，this.$el.innerHTML打印Vue的生命周期，updated中则打印观察更新，说明在beforeUpdate阶段DOM树中没更新，updated阶段DOM已更新。
5)beforeDestory到destoryed
此阶段，观察者，子组件，事件监听等都销毁了。
验证:
Chrome控制台输入vm.destory(),再输入vm.message = "销毁Vue实例"可以看到页面并没有更新。
三、结语
其实之前对Vue的懂得不是特别多，虽然我也使用了Vue写了几个小项目，最近刚写完一个小项目后，想学习一下React，在学之前，又简单看了一下Vue的文档，看了一下生命周期的图示，就想研究一下，于是也就有了这篇文章。在这里记录一下，供自己复习学习，也供读者研究。
文章参考自详解vue生命周期。
首发与vHanblog : http://blog.docmobile.cn/artical/1542440626648
