我们先来看一下vue官网提供的vue实例生命周期图示:
官网提供的图上很详细的描述了一个vue实例的整个生命过程,从创建到销毁,从图上都能很直观的看出来;
那么,接下来,我再具体解释一下各个生命周期所做的事情:
beforeCreate()-创建前:data和methods的数据还未初始化;
created()-创建后:添加观察者,data的数据可以访问,methods的方法也可以调用,请求数据是异步的,宜早不宜迟; 此时,到了判断阶段,判断是否有el元素;
beforeMount()--挂载前:创建vm.$el替换el,实现真正的挂载;
mounted()--挂载后:挂载完毕,vue实例初始化完毕,可以操作dom了;
beforeUpdate()--更新前:可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程;
Updated()--更新后:虚拟dom重新渲染完并应用更新,源码中执行了updata();
beforeDestroy()--销毁前:解除绑定销毁钩子组件以及事件监听器;
destroyed()--销毁后:销毁完毕(并不是当前程序立即消失了,只是执行操作时,数据无任何变化);
从代码中观察vue实例的整个生命周期,可能会更直观一点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vuejs/vue.js"></script>
</head>
<body>
<!--
vue实例的生命周期简单演示
-->
<div id="app">
<div>{{msg}}</div>
<!-- 更新的话触发生命周期第五六阶段 -->
<button @click='updata'>更新</button>
<button @click='destroy'>销毁</button>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: '生命周期'
},
methods: {
updata: function() {
this.msg = 'hello'
},
destroy: function() {
// 销毁data中的内容 及methods中的内容
this.$destroy();
}
},
beforeCreate: function() {
console.log('beforeCreate');
},
created: function() {
console.log("created");
},
beforeMount: function() {
console.log("beforeMount");
},
mounted: function() {
console.log("mounted");
},
beforeUpdate: function() {
console.log('beforeUpdate');
},
updated: function() {
console.log("updated");
},
beforeDestroy: function() {
console.log("beforeDestroy");
},
destroyed: function() {
console.log("destroyed");
}
})
</script>
</html>