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 中，我们可以初始化组件数据、绑定组件事件等操作。
// javascriptcn.com 代码示例
Vue.component('my-component', {
created() {
// This hook is called as soon as a component is created.
// You can perform any initialization work here.
console.log('Component created');
},
data() {
return {
message: 'Hello, Vue!',
};
},
methods: {
handleClick() {
console.log('Button clicked');
},
},
template: `<div>
<p>{{ message }}</p>
<button @click="handleClick">Click me</button>
</div>`,
});在上面的代码中，我们可以看到 created 函数中的初始化工作，比如定义了 message 数据，以及绑定了 handleClick 方法。
mounted
在 mounted 中，我们可以访问到组件引用的 DOM 元素，进而执行一些 DOM 操作。
// javascriptcn.com 代码示例
Vue.component('my-component', {
mounted() {
// This hook is called as soon as a component is added to the DOM.
// You can perform any DOM operation here.
const el = this.$el.querySelector('.my-element');
el.style.backgroundColor = 'red';
},
template: `<div class="my-element">This is a component</div>`,
});在上面的代码中，我们可以看到通过 mounted 进行的 DOM 操作，找到了组件元素中的 .my-element 元素，并将其背景颜色修改为红色。
总结
在 Vue 生命周期中，created 和 mounted 是两个重要的函数。它们的区别在于执行时机不同，created 在组件实例创建后立即执行，mounted 在组件被挂载到 DOM 上之后执行。我们可以根据不同的场景选择不同的函数来完成我们需要的操作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f90167d4982a6eb0b91af