2024-07-18 • 猿知识点

Vue.js 生命周期详解与代码实践

在Vue.js的开发过程中，理解其生命周期是非常重要的。Vue实例从创建到销毁的过程，就是其生命周期。在这个过程中，Vue.js提供了多个钩子函数，允许我们在不同的阶段执行特定的代码。本文将详细解析Vue.js的生命周期，并通过代码实践来加深理解。

一、Vue.js 生命周期概述

Vue.js的生命周期主要包括以下几个阶段：

创建前/后：在Vue实例被创建之前/之后调用。
挂载前/后：在Vue实例被挂载到DOM之前/之后调用。
更新前/后：当Vue实例的数据发生变化，导致虚拟DOM重新渲染和打补丁之前/之后调用。
销毁前/后：在Vue实例被销毁之前/之后调用。

二、Vue.js 生命周期钩子函数

Vue.js提供了以下生命周期钩子函数：

beforeCreate：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个内联模板，当编译的模板替换当前元素时，该钩子将被调用。
beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中访问现有的DOM，比如手动移除已添加的事件监听器。
updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也都会被销毁。

三、Vue.js 生命周期代码实践

下面是一个简单的Vue实例，用于展示如何在生命周期钩子函数中执行代码：

<template>  
  <div>  
    <p>{{ message }}</p>  
    <button @click="updateMessage">更新消息</button>  
    <button @click="destroyInstance">销毁实例</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello Vue!'  
    };  
  },  
  methods: {  
    updateMessage() {  
      this.message = 'Vue is awesome!';  
    },  
    destroyInstance() {  
      this.$destroy();  
    }  
  },  
  beforeCreate() {  
    console.log('beforeCreate：实例创建前');  
  },  
  created() {  
    console.log('created：实例创建后');  
    // 这里可以访问data、methods、computed等属性  
  },  
  beforeMount() {  
    console.log('beforeMount：挂载前');  
  },  
  mounted() {  
    console.log('mounted：挂载后');  
    // 这里可以访问DOM元素  
  },  
  beforeUpdate() {  
    console.log('beforeUpdate：数据更新前');  
  },  
  updated() {  
    console.log('updated：数据更新后');  
  },  
  beforeDestroy() {  
    console.log('beforeDestroy：实例销毁前');  
  },  
  destroyed() {  
    console.log('destroyed：实例销毁后');  
  }  
}  
</script>

在上面的代码中，我们为Vue实例添加了所有的生命周期钩子函数，并在每个钩子函数中打印了一条消息。这样，我们就可以通过控制台输出看到Vue实例在生命周期的各个阶段的行为。

四、总结

Vue.js的生命周期是开发Vue应用时必须理解的重要概念。通过在不同的生命周期钩子函数中执行特定的代码，我们可以更好地控制Vue实例的行为，实现更复杂的功能。希望本文能够帮助你更好地理解Vue.js的生命周期，并通过代码实践加深理解。