1.挂载阶段:
挂载阶段里又分别触发四个钩子函数,该阶段当中的钩子只执行一次
beforeCreate:创建之前
created:创建完成
beforeMount:挂载之前
mounted:完成挂载
看以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="myApp">
<div id="userName" ref="userInfo">{{userName}}</div>
</div>
</body>
<script>
new Vue({
data:{
userName:"zhangsan"
},
methods:{
fn(){
console.log(this.userName);
}
},
beforeCreate(){
console.group("*************************beforeCreate")
console.log(this.userName);// undefined
console.log(this.fn);// undefined
console.log(this.$refs.userInfo);// undefined
console.log(document.querySelector("#userName"))//
console.groupEnd();
},
created(){
console.group("*************************created")
console.log(this.userName);// undefined
console.log(this.fn);// undefined
console.log(this.$refs.userInfo);// undefined
console.log(document.querySelector("#userName"))// null
console.groupEnd();
},
beforeMount(){
console.group("*************************beforeMount")
console.log(this.userName);// undefined
console.log(this.fn);// undefined
console.log(this.$refs.userInfo);// undefined
console.log(document.querySelector("#userName"))// null
console.groupEnd();
},
mounted(){
console.group("*************************mounted")
console.log(this.userName);// undefined
console.log(this.fn);// undefined
console.log(this.$refs.userInfo);// undefined
console.log(document.querySelector("#userName"))// null
console.log(this.$refs.userInfo === document.querySelector("#userName"))
console.groupEnd();
}
}).$mount("#myApp")
</script>
</html>
2.运行阶段:
beforeUpdate:更新VIEW之前
updated:更新VIEW之后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="myApp">
<input type="text" v-model="userName">
<div id="userName" ref="userInfo">{{userName}}</div>
</div>
</body>
<script>
new Vue({
data:{
userName:"zhangsan"
},
methods:{
fn(){
console.log(this.userName);
}
},
// 视图的更新
beforeUpdate(){
console.group("*************************beforeUpdate")
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.userInfo.innerHTML);
console.log(document.querySelector("#userName").innerHTML)
console.groupEnd();
},
updated(){
console.group("*************************updated")
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.userInfo.innerHTML);
console.log(document.querySelector("#userName").innerHTML)//
if(this.userName=== "zhaoliu"){
this.userName= "赵六"
}
console.groupEnd();
}
}).$mount("#myApp")
</script>
</html>
3.销毁阶段
beforeDestory:销毁之前
destoryed:销毁之后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue.js"></script>
</head>
<body>
<input type="button" value="销毁" onclick="fn()">
<div id="myApp">
<input type="text" v-model="userName">
<h1>{{num}}</h1>
<div id="userName" ref="userInfo">{{userName}}</div>
</div>
</body>
<script>
const vm = new Vue({
data:{
userName:"zhangsan",
num:0,
timer:null
},
methods:{
fn(){
console.log(this.userName);
}
},
mounted(){
this.timer = setInterval(()=>{
console.log(this.num)
this.num+=1;
},100)
},
// 视图的更新
beforeDestroy(){
console.group("*************************beforeDestroy")
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.userInfo.innerHTML);
console.log(document.querySelector("#userName").innerHTML)
console.groupEnd();
},
destroyed(){
clearInterval(this.timer);
console.group("*************************destroyed")
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.userInfo);
console.log(document.querySelector("#userName").innerHTML)//
console.groupEnd();
}
}).$mount("#myApp");
function fn() {
vm.$destroy();
}
</script>
</html>