Vue 初始化获取数据应该放到 Created 还是 Mounted 中？

Vue 初始化获取数据应该放到 Created 还是 Mounted 中？

vue生命周期函数

分析
按理来说，用created和mounted获取后端初始化数据能达到的效果是一致的，只不过使用mounted时，显示的数据有可能是页面渲染完成后，页面的响应式效果将数据显示在页面中；而created是获取到数据再渲染到页面中。所以将数据初始化放到created中的话，逻辑上是比较合适的。

但并不是说，这是一种绝对的操作，数据初始化就一定要写死在created中。比如说你需要用到dom操作：使用echarts时，如果你将数据获取放在了created的话，它会有出现无数据的情况（有时候确实又有数据），那时由于在用echarts钩子的时候,需要用ref获取dom元素，在dom初始化之前调用ref是无法获取到的。在使用echarts的时候，获取数据是需要写到mounted中的。

还有一种情况就是，created中放了很多同步代码或者一个需要执行很长很长时间的数据获取代码的话，会出现打开页面白屏很长的时间（什么都不显示），这对用户体验来说，是十分不友好的，用户可能会认为你的服务器烂到爆炸。所以当有初始化数据执行时间长的同步方法，是推荐放到mounted中的。

原文链接：https://blog.csdn.net/interestANd/article/details/121329103

Vue生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期的函数，这给了用户在不同阶段添加自己的代码的机会。

1. beforeCreate（创建前）
2. created （创建后）
3. beforeMount (载入前)
4. mounted （载入后）
5. beforeUpdate （更新前）
6. updated （更新后）
7. beforeDestroy（ 销毁前）
8. destroyed （销毁后）

Vue生命周期函数就是vue实例在某一个时间点会自动执行的函数
当Vue对象创建之前触发的函数（beforeCreate）

Vue对象创建完成触发的函数(Created)

当Vue对象开始挂载数据的时候触发的函数(beforeMount)

当Vue对象挂载数据的完成的时候触发的函数(Mounted)

Vue对象中的data数据发生改变之前触发的函数 (beforeUpdate)

Vue对象中的data数据发生改变完成触发的函数(Updated)

Vue对象销毁之前触发的函数 (beforeDestroy)

Vue对象销毁完成触发的函数(Destroy)

<template>
    <div id="app">
        <input type="button" value="修改msg" @click="msg='No'">
        <h3 id="h3">
            {{msg}}
    	</h3>
    </div>
</template>


<script>
	// 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'ok'
        },
        methods: {
            show(){
                console.log("执行了show方法")
            }
        },
        beforeCreate(){ //这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
            console.log(this.msg)
            this.show()
            // 注意：在 beforeCreate 生命周期函数执行的时候，data 和 methods 中 数据都还没有初始化
        },
        created(){  // 这是遇到的第二个生命周期函数
            console.log(this.msg)
            this.show()
            // 在 created 中， data 和 methods 都已经初始化好了
            // 如果要调用 methods 中的方法， 或者操作 data 中的数库， 最早，只能在 created 
        },
        beforeMount(){ // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
            console.log(document.getElementById('h3').innerText)
            // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
        },
        mounted(){ // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面
            console.log(document.getElementById('h3').innerText)
            // 注意：mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例，就静静的躺在内存中，一动不动（组件已经脱离了创建阶段，进入到运行阶段）
            // 如果要通过某些插件操作页面上的DOM节点，最早要在 mounted 中进行
            
        },
        
        // 接下来是运行中的两个事件
        beforeUpdate(){ // 这时候，表示 我们的界面还没有被更新（数据更新了）
            console.log('界面上元素的内容：' + document.getElementById('h3').innerText)  // ok
            console.log('data 中的 msg 数据是：' + this.msg) // No 
            // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和最新的数据保持同步
        }
    })
</script>