vuecreated和mounted区别

`Vue` 中的 `created` 和 `mounted` 都是生命周期钩子函数，用于在组件的不同阶段执行特定的逻辑。在理解 `created` 和 `mounted` 的区别之前，我们需要先了解整个组件的生命周期。

组件的生命周期可分为八个阶段，分别是：

1. 创建阶段（Creation）

- `beforeCreate`: 在实例初始化之后，响应式数据和事件的初始化之前触发。

- `created`: 在实例创建完成后触发，此时实例已经完成数据观测，但尚未在 DOM 中进行渲染。

2. 模板编译阶段（Compilation）

- `beforeMount`: 在 `Vue` 实例挂载到 DOM 之前触发，此时模板已经编译完成，但尚未插入到 DOM 中。

3. 挂载阶段（Mounting）

- `mounted`: 在 `Vue` 实例挂载到 DOM 后触发，此时实例已经完成了 `DOM` 渲染，可以对 `DOM` 进行操作。

4. 更新阶段（Updating）

- `beforeUpdate`: 在数据更新之前触发，可以在此时对数据进行操作。

- `updated`: 在数据更新之后触发，此时组件已经完成了数据更新，`DOM` 也已经重新渲染完成。

5. 销毁阶段（Destruction）

- `beforeDestroy`: 在实例销毁之前触发，此时组件实例仍然可以访问。

- `destroyed`: 在实例销毁之后触发，此时组件实例已经被完全销毁，无法再访问。

综上所述，`created` 阶段是在组件实例创建完成后触发的，此时实例已经创建完成，但尚未挂载到 `DOM` 中，所以在 `created` 阶段中无法直接操作 `DOM`。典型的用例是在 `created` 阶段中进行异步数据请求，或者进行一些初始化的工作。

`mounted` 阶段是在组件实例挂载到 `DOM` 后触发的，此时组件已经完成了 `DOM` 渲染，可以对 `DOM` 进行操作。在 `mounted` 阶段中，可以访问到组件的 `DOM` 节点以及其它已经挂载的子组件。典型的用例是在 `mounted` 阶段中进行一些需要在 `DOM` 中进行的操作，例如初始化第三方插件、绑定事件监听器等。

在 `created` 和 `mounted` 阶段中，可以使用 `this` 访问组件实例的属性和方法，例如 `this.$data` 可以访问组件的数据对象，`this.$el` 可以访问组件的根元素。

为了更好地理解 `created` 和 `mounted` 的区别，让我们来看一个简单的示例：

```html

```

在上面的示例中，当组件实例创建完成并且数据观测完成后，`created` 钩子被触发。在 `created` 钩子中，我们将 `message` 的值改为 "Hello

created!"，然后打印出 `message` 的值。此时组件实例已经创建完成，但尚未挂载到 `DOM` 中，所以不会有任何 `DOM` 的变化。

接下来，当组件实例被挂载到 `DOM` 中后，`mounted` 钩子被触发。在 `mounted` 钩子中，我们将 `message` 的值改为 "Hello

mounted!"，然后再次打印出 `message` 的值。此时组件已经完成了 `DOM` 的渲染，所以在控制台中可以看到输出的 `message` 值为 "Hello

mounted!"，并且页面上的文本也会更新为 "Hello

mounted!"。

综上所述，`created` 阶段适合进行组件实例的初始化操作，例如数据请求、订阅事件等，而 `mounted` 阶段适合进行 `DOM` 相关的操作，例如初始化第三方库、绑定事件监听器等。

需要注意的是，`mounted` 钩子在组件中只会被触发一次，而 `created` 钩子每个实例都会触发一次。这意味着，如果一个组件被多次使用，那么 `mounted` 钩子只会在*次挂载到 `DOM` 时触发，后续的组件实例都不会再触发 `mounted` 钩子。而 `created` 钩子会在每个实例都被触发。

综上所述，`created` 和 `mounted` 在组件生命周期中的触发时机和用途是不同的，正确理解它们的区别能够帮助我们更好地使用 `Vue.js` 开发应用程序。