创建期间的生命周期函数:
beforeCreate()
在beforeCreate() 生命周期函数执行的时候, data 和 methods 中的数据都还没有初始化
<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'ok',
},
methods: {
show() {
console.log('执行了');
}
},
beforeCreate() {
console.log(this.msg);
this.show();
},
});
</script>
</html>
页面显示
01.png
created()
在created中, data和methods已经初始化好了，如果要调用 methods 中的方法,或者操作 data 中的数据,最早只能在 created 中操作
<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'ok',
},
methods: {
show() {
console.log('执行了');
}
},
beforeCreate() {
console.log(this.msg);
this.show();
},
created() {
console.log(this.msg);
this.show();
}
});
</script>
</html>
页面显示
02.png
beforeMount()
表示模板已经编译完成,尚未把模板编译到页面中，在beforeMount 执行的时候, 页面中的元素,还没被真正替换过来,只是之前写的一些模板字符串
<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h3 id="h3">{{ msg }}</h3>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'ok',
},
methods: {
show() {
console.log('执行了');
}
},
beforeCreate() {
console.log(this.msg);
this.show();
},
created() {
console.log(this.msg);
this.show();
},
beforeMount() {
console.log(document.getElementById("h3").innerText);
}
});
</script>
</html>
页面显示
03.png
Mounted()
这是遇到的第四个生命周期函数,便是,内存中的模板已经真实的挂在到页面中,用已经可以看到渲染好的数据了
<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h3 id="h3">{{ msg }}</h3>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'ok',
},
methods: {
show() {
console.log('执行了');
}
},
beforeCreate() {
console.log(this.msg);
this.show();
},
created() {
console.log(this.msg);
this.show();
},
beforeMount() {
console.log(document.getElementById("h3").innerText);
},
mounted() {
console.log(document.getElementById("h3").innerText);
}
});
</script>
</html>
页面显示
04.png
组件的运行阶段的函数
beforeUpdate()
当data发生改变的时候会触发，页面中的显示的数据,还是旧的,此时的 data是最新的,页面尚未和 最新的数据保持同步
<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改msg的值" @click="msg='No'">
<h3 id="h3">{{ msg }}</h3>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'ok',
},
methods: {
show() {
console.log('执行了');
}
},
beforeCreate() {
console.log(this.msg);
this.show();
},
created() {
console.log(this.msg);
this.show();
},
beforeMount() {
console.log(document.getElementById("h3").innerText);
},
mounted() {
console.log(document.getElementById("h3").innerText);
},
beforeUpdate() {
console.log('页面上的元素是:' + document.getElementById("h3").innerText);
console.log('data中的数据是:' + this.msg);
},
});
</script>
</html>
页面显示
05.png
updated()
表示data改变之后，updated事件执行的时候,页面和data 数据已经保持同步了,都是最新的
<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改msg的值" @click="msg='No'">
<h3 id="h3">{{ msg }}</h3>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'ok',
},
methods: {
show() {
console.log('执行了');
}
},
beforeCreate() {
console.log(this.msg);
this.show();
},
created() {
console.log(this.msg);
this.show();
},
beforeMount() {
console.log(document.getElementById("h3").innerText);
},
mounted() {
console.log(document.getElementById("h3").innerText);
},
beforeUpdate() {
console.log('页面上的元素是:' + document.getElementById("h3").innerText);
console.log('data中的数据是:' + this.msg);
},
updated() {
console.log('页面上的元素是:' + document.getElementById("h3").innerText);
console.log('data中的数据是:' + this.msg);
}
});
</script>
</html>
06.png
组件的销毁阶段运行的函数
beforeDestory()
beforeDestory()执行的时候,实例身上所有的data和所有的methods，以及过滤器、指令.....都处于可用状态,此时还没有真正执行行销毁的过程
destroyed()
当执行到destoryed函数的时候，组件已经被完全销毁了，此时,组件中所有的数据、方法指令、过滤器....都已经不可以用了
lifecycle.png
