vue的生命周期有哪些阶段
更新时间：2023-07-09创建阶段
当用new Vue()创建一个新的Vue实例时，会经历一些初始化过程，这就是Vue的生命周期创建阶段。在这个阶段中，Vue会按照一定的顺序调用一些特定的生命周期钩子函数，包括beforeCreate、created和beforeMount等。下面我们来逐一介绍这些钩子函数的用途和特点。
new Vue({
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
}
})
在上面的代码中，我们为Vue实例定义了四个生命周期钩子函数，分别输出console信息。它们的执行顺序如下：
- beforeCreate：在实例初始化之后，创建数据观测器之前调用。这个阶段的数据还未初始化，因此在这里获取不到data、methods等实例属性。
- created：在实例创建完成后立即执行。此时，实例已经完成了数据的观测和属性的计算，但没有开始编译模板或挂载DOM元素。
- beforeMount：在挂载开始之前被调用。此时，模板编译已经完成，但并未进行DOM的渲染。
- mounted：在挂载结束后调用，即DOM元素已经成功渲染。注意，这里没有保证所有的子组件也都已经被挂载。
挂载阶段
一旦挂载过程开始，Vue就会尝试将模板渲染成最终的DOM。在挂载阶段中，常用的生命周期钩子函数是beforeUpdate和updated，它们分别在数据更新之前和之后触发。
new Vue({
data() {
return {
message: 'Hello, Vue!'
}
},
beforeUpdate() {
console.log('beforeUpdate:', this.message);
},
updated() {
console.log('updated:', this.message);
}
})
在上述代码中，我们创建了一个Vue实例，并定义了一个响应式的数据message，同时定义了beforeUpdate和updated两个钩子函数，用来监听数据的变化状态。它们的执行顺序如下：
- beforeUpdate：在数据更新之前执行，此时data中的数据已经发生了变化，但DOM还没有被重新渲染。
- updated：在数据更新之后执行，此时DOM已经重新渲染完成，数据和视图已经保持同步。
更新阶段
除了挂载过程中数据的更新，Vue还提供了一些特殊的方法和钩子函数，用于手动或自动更新组件的数据和状态。这就是Vue的生命周期更新阶段，其中包括了activated、deactivated和beforeDestroy等常用的钩子函数。
new Vue({
data() {
return {
list: ['apple', 'banana', 'orange']
}
},
methods: {
addItem() {
this.list.push('pear');
}
},
activated() {
console.log('activated:', this.list);
},
deactivated() {
console.log('deactivated');
},
beforeDestroy() {
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
}
})
在这个代码片段中，我们创建了一个Vue实例，并定义了一个响应式数据list和两个方法，用来动态添加数据。同时，我们还定义了三个生命周期函数，它们的执行顺序如下：
- activated：在keep-alive组件激活时执行，主要用于处理组件的逻辑，如更新数据、获取网络数据等。
- deactivated：在keep-alive组件停用时执行，主要用于清理组件的状态，如清空数据、释放资源等。
- beforeDestroy：在组件销毁之前执行，此时实例仍然完全可用。
- destroyed：在组件销毁之后执行，此时实例脱离了所有的指令和DOM元素，所有的事件监听器和watcher也将被移除。
销毁阶段
最后，我们来看一下Vue的生命周期销毁阶段，这个阶段包括了beforeDestroy和destroyed两个钩子函数，用于在组件被彻底销毁之前做一些清理工作。
const vm = new Vue({
data() {
return {
count: 0
}
},
created() {
const handler = () => {
this.count++
};
window.addEventListener('click', handler);
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('click', handler);
console.log('removed click handler');
})
},
beforeDestroy() {
console.log('beforeDestroy:', this.count);
},
destroyed() {
console.log('destroyed');
}
})
setTimeout(() => {
ReactDOM.unmountComponentAtNode(document.getElementById('app'));
}, 5000);
在这个例子中，我们创建了一个Vue实例，并定义了一个计数器count和一个事件监听器handler，用于处理点击事件。同时，我们还为Vue实例定义了beforeDestroy和$once两个钩子函数，用于清理事件监听器。它们的执行顺序如下：
- beforeDestroy：在组件销毁之前执行，此时实例仍然完全可用。在这里我们移除了之前绑定的事件监听器，避免内存泄漏。
- destroyed：在组件销毁之后执行，此时实例脱离了所有的指令和DOM元素，所有的事件监听器和watcher也将被移除。在这里我们输出了一个console信息，以便调试和检查代码是否正确。
