- it技术
- 12.Vue生命周期
Vue8个生命周期
顺序生命周期
1beforeCreate(创建前)2created(创建后)3beforeMount(载入前)4mounted(载入后)5beforeUpdate(更新前)6updated(更新后)7beforeDestroy(销毁前)8destroyed(销毁后)
1. 代码
<!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>Vue生命周期
</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}
</p>
<input type="text" v-model="msg"/>
</div>
<input type="button" value="销毁方法" onclick="destVue()"/>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
msg:"abc"
},
beforeCreate(){
console.group("===>beforeCreate");
console.log("实例对象:",this);
console.log("$el:",this.$el);
console.log("$data:",this.$data);
console.groupEnd();
},
created(){
console.group("===>created");
console.log("实例对象:",this);
console.log("$el:",this.$el);
console.log("$data:",this.$data);
console.groupEnd();
},
beforeMount(){
console.group("===>beforeMount");
console.log("实例对象:",this);
console.log("$el:",this.$el);
console.log("$data:",this.$data);
console.groupEnd();
},
mounted(){
console.group("===>mounted");
console.log("实例对象:",this);
console.log("$el:",this.$el);
console.log("$data:",this.$data);
console.groupEnd();
},
beforeUpdate(){
console.group("===>beforeUpdate");
console.log("实例对象:",this);
console.log("$el:",this.$el);
console.log("$data:",this.$data);
console.log("msg:",this.msg);
console.groupEnd();
},
updated(){
console.group("===>updated");
console.log("实例对象:",this);
console.log("$el:",this.$el);
console.log("$data:",this.$data);
console.log("msg:",this.msg);
console.groupEnd();
},
beforeDestroy(){
console.group("===>beforeDestroy");
console.log("实例对象:",this);
console.log("$el:",this.$el);
console.log("$data:",this.$data);
console.groupEnd();
},
destroyed(){
console.group("===>destroyed");
console.log("实例对象:",this);
console.log("$el:",this.$el);
console.log("$data:",this.$data);
console.groupEnd();
}
});
function destVue(){
vm.$destroy();
}
</script>
</html>
2. 运行结果
