标签：VUE 实例 dom created 调用 mounted 页面
VUE生命周期总结以及created和mounted比较
1. VUE的生命周期
vue实例对象经历了创建、挂载、更新、销毁四个阶段。每个阶段都伴随着一些函数的自调用，这些函数称为钩子函数：
vue一共有十一个钩子函数，常见的八个如下：
| beforeCreate | 在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了 |
|---|---|
| created | 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是html页面还没有渲染出来 |
| beforeMount | 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已 |
| mounted | el的dom被新创建的vm.$el的dom替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件 |
| beforeUpdate | 数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的 |
| updated | 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的 |
| beforeDestroy | 实例销毁之前调用 |
| destroyed | 实例销毁后调用 |
2.比较
写代码的时候有的时候用created有的时候用mounted，傻傻分不清楚，所以记录一下自己在网上查的总结：
1.在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素，但是已经可以调用methods中的方法了
2.在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点。但 mounted 不会承诺所有的子组件也都一起被挂载。如果希望等到整个视图都渲染完毕，那就需要使用到vm.$nextTick
总得来说，如果不涉及dom的直接操作，获取后端的数据既可以放在created里，也可以放在mounted里。如果涉及dom操作，则放在mounted里，否则会报错
如果涉及到请求数据的异步方法，最好的解决方案就是在methods里定义，然后在created和mounted里通过this.方法来调用。
小许的博客
发布了1 篇原创文章 · 获赞 0 · 访问量 52
私信
关注
标签：VUE,实例,dom,created,调用,mounted,页面 来源： https://blog.csdn.net/xxwyxlf/article/details/104175421
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。