Vue 基础【3】— 生命周期
2020-11-23 本文已影响0人
弱冠而不立
生命周期示例图：
各个生命周期的作用
| 生命周期 | 描述 |
|---|---|
| beforeCreate | 组件实例被创建之前，组件的属性生效之前 |
| created | 组件实例已经被创建，属性也绑定了，但是真实DOM未生成，$el不可用 |
| beforeMount | 开始挂载之前被调用，首次调用render函数 |
| mounted | 实例被挂载到DOM上之后被调用 |
| beforeUpdate | data中数据是新的，但是页面上的数据还没更新 |
| update | 组件数据更新之后，页面和data数据已经同步 |
| activated | keep-alive专属，组件被激活时调用 |
| deactivated | keep-alive专属，组件被销毁时调用 |
| beforeDestory | 组件被销毁前调用 |
| destoryed | 组件被销毁时调用 |
对于生命周期的规律，可以自己写个小样例来探究一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lifeCycle-demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ message }}</div>
<input type="text" v-model="message">
<button @click="destroyApp">destroyApp</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
destroyApp: function() {
//清理它与其它实例的连接，解绑它的全部指令及事件监听器。
console.log(this.$destroy());
}
},
beforeCreate() {
console.group("----------beforeCreate状态----------");
console.log("this.$el:", this.$el);
console.log("this.$data:", this.$data);
console.log("this.message", this.message);
},
created() {
console.group("---------created状态-----------");
console.log("this.$el:", this.$el);
console.log("this.$data:", this.$data);
console.log("this.message", this.message);
},
beforeMount() {
console.group("---------beforeMount状态-----------");
console.log("this.$el:", this.$el);
console.log("this.$data:", this.$data);
console.log("this.message", this.message);
},
mounted() {
console.group("---------mounted状态-----------");
console.log("this.$el:", this.$el);
console.log("this.$data:", this.$data);
console.log("this.message", this.message);
},
beforeUpdate() {
console.group("---------beforeUpdate状态-----------");
console.log("this.$el:", this.$el);
console.log("this.$data:", this.$data);
console.log("this.message--data中的数据", this.message);
console.log("页面上的数据",document.getElementById("msg").innerText);
},
updated() {
console.group("---------updated状态-----------");
console.log("this.$el:", this.$el);
console.log("this.$data:", this.$data);
console.log("this.message--data中的数据", this.message);
console.log("页面上的数据",document.getElementById("msg").innerText);
},
beforeDestroy() {
console.group("---------beforeDestroy状态-----------");
console.log("this.$el:", this.$el);
console.log("this.$data:", this.$data);
console.log("this.message", this.message);
},
destroyed() {
console.group("---------destroyed状态-----------");
console.log("this.$el:", this.$el);
console.log("this.$data:", this.$data);
console.log("this.message", this.message);
},
})
</script>
</html>
页面初次加载时的状态
页面数据更新的状态
页面销毁的状态，实例被完全销毁。清理它与其它实例的连接，解绑它的全部指令及事件监听器。双向绑定也失效了
