Vue入门和基础（二）
生命周期函数：
每个Vue实例被创建的时候都要经历一系列的初始化过程，这个过程就是Vue的生命周期
先上一张官图
其实官网上已经表明的很详细了，从图中我们可以看一个Vue实例的一整个生命周期中有很多个钩子函数，不用的钩子函数提供给我们在不同的时期进行操作，如图我们可以看出一共有八个这样的函数：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
下面就是一一介绍：
先上一段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的初始化过程</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a APP'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("el : " + this.$el); //undefined
console.log("data : " + this.$data); //undefined
console.log("message: " + this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log("el : " + this.$el); //undefined
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
})
</script>
</html>
运行代码在控制台查看得到结果：
我们可以看出在初始化之前，进行了数据的观测，而在created的时候 data已经进行了绑定。但是el还是undefined；
beforeMount - mounted：
这个时候对el是否存在进行了判断，如果存在就继续，如果不存在，Vue的生命周期在此处就结束了，el就是当前实例化挂载的dom节点。而在mounted之后，h1标签中的{{message}}变成了 This is a APP；
beforeUpdate - updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的初始化过程</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<p>{{num}}</p>
<button @click="add()">Add</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a APP',
num:1,
},
methods:{
add:function () {
this.num++;
}
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message)
}
})
</script>
</html>
运行上述代码并点击Add按钮控制台查看结果
这两个函数组件更新时触发。
beforeDestroy-destroyed：
beforeDestroy钩子函数在实例销毁之前调用。但是在此时，实例依然可以调用。
destroyed钩子函数在Vue 实例销毁后调用。整个实例被销毁。