标签：Vue 函数 created 获取 mounted 数据

最近在开发时遇到了个小坑，在没详细了解Vue的生命周期前，总以为mounted函数一定会在created函数完成后执行，但实则不然。

如果呈现在页面上的数据是静态的，比如说像下面这样数据是写死不变化的，那么mounted函数中的方法获取模型层中的这些值是能获取的↓

export default {
    data() {
        return {
			dataList: [1,2，3,4，5,6]
        };
    },

注意注意注意！但如果大家的模型层数据是从后台动态响应返回的，那么你肯定会遇到这么一个问题，为什么我mounted函数中的方法获取模型层数据是空的了？？

经过我查看了：Vue.js 生命周期官方介绍，我才了解到：created和mounted执行时，异步初始化还没执行（还没执行完），也就是created里的数据还没获取到，mounted就开始了渲染视图的工作，那么这时模型层数据肯定就是为空的啦，而mounted只会调用一次，这就陷入了一个死局，mounted永远等不到created获取完数据后在渲染，那么解决的方法就是为mounted中的方法设置一个定时器，因为created获取数据的速度是很快的，我们只用让mounted停那么一丢丢时间就ok了！

解决方法：设定等待一个时间，确保你的初始值都已经被初始化在渲染视图↓

 mounted:function() {
           setTimeout(() => {
                this.draw();
            }, 1000)
        },

本次分享到此结束，谢谢大家阅读！！
最近忙着各种项目，博客会尽量更新的！！

标签：Vue,函数,created,获取,mounted,数据
来源： https://blog.csdn.net/huisoul/article/details/121713618

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。