Vue 是现代前端开发中使用最广泛的框架之一，Vue 提供了一系列的生命周期函数来管理组件的不同阶段。其中，created 和 mounted 是最常用的两个生命周期函数，但是这两个函数有着不同的作用和使用方式。本文将主要介绍 created 和 mounted 的区别以及使用方法，并结合示例代码进行说明。
created 和 mounted
在介绍 created 和 mounted 的区别之前，先简单介绍一下这两个函数。
created 函数表示组件实例创建完成后，立即执行的函数。在这个函数内部，你可以访问组件的 props，初始化数据，进行方法和事件的绑定等。
mounted 函数表示组件已经被挂载到 DOM 上之后执行的函数。在这个函数内部，你可以访问到组件引用的 DOM 元素，执行一些 DOM 操作，或者初始化其他插件等。
区别
从上面的描述可以看出，created 和 mounted 函数的最大区别在于执行的时机不同。created 函数在组件实例创建后立即执行，而 mounted 则是在组件被挂载到 DOM 上之后执行。这样的区别，决定了这两个函数的使用场景和作用不同。
created
created 函数在组件实例创建后立即执行，这个时候 DOM 元素还没有被渲染，所以你无法访问到组件引用的 DOM 元素。但是你可以在这个函数内部进行组件数据的初始化、事件的绑定等操作。
mounted
mounted 函数在组件被挂载到 DOM 上之后执行，这个时候组件引用的 DOM 元素已经被渲染到页面上了。所以你可以在这个函数内部进行 DOM 操作，比如查找元素、修改元素属性、绑定事件等。
使用方法
根据上面介绍的区别，我们可以根据具体的场景来选择使用 created 或 mounted。如果我们需要初始化一些数据、绑定一些事件等，就可以选择 created。如果我们需要对组件引用的 DOM 元素进行操作，就可以使用 mounted。
created
在 created 中，我们可以初始化组件数据、绑定组件事件等操作。
-- -------------------- ---- -------
----------------------------- -
--------- -
-- ---- ---- -- ------ -- ---- -- - --------- -- --------
-- --- --- ------- --- -------------- ---- -----
---------------------- ----------
--
------ -
------ -
-------- ------- ------
--
--
-------- -
------------- -
------------------- ----------
--
--
--------- ------
----- ------- ------
------- -------------------------- -----------
--------
---在上面的代码中，我们可以看到 created 函数中的初始化工作，比如定义了 message 数据，以及绑定了 handleClick 方法。
mounted
在 mounted 中，我们可以访问到组件引用的 DOM 元素，进而执行一些 DOM 操作。
-- -------------------- ---- -------
----------------------------- -
--------- -
-- ---- ---- -- ------ -- ---- -- - --------- -- ----- -- --- ----
-- --- --- ------- --- --- --------- -----
----- -- - --------------------------------------
------------------------ - ------
--
--------- ----- ----------------------- -- - -----------------
---在上面的代码中，我们可以看到通过 mounted 进行的 DOM 操作，找到了组件元素中的 .my-element 元素，并将其背景颜色修改为红色。
总结
在 Vue 生命周期中，created 和 mounted 是两个重要的函数。它们的区别在于执行时机不同，created 在组件实例创建后立即执行，mounted 在组件被挂载到 DOM 上之后执行。我们可以根据不同的场景选择不同的函数来完成我们需要的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652f90167d4982a6eb0b91af