最近搞了搞vue的生命周期，所以记一下自己的一些理解。首先上图：
<!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.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
methods:{
init(){
console.log('这是一个方法!')
}
}
})
</script>
</html>
一. 创建
1. 创建前 - beforeCreate
代码：
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
console.log("%c%s", "color:red","methods : " + this.init);
}
执行结果：
2. 创建时
(1). 数据观测： 向 Vue 的响应式系统中加入了其 data 对象中能找到的所有属性
利用 es5 特性 Object.defineProperty,遍历data对象下所有属性,将其转化为getter/setter,以便拦截对象赋值与取值操作,然后利用发布/订阅者模式,从而实现数据的双向绑定!
(2). 初始化事件: 将methods 下的所有方法进行声明
3.创建后 - created
代码：（注释掉el选项，防止其他生命周期影响）
// el: '#app',
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
console.log("%c%s", "color:red","methods : " + this.init);
},
执行结果：
二. 挂载
1. 挂载前 - beforeMount
(2). 确定挂载模板；模板的产生主要有三种：render函数，template选项，外部HTML（即el所指元素）。且优先级为：render函数>template选项>外部HTML（即el所指元素）
2. 挂载后 - mounted
<!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.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
template: "<h1>{{message +'----这是在template中的'}}</h1>",
// render: function(createElement) {
// return createElement('h1', 'this is createElement')
// },
methods:{
init(){
console.log('这是一个方法!')
}
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
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(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
}
})
</script>
</html>
确定的挂载模板为template选项，虚拟DOM为外部HTML 执行结果：
三. 更新
1. 更新前 - beforeUpdate
代码：
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log(this.$el.innerHTML);
console.log("%c%s", "color:red","message: " + this.message);
},
控制台输入 vm.message = '触发组件更新'
执行结果：
变化前修改message：
beforeUpdate: function () {
console.log(this.$el.innerHTML);
this.message = '我又改回来了，嘿嘿！'
console.log("%c%s", "color:red","message: " + this.message);
},
执行结果：
2. 更新后 - updated
重新渲染虚拟 dom,并通过 diff 算法对比 vnode 节点差异更新真实 dom 代码：
updated: function () {
console.group('updated 更新完成状态===============》');
console.log(this.$el);
console.log("%c%s", "color:red","message: " + this.message);
},
执行结果：
四. 销毁
1. 销毁前 - beforeDestroy
实例还在，还是可以调用的
2. 销毁后 - destroyed
实例销毁后，Vue 实例的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁，dom 和属性方法虽然都还存在,但改变他们将不再生效!
代码：
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
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(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
控制台输入： vm.$destroy()
执行结果：
以上是自己对vue生命周期的理解，欢迎小伙伴们一起探讨指教。
参考：
