Vue 中 created 钩子函数的作用是什么？

推荐答案

在 Vue 中，created 钩子函数是 Vue 实例生命周期中的一个重要阶段。它会在 Vue 实例创建完成后立即调用。在这个阶段，Vue 实例已经完成了数据观测（data observation）、计算属性（computed properties）、方法（methods）、事件回调（event callbacks）等的初始化，但尚未挂载到 DOM 上。

created 钩子函数通常用于执行一些初始化操作，比如发起网络请求、初始化数据、设置定时器等。由于此时 DOM 还未生成，因此不能在这个阶段进行 DOM 操作。

本题详细解读

1. created 钩子函数的执行时机

created 钩子函数在 Vue 实例创建完成后立即执行。具体来说，它是在以下步骤之后执行的：

• 数据观测（data observation）已经完成。
• 计算属性（computed properties）和方法（methods）已经初始化。
• 事件回调（event callbacks）已经设置。

2. created 钩子函数的常见用途

• 数据初始化：可以在 created 钩子函数中对数据进行初始化操作，比如从服务器获取数据并赋值给 Vue 实例的 data 属性。
• 定时器设置：可以在这个阶段设置定时器，比如轮询服务器数据。
• 事件监听：可以在这个阶段添加事件监听器，比如监听窗口大小变化等。

3. created 钩子函数与 mounted 钩子函数的区别

• created：在 Vue 实例创建完成后立即调用，此时 DOM 还未生成，因此不能进行 DOM 操作。
• mounted：在 Vue 实例挂载到 DOM 后调用，此时可以进行 DOM 操作。

4. 示例代码

// www.javascriptcn.com code example
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created() {
    // 数据初始化
    this.message = 'Hello from created hook!';
    // 发起网络请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.message = data.message;
      });
  }
});

在这个示例中，created 钩子函数用于初始化 message 数据，并发起一个网络请求来更新 message。