<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{msg}} <br>
<button @click="destroy">Destroy</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip=false;
new Vue({
el:"#app",
data:{
msg:"hello vue666",
timer:""
},
methods:{
destroy(){this.$destroy()}
},
//初始化阶段
beforeCreate(){
//Vue刚刚开始初始化;事件相关的机制已经比较完整了;可以注册事件并触发事件的
/*this.$on("test",(flag)=>{console.log("test",flag)});
this.$emit("test",123)*/
//在beforeCreate钩子中只完成了自定义事件的初始化
//数据的转绑 数据的响应式都还没有开始执行
this.msg = "xxx"
},
created(){
//完成了数据的转绑 数据的响应式
// this.msg = "xxx";
//最早可以发送ajax请求的地方;
//在created钩子中所有的挂载相关的工作都还没有开始执行
//不能进行dom操作;不能相信dom;因为dom还没有被渲染
},
beforeMount(){
//挂载前
console.log("beforeMount",this.$el);
},
mounted(){
//挂载后 可以进行UI效果的编写
console.log("mounted",this.$el);
this.timer = setInterval(()=>{
console.log("setInterval")
this.msg+="6"
},1000)
},
//响应式阶段
beforeUpdate(){
//响应式前
console.log("beforeUpdate")
},
updated(){
//响应式后
console.log("updated")
},
//死亡阶段
beforeDestroy(){console.log("beforeDestroy")},
destroyed(){
//收尾!!!
clearInterval(this.timer)
console.log("destroyed")
}
})
</script>
</html>
Vue钩子生命周期函数
最新推荐文章于 2023-08-17 00:43:35 发布