vue生命周期及钩子函数
2020-06-12 本文已影响0人
岚平果
beforeCreate (实例创建前)
实例组件刚开始创建，元素dom和数据都还没有初始化
应用场景：可以在这加个loading事件
created (实例创建后)
数据data已经初始化完成，方法也已经可以调用，但是dom为渲染，在这个周期里面如果进行请求是可以改变数据并渲染，由于dom未挂载，请求过多或者占用时间过长会导致页面线上空白
应用场景：在这结束loading，还做一些初始化，实现函数自执行
beforeMoute (元素挂载前)
dom未完成挂载，数据初始化完成，但是数据的双向绑定还是{{}},这是因为vue采用了虚拟dom技术。
mouted (元素挂载后)
数据和dom都完成挂载，在上一个周期占位的数据把值渲染进去，一般请求会放在这个地方，因为这边请求改变数据之后刚好能渲染。
beforeUpdate (实例更新前)
只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候就会执行这个周期，如果没有数据改变不执行。
updated (实例更新后)
只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的，beforeUpdated和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和死循环。
beforeDestory (实例销毁前)
实例销毁之前调用，在这一步，实例仍然完全可用。
destory (实例销毁后)
vue实例销毁后调用，调用后，vue实例指示的所有内容都会解除绑定，所有的事件监听器都会被移除，所有的子实例也会被销毁。
实例一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue的生命周期实例一</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" />
{{msg}}
</div>
<button onclick="destory()">销毁</button>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
msg:'这是一个消息'
},
beforeCreate() {
// 可以在这加个loading事件
console.log('vue实例创建前:' + this.msg+','+this.$el);
// 数据data和dom都还没有初始化
},
created() {
console.log('vue实例创建后:'+this.msg+','+this.$el);
// 数据data初始化完成，dom还没有初始化完成
},
beforeMount() {
console.log('元素挂载前:');
console.log(this.$el);
},
mounted() {
console.log('元素挂载后:');
console.log(this.$el);
},
beforeUpdate() {
console.log('实例更新前');
console.log(this.msg);
console.log(this.$el);
},
updated() {
console.log('实例更新后');
console.log(this.msg);
console.log(this.$el);
},
beforeDestroy() {
console.log('实例销毁前');
console.log(this.msg);
},
destroyed() {
console.log('实例销毁后');
console.log(this.msg);
}
});
function destory(){
console.log('destory')
vm.$destroy();
}
</script>
</body>
</html>
实例一结果:
image.png
image.png
实例二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue的生命周期实例二</title>
</head>
<body>
<div id="app">
{{name}}
</div>
<button onclick="destory()">销毁实例</button>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
name:'一只流浪的kk',
age:18
},
beforeCreate(){
console.log('============实例创建前=============');
console.log(this.$el); //undefined
console.log(this.$data);//undefined
},
created(){
console.log('============实例创建后=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
},
beforeMount(){
console.log('============元素挂载前=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
},
mounted(){
console.log('============元素挂载后=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
},
beforeUpdate(){
console.log('============实例更新前=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
},
updated(){
console.log('============实例更新后=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
},
beforeDestroy(){
console.log('============实例销毁前=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
},
destroyed(){
console.log('============实例销毁后=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
}
});
function destory(){
vm.$destroy();
}
</script>
</body>
</html>
实例二结果:
image.png
总结
- beforeCreate() :
此时 $el、data 的值都为undefined,即el 和 data 并未初始化 。 - create(): 此时可以拿到data的值，但是$el依旧为undefined，即data完成了 数据的初始化，el没有。
- beforeMounte(): $el的值为“虚拟”的元素节点,dom未完成挂载，数据初始化完成，但是数据的双向绑定还是{{}},这是因为vue采用了虚拟dom技术。
- mouted(): 数据和dom都完成挂载，在上一个周期占位的数据把值渲染进去，一般请求会放在这个地方，因为这边请求改变数据之后刚好能渲染。
