vue生命周期
概念：vue的生命周期指的是vue实例从创建到挂载到销毁的过程，在这个过程中有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 钩子函数有如下:
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
话不多说先贴代码
<!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("el : " + this.$el); //undefined
console.log("data : " + this.$data); //undefined
console.log("message: " + this.message)//undefined
console.groupEnd()
},
created: function() {
console.group('------created创建完毕状态------');
console.log("el : " ,this.$el); //undefined
console.log("data : " ,this.$data); //已被初始化
console.log("message: " , this.message); //已被初始化
console.groupEnd()
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("el : " , this.$el); //已被初始化
console.log("data : " , this.$data); //已被初始化
console.log("message: " , this.message); //已被初始化
console.groupEnd()
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("el : " , this.$el); //已被初始化
console.log("data : " , this.$data); //已被初始化
console.log("message: " , this.message); //已被初始化
console.groupEnd()
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("el : " + this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
console.groupEnd()
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("el : " , this.$el);
console.log("data : " , this.$data);
console.log("message: " , this.message);
console.groupEnd()
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("el : " , this.$el);
console.log("data : " , this.$data);
console.log("message: " , this.message);
console.groupEnd()
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("el : " , this.$el);
console.log("data : " , this.$data);
console.log("message: " , this.message);
console.groupEnd()
}
})
setTimeout(function(){
console.log("更新")
vm.message = '触发组件更新'
},3000 )
</script>
</html>
运行后的结果
疑问的点：页面初始获取数据的请求是放在created还是mounted呢？
created：在实例创建完成后被立即调用。挂载阶段还没开始，el 属性目前尚不可用。也就是还没有dom节点
mounted：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
所以我建议放在created里
created在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
如果放在mounted，等dom渲染完毕, 你再去请求数据可能就会有空dom的情况。
