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

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

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

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

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

<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>