Vue原理研究之生命周期
2018-05-08 本文已影响364人
reneeChoi
前言
我们要知晓Vue生命周期钩子怎么用？我们写的东西挂载在哪里？就必须要清楚Vue的生命周期。
Vue生命周期钩子函数
什么是生命周期钩子函数？
生命周期是指对象从构建到销毁的整个过程。
钩子函数是指在每个Vue实例被创建时都要经过一系列的初始化过程中执行性的函数。其中初始化过程包括设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。
Vue的生命周期的8个阶段
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed
自己敲了一遍代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message: "this is an message."
},
//组件实例刚被创建，组件属性计算之前
beforeCreate:function(){
console.log("%cbeforeCreate","color:red");
console.log("el: "+this.$el);//undefined
console.log("data: "+this.$data);//undefined
console.log("message: "+this.message);
},
//组件实例创建完成，属性已绑定，但DOM还未生成
created:function(){
console.log("%ccreated","color:red");
console.log("el: "+this.$el);//undefined
console.log("data: "+this.$data);
console.log("message: "+this.message);
},
//模板编译/挂载之前
beforeMount:function(){
console.log("%cbeforeMount","color:red");
console.log("el: "+this.$el);
console.log("data: "+this.$data);
console.log("message: "+this.message);
},
//模板编译/挂载之后（不保证组件已在document中）
mounted:function(){
console.log("%cmounted","color:red");
console.log("el: "+this.$el);
console.log("data: "+this.$data);
console.log("message: "+this.message);
},
//组件更新之前
beforeUpdate:function(){
console.log("%cbeforeUpdate","color:red");
console.log("el: "+this.$el);
console.log("data: "+this.$data);
console.log("message: "+this.message);
},
//组件更新之后
updated:function(){
console.log("%cupdated","color:red");
console.log("el: "+this.$el);
console.log("data: "+this.$data);
console.log("message: "+this.message);
},
//组件销毁之前
beforeDestroy:function(){
console.log("%cbeforeDestory","color:red");
console.log("el: "+this.$el);
console.log("data: "+this.$data);
console.log("message: "+this.message);
},
//组件销毁之后
destroyed:function(){
console.log("%cdestroyed","color:red");
console.log("el: "+this.$el);
console.log("data: "+this.$data);
console.log("message: "+this.message);
}
})
</script>
</body>
</html>
执行步骤
- 页面初始化的时候会执行beforeCreate, created, beforeMounted, mouted钩子函数
初始化vue实例
- 在chrome console执行 vm.message = "update", 将会执行beforeUpdate, updated钩子函数
更新数据
- 在Chrome console里执行 vm.$destroy(), 将会执行destroyed钩子函数
销毁数据
如何应用？
beforeCreate： loading事件，
created： 可以进行Ajax请求取回数据
beforeMount：--
mounted： 挂载元素，获取dom节点
beforeUpdate：--
updated：如果对数据统一处理，在这里写上相应函数
beforeDestory：可以做一个确认停止事件的确认框
destoryed：--
通过上面的了解，我们再看官网的图，就会觉得简单易懂了。
Vue生命周期流程图
