Vue中mounted和created有哪些区别

在Vue.js中，mounted和created是两个常用的生命周期钩子函数。它们在组件的生命周期中扮演着不同的角色，理解它们的区别对于编写高效的Vue应用至关重要。本文将详细探讨mounted和created的区别，并通过示例代码帮助读者更好地理解它们的使用场景。

1. 生命周期钩子概述

Vue组件的生命周期可以分为多个阶段，每个阶段都有对应的钩子函数。这些钩子函数允许开发者在组件的不同阶段执行特定的操作。常见的生命周期钩子包括：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

本文将重点讨论created和mounted这两个钩子函数。

2. created钩子函数

2.1 定义

created钩子函数在Vue实例被创建之后调用。在这个阶段，Vue实例已经完成了以下操作：

• 数据观测（data observation）
• 计算属性（computed properties）
• 方法（methods）
• 事件回调（event callbacks）

然而，此时DOM元素还没有被挂载，因此无法访问或操作DOM。

2.2 使用场景

created钩子函数通常用于以下场景：

• 数据初始化：在组件创建时，初始化数据或从服务器获取数据。
• 事件监听：设置事件监听器或订阅外部事件。
• 逻辑处理：执行一些不需要依赖DOM的逻辑处理。

2.3 示例代码

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  created() {
    console.log('Component created');
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟从服务器获取数据
      setTimeout(() => {
        this.message = 'Data fetched!';
      }, 1000);
    }
  }
};

在这个示例中，created钩子函数用于初始化数据并模拟从服务器获取数据。

3. mounted钩子函数

3.1 定义

mounted钩子函数在Vue实例挂载到DOM之后调用。在这个阶段，Vue实例已经完成了以下操作：

• 模板编译
• 虚拟DOM渲染
• 将渲染结果挂载到实际的DOM元素上

此时，可以访问和操作DOM元素。

3.2 使用场景

mounted钩子函数通常用于以下场景：

• DOM操作：访问或操作DOM元素，例如初始化第三方库（如jQuery插件）。
• 数据绑定：在DOM挂载后，执行依赖于DOM的数据绑定或操作。
• 异步操作：执行需要在DOM挂载后进行的异步操作。

3.3 示例代码

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  mounted() {
    console.log('Component mounted');
    this.initThirdPartyLibrary();
  },
  methods: {
    initThirdPartyLibrary() {
      // 初始化第三方库
      const element = document.getElementById('my-element');
      if (element) {
        element.textContent = 'Third-party library initialized!';
      }
    }
  }
};

在这个示例中，mounted钩子函数用于初始化第三方库并操作DOM元素。

4. created和mounted的区别

4.1 执行时机

• created：在Vue实例创建之后调用，此时DOM还未挂载。
• mounted：在Vue实例挂载到DOM之后调用，此时可以访问和操作DOM。

4.2 访问DOM

• created：无法访问或操作DOM。
• mounted：可以访问和操作DOM。

4.3 使用场景

• created：适用于数据初始化、事件监听和逻辑处理等不依赖DOM的操作。
• mounted：适用于DOM操作、数据绑定和异步操作等依赖DOM的操作。

4.4 示例对比

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  created() {
    console.log('Component created');
    console.log('DOM element:', document.getElementById('my-element')); // null
  },
  mounted() {
    console.log('Component mounted');
    console.log('DOM element:', document.getElementById('my-element')); // <div id="my-element"></div>
  }
};

在这个示例中，created钩子函数中尝试访问DOM元素时返回null，而在mounted钩子函数中可以成功访问DOM元素。

5. 总结

created和mounted是Vue组件生命周期中两个重要的钩子函数，它们在组件的不同阶段执行不同的操作。created钩子函数适用于数据初始化、事件监听和逻辑处理等不依赖DOM的操作，而mounted钩子函数适用于DOM操作、数据绑定和异步操作等依赖DOM的操作。理解它们的区别和使用场景，有助于编写更高效、更可靠的Vue应用。

在实际开发中，开发者应根据具体需求选择合适的钩子函数，以确保代码的正确性和性能。通过合理使用created和mounted，可以更好地控制组件的生命周期，提升应用的稳定性和用户体验。