Vue生命周期函数 详解
以下是Vue生命周期函数的流程图和每个周期的代码详解：
流程图：
beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed
详解：
-
beforeCreate：
- 触发时机：在实例初始化之后，数据观测和事件配置之前被调用。
- 用途：在这个阶段，实例的数据和方法都还未初始化，可以进行一些初始化操作，如设置默认数据、引入插件等。
-
created：
- 触发时机：在实例创建完成后被立即调用。
- 用途：在这个阶段，实例已经完成了数据观测和事件配置，但尚未挂载到DOM上。可以进行一些异步操作，如发送网络请求获取数据。
-
beforeMount：
- 触发时机：在挂载开始之前被调用。
- 用途：在这个阶段，模板编译已经完成，但尚未将模板渲染到DOM中。可以进行一些DOM操作，如修改DOM结构、添加事件监听器等。
-
mounted：
- 触发时机：在挂载完成后被调用。
- 用途：在这个阶段，实例已经被挂载到DOM上，可以进行DOM操作。常见的操作包括获取DOM元素、初始化第三方库、开启定时器等。
-
beforeUpdate：
- 触发时机：在数据更新之前被调用。
- 用途：在这个阶段，数据已经更新，但尚未重新渲染DOM。可以进行一些数据的处理和准备工作。
-
updated：
- 触发时机：在数据更新完成后被调用。
- 用途：在这个阶段，DOM已经重新渲染完成。可以进行一些DOM操作，如获取更新后的DOM元素、操作DOM属性等。
-
beforeDestroy：
- 触发时机：在实例销毁之前被调用。
- 用途：在这个阶段，实例还可以访问到数据和方法。可以进行一些清理操作，如关闭定时器、解绑事件监听器等。
-
destroyed：
- 触发时机：在实例销毁之后被调用。
- 用途：在这个阶段，实例中的所有数据和方法都已经被清除，不能再访问。可以进行一些最后的清理操作，如释放内存、清除缓存等。
通过合理地使用这些生命周期函数，我们可以在不同的阶段执行特定的操作，从而更好地控制Vue实例的行为。
每个生命周期函数的代码示例：
- beforeCreate：
new Vue({beforeCreate() {// 在这个阶段可以进行一些初始化操作// 例如设置默认数据、引入插件等}
})
- created：
new Vue({created() {// 在这个阶段可以进行一些异步操作// 例如发送网络请求获取数据}
})
- beforeMount：
new Vue({beforeMount() {// 在这个阶段可以进行一些DOM操作// 例如修改DOM结构、添加事件监听器等}
})
- mounted：
new Vue({mounted() {// 在这个阶段可以进行一些DOM操作// 例如获取DOM元素、初始化第三方库、开启定时器等}
})
- beforeUpdate：
new Vue({beforeUpdate() {// 在这个阶段可以进行一些数据的处理和准备工作}
})
- updated：
new Vue({updated() {// 在这个阶段可以进行一些DOM操作// 例如获取更新后的DOM元素、操作DOM属性等}
})
- beforeDestroy：
new Vue({beforeDestroy() {// 在这个阶段可以进行一些清理操作// 例如关闭定时器、解绑事件监听器等}
})
- destroyed：
new Vue({destroyed() {// 在这个阶段可以进行一些最后的清理操作// 例如释放内存、清除缓存等}
})
以上是每个生命周期函数的基本用法，根据具体的需求，可以在这些函数中添加自己的逻辑代码。
整体示例详解生命周期
下面是一个完整的Vue实例示例，详细解释了每个生命周期函数的作用和使用方法：
new Vue({// 1. beforeCreatebeforeCreate() {// 在这个阶段可以进行一些初始化操作// 例如设置默认数据、引入插件等console.log('beforeCreate');},// 2. createdcreated() {// 在这个阶段可以进行一些异步操作// 例如发送网络请求获取数据console.log('created');},// 3. beforeMountbeforeMount() {// 在这个阶段可以进行一些DOM操作// 例如修改DOM结构、添加事件监听器等console.log('beforeMount');},// 4. mountedmounted() {// 在这个阶段可以进行一些DOM操作// 例如获取DOM元素、初始化第三方库、开启定时器等console.log('mounted');},// 5. beforeUpdatebeforeUpdate() {// 在这个阶段可以进行一些数据的处理和准备工作console.log('beforeUpdate');},// 6. updatedupdated() {// 在这个阶段可以进行一些DOM操作// 例如获取更新后的DOM元素、操作DOM属性等console.log('updated');},// 7. beforeDestroybeforeDestroy() {// 在这个阶段可以进行一些清理操作// 例如关闭定时器、解绑事件监听器等console.log('beforeDestroy');},// 8. destroyeddestroyed() {// 在这个阶段可以进行一些最后的清理操作// 例如释放内存、清除缓存等console.log('destroyed');}
})
当创建一个Vue实例时，它会依次执行每个生命周期函数。在控制台中运行以上代码，可以看到以下输出：
beforeCreate
created
beforeMount
mounted
这表明在Vue实例的生命周期中，beforeCreate和created阶段在实例创建之前被调用，beforeMount和mounted阶段在实例挂载到DOM之前被调用。
接下来，我们可以通过修改数据来触发更新，从而进入beforeUpdate和updated阶段。例如，我们可以在created函数中添加一个异步操作，然后在该操作完成后修改数据：
created() {// 模拟异步操作setTimeout(() => {// 修改数据this.message = 'Hello, Vue!';}, 1000);
}
在控制台中运行以上代码，可以看到以下输出：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
这表明在数据更新后，Vue实例会依次执行beforeUpdate和updated阶段。
最后，我们可以手动销毁Vue实例来触发beforeDestroy和destroyed阶段。例如，我们可以在mounted函数中添加一个定时器，然后在一定时间后销毁实例：
mounted() {// 模拟定时器this.timer = setInterval(() => {console.log('Timer');}, 1000);
},
beforeDestroy() {// 清除定时器clearInterval(this.timer);
}
在控制台中运行以上代码，可以看到以下输出：
beforeCreate
created
beforeMount
mounted
Timer
Timer
...
beforeDestroy
destroyed
这表明在手动销毁Vue实例时，Vue实例会依次执行beforeDestroy和destroyed阶段，并清除定时器。
通过以上示例，我们可以更好地理解每个生命周期函数的作用和使用方法，从而更好地控制Vue实例的行为。