从初学者到专家的指南：Vue中的created和mounted的区别

前端

2023-09-18 09:22:01

---------------------------------------------

Vue中的生命周期钩子

Vue的生命周期钩子是Vue实例在不同阶段执行的函数。这些钩子允许您在特定时间执行特定的操作，例如：

在实例创建时执行操作（created）
在实例挂载到DOM时执行操作（mounted）
在实例更新时执行操作（updated）
在实例销毁时执行操作（destroyed）

created和mounted之间的区别

created和mounted是两个最常用的生命周期钩子。它们之间的主要区别在于执行的时机：

created ：created钩子在实例创建时执行，即在实例化时执行。此时，实例还没有挂载到DOM中。
mounted ：mounted钩子在实例挂载到DOM时执行。此时，实例已经完全初始化，并且可以与DOM交互。

什么时候使用created和mounted钩子？

created和mounted钩子都可以用于执行各种操作，但它们通常用于不同的目的。

created ：created钩子通常用于执行一些初始化操作，例如：
- 获取数据
- 设置属性
- 监听事件
mounted ：mounted钩子通常用于执行一些与DOM相关的操作，例如：
- 操纵DOM
- 绑定事件处理程序
- 启动动画

示例

以下是一个简单的示例，演示了如何使用created和mounted钩子：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  created() {
    // 获取数据
    this.getData();
  },
  mounted() {
    // 操纵DOM
    this.$el.querySelector('h1').style.color = 'red';
  },
  methods: {
    getData() {
      // 获取数据
      this.message = 'Data fetched successfully!';
    }
  }
}
</script>