本文共 2859 字，大约阅读时间需要 9 分钟。
Vue作为一款流行的前端框架，其实例的生命周期管理非常重要。了解生命周期钩子能够帮助开发者更好地控制实例的创建、挂载、更新及销毁过程。本文将详细解析Vue的生命周期、组件的初始化流程以及常用钩子的应用场景。
Vue实例从创建到销毁，经历以下生命周期钩子：
beforeCreate（创建前）
在实例初始化完成后，数据观测和事件配置之前触发。这个钩子函数中，实例中的数据、方法等尚未准备完成，无法访问实例属性或方法。created（创建后）
实例创建完成，数据观测、属性计算、事件配置完成，但尚未挂载到DOM中。此时可以执行异步数据获取或对实例数据的初始化操作。beforeMount（载入前）
挂载开始之前触发，相关的渲染函数首次被执行。这个钩子适用于在挂载之前对DOM元素进行准备操作。mounted（载入后）
挂载完成后触发。此时可以安全地访问DOM元素，并执行与DOM相关的初始化操作。beforeUpdate（更新前）
数据更新之前触发，适用于在更新前对DOM元素进行准备或清理操作。updated（更新后）
数据更新完成后触发，适用于在更新后对DOM元素进行更新操作或处理。beforeDestroy（销毁前）
实例销毁之前触发，适用于清理未绑定的事件监听或释放资源。destroyed（销毁后）
实例销毁完成后触发，所有绑定的事件监听被移除，子实例也会被销毁。Vue实例的初始化过程主要包括以下几个步骤：
new Vue(options)
Vue实例的创建入口，接收一个包含数据、方法、事件监听等配置的选项对象。初始化实例属性
将选项中的数据、计算属性、方法等属性复制到实例中。调用生命周期钩子
按照顺序调用beforeCreate、created、beforeMount、mounted等钩子函数。挂载实例到DOM中
如果没有指定el属性，需要手动调用$mount方法将实例挂载到指定的DOM元素中。beforeCreate钩子执行时，实例的数据和方法尚未准备完毕。因此，在这个钩子函数中，不能访问实例中的数据或方法。以下是示例：
new Vue({ data: { msg: 'linlin' }, methods: { getLists() { return 'aaa' } }, beforeCreate() { console.log('beforeCreate', this.msg, this.getLists()) }}) 执行此代码会报错，因为this在beforeCreate钩子中尚未被赋值。
created钩子执行时，实例已经完成了初始化，数据观测和事件配置也完成了。可以在这个钩子中执行异步数据获取或对实例数据的初始化操作。以下是示例：
new Vue({ data: { imgs: null }, methods: { getLists() { this.$http.get(url).then(res => { this.imgs = res.data.lists console.log(this.imgs) }) } }, created() { this.getLists() }}) beforeMount钩子执行时，挂载开始之前触发，可以准备DOM元素的初始状态。mounted钩子执行时，挂载完成后触发，可以访问DOM元素。以下是示例：
let app = new Vue({ data: { itemList: [1, 2, 3] }, created() { setTimeout(() => { this.arr = [4, 5, 6, 7] console.log('created', document.querySelectorAll('li').length) }) }, beforeMount() { console.log('beforeMount', document.querySelectorAll('li').length) }, mounted() { console.log('mounted', document.querySelectorAll('li').length) }}) beforeUpdate钩子执行时，数据更新之前触发，可以执行清理操作。updated钩子执行时，数据更新完成后触发，可以执行更新操作。以下是示例：
let app = new Vue({ data: { arr: [1, 2, 3] }, methods: { getAdd() { this.arr = [4, 5, 6, 7] } }, updated() { console.log('updated', this.arr) }}) 在created钩子中对DOM操作的延迟处理可以通过nextTick方法实现。nextTick将回调函数延迟到下一次DOM更新后执行。以下是示例：
new Vue({ data: { arr: [1, 2, 3] }, methods: { getAdd() { this.arr = [4, 5, 6, 7] } }, created() { setTimeout(() => { this.arr = [4, 5, 6, 7] this.$nextTick(() => { console.log('nextTick', document.querySelectorAll('li').length) }) }, 1000) }}) beforeDestroy钩子执行时，实例销毁之前触发，可以清理未绑定的事件监听。destroyed钩子执行时，实例销毁完成后触发。以下是示例：
let app = new Vue({ beforeDestroy() { console.log('beforeDestroy') }, destroyed() { console.log('destroyed') }})app.$destroy() 通过以上内容，可以清晰地了解Vue实例的生命周期及其钩子的使用场景。
转载地址：http://sycp.baihongyu.com/