【vue深入学习第1章】探索 Vue 2 的生命周期:从创建到销毁

cnblogs 2024-07-15 15:11:00 阅读 96

Vue.js 是一个渐进式的 JavaScript 框架,用于构建用户界面。理解 Vue 的生命周期是掌握这个框架的关键之一。在这篇博客中,我们将深入探讨 Vue 2 的生命周期,并通过代码示例来展示每个生命周期钩子的作用。

Vue 实例的生命周期

Vue 实例的生命周期可以分为四个主要阶段:

  1. 创建阶段:初始化事件和生命周期钩子。
  2. 挂载阶段:将模板编译成 DOM 并挂载到实例上。
  3. 更新阶段:当响应式数据变化时,重新渲染 DOM。
  4. 销毁阶段:清理实例,解绑事件和 DOM。

生命周期钩子

Vue 提供了一系列的生命周期钩子函数,让我们可以在实例的不同阶段执行代码。以下是 Vue 2 的生命周期钩子:

  1. <code>beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. activated
  8. deactivated
  9. beforeDestroy
  10. destroyed

代码示例

我们通过一个简单的 Vue 实例来演示这些生命周期钩子的使用。

<!DOCTYPE html>

<html>

<head>

<title>Vue 2 Lifecycle Example</title>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>code>

</head>

<body>

<div >

<p>{{ message }}</p>

<button @click="updateMessage">Update Message</button>code>

</div>

<script>

new Vue({

el: '#app',

data: {

message: 'Hello, Vue!'

},

beforeCreate() {

console.log('beforeCreate: 实例初始化之前');

},

created() {

console.log('created: 实例已经创建');

},

beforeMount() {

console.log('beforeMount: 模板编译之前');

},

mounted() {

console.log('mounted: 模板已经挂载');

},

beforeUpdate() {

console.log('beforeUpdate: 数据更新之前');

},

updated() {

console.log('updated: 数据更新之后');

},

beforeDestroy() {

console.log('beforeDestroy: 实例销毁之前');

},

destroyed() {

console.log('destroyed: 实例已经销毁');

},

methods: {

updateMessage() {

this.message = 'Message Updated!';

}

}

});

</script>

</body>

</html>

解释

  1. beforeCreate:在 Vue 实例初始化之前调用,此时数据和事件都还没有被初始化。
  2. created:在实例创建完成后调用,此时数据和事件都已经被初始化,但模板还没有编译。
  3. beforeMount:在挂载开始之前调用,相关的 render 函数首次被调用。
  4. mounted:在挂载完成后调用,此时 DOM 已经被渲染。
  5. beforeUpdate:在数据更新之前调用,发生在虚拟 DOM 重新渲染和打补丁之前。
  6. updated:在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
  7. beforeDestroy:在实例销毁之前调用,此时实例仍然完全可用。
  8. destroyed:在实例销毁之后调用。调用后,Vue 实例指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁。

总结

理解 Vue 的生命周期钩子可以帮助我们在适当的时间点执行代码,从而更好地控制应用的行为。通过这些钩子,我们可以在实例的创建、更新和销毁过程中插入自定义逻辑,满足各种需求。

百万大学生都在用的AI写论文工具,篇篇无重复👉: AI写论文



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。