Vue生命周期函数 详解

以下是Vue生命周期函数的流程图和每个周期的代码详解：

流程图：

    beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

详解：

1. beforeCreate：

   • 触发时机：在实例初始化之后，数据观测和事件配置之前被调用。
   • 用途：在这个阶段，实例的数据和方法都还未初始化，可以进行一些初始化操作，如设置默认数据、引入插件等。

2. created：

   • 触发时机：在实例创建完成后被立即调用。
   • 用途：在这个阶段，实例已经完成了数据观测和事件配置，但尚未挂载到DOM上。可以进行一些异步操作，如发送网络请求获取数据。

3. beforeMount：

   • 触发时机：在挂载开始之前被调用。
   • 用途：在这个阶段，模板编译已经完成，但尚未将模板渲染到DOM中。可以进行一些DOM操作，如修改DOM结构、添加事件监听器等。

4. mounted：

   • 触发时机：在挂载完成后被调用。
   • 用途：在这个阶段，实例已经被挂载到DOM上，可以进行DOM操作。常见的操作包括获取DOM元素、初始化第三方库、开启定时器等。

5. beforeUpdate：

   • 触发时机：在数据更新之前被调用。
   • 用途：在这个阶段，数据已经更新，但尚未重新渲染DOM。可以进行一些数据的处理和准备工作。

6. updated：

   • 触发时机：在数据更新完成后被调用。
   • 用途：在这个阶段，DOM已经重新渲染完成。可以进行一些DOM操作，如获取更新后的DOM元素、操作DOM属性等。

7. beforeDestroy：

   • 触发时机：在实例销毁之前被调用。
   • 用途：在这个阶段，实例还可以访问到数据和方法。可以进行一些清理操作，如关闭定时器、解绑事件监听器等。

8. destroyed：

   • 触发时机：在实例销毁之后被调用。
   • 用途：在这个阶段，实例中的所有数据和方法都已经被清除，不能再访问。可以进行一些最后的清理操作，如释放内存、清除缓存等。

通过合理地使用这些生命周期函数，我们可以在不同的阶段执行特定的操作，从而更好地控制Vue实例的行为。

每个生命周期函数的代码示例：

1. beforeCreate：

new Vue({beforeCreate() {// 在这个阶段可以进行一些初始化操作// 例如设置默认数据、引入插件等}
})

2. created：

new Vue({created() {// 在这个阶段可以进行一些异步操作// 例如发送网络请求获取数据}
})

3. beforeMount：

new Vue({beforeMount() {// 在这个阶段可以进行一些DOM操作// 例如修改DOM结构、添加事件监听器等}
})

4. mounted：

new Vue({mounted() {// 在这个阶段可以进行一些DOM操作// 例如获取DOM元素、初始化第三方库、开启定时器等}
})

5. beforeUpdate：

new Vue({beforeUpdate() {// 在这个阶段可以进行一些数据的处理和准备工作}
})

6. updated：

new Vue({updated() {// 在这个阶段可以进行一些DOM操作// 例如获取更新后的DOM元素、操作DOM属性等}
})

7. beforeDestroy：

new Vue({beforeDestroy() {// 在这个阶段可以进行一些清理操作// 例如关闭定时器、解绑事件监听器等}
})

8. 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实例的行为。