首先我们对Vue生命周期官方给出的图进行详细解释
-
什么是生命周期?
-
简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程
-
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程
-
生命周期方法?
-
Vue从生到死的过程中伴随着各种各样的事件,这些事件会自动触发一些方法.这些方法我们统称为生命周期方法
-
生命周期钩子 = 生命周期函数 = 生命周期事件
-
-
创建期间生命周期方法
-
beforeCreate:
-
created:
-
beforeMount
-
mounted
-
运行期间生命周期方法
-
beforeUpdate
-
updated
-
销毁期间的生命周期方法
-
beforeDestroy
-
destroyed
代码解释:
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Vue生命周期方法
</title>
-
<!--引入vue框架-->
-
<script src="js/vue.js">
</script>
-
</head>
-
<body>
-
<div id="app">
-
<p>
{{msg}}
</p>
-
</div>
-
-
<script>
-
-
let vm =
new Vue({
-
el:
'#app',
-
data:{
-
msg:
"IT程序员的日常"
-
},
-
methods:{
-
say:
function () {
-
console.log(
"IT程序员的日常");
-
}
-
},
-
beforeCreate:
function () {
-
/*执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,data/methods都没有初始化*/
-
//console.log(this.msg);
-
//this.say();
-
//console.log(this.say);
-
},
-
created:
function () {
-
/*执行created的时候,表示Vue实例已经初始化好了部分内容,data/methods
-
* 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问
-
*/
-
//console.log(this.msg);
-
//this.say();
-
// console.log(this.say);
-
},
-
beforeMount:
function () {
-
/*执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上*/
-
// console.log(document.querySelector("p").innerText);
-
// console.log(document.querySelector("p").innerHTML);
-
},
-
mounted:
function () {
-
/*执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了*/
-
console.log(
document.querySelector(
"p").innerText);
-
console.log(
document.querySelector(
"p").innerHTML);
-
},
-
beforeUpdate:
function(){
-
/*主要data中的数据发生了变化就会执行
-
* 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据
-
*
-
* */
-
// console.log(this.msg);
-
// console.log(document.querySelector("p").innerText);
-
// console.log(document.querySelector("p").innerHTML);
-
},
-
updated:
function () {
-
/*主要data中的数据发生了变化就会执行
-
* 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新
-
*
-
* */
-
console.log(
this.msg);
-
console.log(
document.querySelector(
"p").innerText);
-
console.log(
document.querySelector(
"p").innerHTML);
-
},
-
beforeDestroy:
function(){
-
/*执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用
-
* 最后能使用Vue实例的地址
-
* */
-
},
-
destroyed:
function () {
-
/*
-
* 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了
-
* */
-
}
-
-
})
-
</script>
-
</body>
-
</html>
转载：https://blog.csdn.net/FengyCoder/article/details/85227113
查看评论