Vue 之mounted和created的区别

从官网上的vue的生命周期图可以看出

  • created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
  • mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
    简单来说，mounted的时候，页面已经完成DOM树的构建，可以通过document.getElementById等方法多dom节点进行操作>
    如Echarts初始化图标的时候，需要先var charts= document.getElementById(ID);获取到节点,这个时候就会需要写在mounted钩子中，写在created中就会发现报错，无法获取此节点。

执行顺序

嵌套组件中两者的执行顺序不同。

  1. 父组件 created
  2. 子组件 created
  3. 子组件 mounted
  4. 父组件 mounted
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue生命周期及mounted和created的区别
    一、官方图解如下: 生命周期探究 create 和 mounted 相关 另外在标红处，我们能发现el还是 {{m...
    world_7735阅读 1,572评论 1赞 1
  • 面试题
    一：什么是闭包？闭包的用处？ （1）闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就 是将函数内部和函数外...
    xuguibin阅读 9,757评论 1赞 52
  • Vue成神之路之全局API
    前言 记录平时学到的知识，标题写的大气一点，也算是给自己一点鼓励，希望在技术这条路可以远走越远，路越走越宽~ 文中...
    徐国军_plus阅读 1,690评论 3赞 28
  • Vue生命周期中mounted和created的区别
    用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨，但是也基本上可以理解。 ...
    JamHsiao_aaa4阅读 40,383评论 2赞 7
  • Vue.js 2.0 Official Guide Note
    这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容，还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0赞 29