Vue获取初始化数据是放在created还是mounted
更新时间：2023-09-12
前言：
在Vue开发中，数据的初始化是一个非常重要的过程。Vue提供了两个生命周期钩子函数来处理数据的初始化：created和mounted。这两个钩子函数在组件生命周期的不同阶段被触发，可以用来初始化数据，但它们的执行时机略有不同。在本文中，将探讨在Vue中获取初始化数据应该放在created还是mounted中。
一、created钩子函数：
created钩子函数是在Vue实例被创建之后立即调用的。此时，Vue实例已经完成了数据观测（data observer）和事件初始化（event initialization），但尚未挂载DOM。因此，对于大多数情况来说，created钩子函数是获取初始化数据的首选位置。
下面是一个示例，演示如何在created钩子函数中获取初始化数据：
created() {
// 发送异步请求获取初始化数据
fetchData().then(data => {
this.initData = data;
});
},
在created钩子函数中，我们可以使用异步请求（如axios或fetch）获取数据，并且可以在组件的data属性中定义一个变量（如initData）来保存初始化数据。这样，在该钩子函数执行完毕后，我们就可以使用这些数据来渲染组件。
二、mounted钩子函数：
mounted钩子函数是在Vue实例挂载到DOM之后调用的。此时，Vue实例已经通过编译器将模板渲染成了最终的DOM，并且可以访问到挂载的元素。因此，mounted钩子函数适合处理需要进行DOM操作或使用第三方库的情况，并不适合用来获取初始化数据。
下面是一个示例，展示了在mounted钩子函数中进行DOM操作的用法：
mounted() {
this.$refs.title.innerText = "Hello, Vue!";
},
在mounted钩子函数中，我们可以使用Vue实例的特殊属性$this来访问到挂载的元素。例如，可以通过this.$refs来引用一个元素，并修改它的内容或样式。
总结：
综上所述，Vue的created和mounted钩子函数都可以用来初始化数据，但它们的执行时机不同。一般情况下，我们应该将获取初始化数据的逻辑放在created钩子函数中，因为此时Vue实例已经完成了数据观测和事件初始化，而且可以在组件的data属性中定义变量来保存初始化数据。而mounted钩子函数适合用来进行DOM操作或使用第三方库。当然，在一些特殊场景下，也可以根据具体需求灵活选择使用不同的钩子函数。要确保数据在渲染之前已经准备好，以避免出现渲染错误的情况。 
