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. beforeCreate
  beforeCreate() {
    // 在这个阶段可以进行一些初始化操作
    // 例如设置默认数据、引入插件等
    console.log('beforeCreate');
  },
  
  // 2. created
  created() {
    // 在这个阶段可以进行一些异步操作
    // 例如发送网络请求获取数据
    console.log('created');
  },
  
  // 3. beforeMount
  beforeMount() {
    // 在这个阶段可以进行一些DOM操作
    // 例如修改DOM结构、添加事件监听器等
    console.log('beforeMount');
  },
  
  // 4. mounted
  mounted() {
    // 在这个阶段可以进行一些DOM操作
    // 例如获取DOM元素、初始化第三方库、开启定时器等
    console.log('mounted');
  },
  
  // 5. beforeUpdate
  beforeUpdate() {
    // 在这个阶段可以进行一些数据的处理和准备工作
    console.log('beforeUpdate');
  },
  
  // 6. updated
  updated() {
    // 在这个阶段可以进行一些DOM操作
    // 例如获取更新后的DOM元素、操作DOM属性等
    console.log('updated');
  },
  
  // 7. beforeDestroy
  beforeDestroy() {
    // 在这个阶段可以进行一些清理操作
    // 例如关闭定时器、解绑事件监听器等
    console.log('beforeDestroy');
  },
  
  // 8. destroyed
  destroyed() {
    // 在这个阶段可以进行一些最后的清理操作
    // 例如释放内存、清除缓存等
    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实例的行为。