Vue生命周期

new Vue()

  1. 做初始化工作
  2. 执行beforeCreate钩子函数(如果有)
  3. 初始化data数据
  4. 执行created钩子函数(如果有)
  5. 判断是否传了el选项
  6. 如果没有传,则等到实例vm主动调用$mount()再继续执行
  7. 如果传了el,再判断是否有传template模板选项
  8. 如果没有传template,则将el对应容器的所有内容,当成template
  9. 将template通过render函数编译成vdom虚拟DOM树
<div id='app'>
    <input v-model='nickname'>
</div>

let domtree = {
    domProps:{
        tag:"div",
        id:'app',
        name:"myname",
        'class':"container",
        slots:[
            {
               tag:"input",
               domProps:{
                   value:nickname
               },
               onClick(e){
                   this.value = e.target.value 
               }
            }
        ]
    }
}
  1. 执行beforeMount钩子函数(如果有)
  2. 将虚拟DOM替换掉el容器中的旧内容(把真正的HTML覆盖掉旧模板)
  3. 执行mounted钩子函数(如果有)
  4. 当data数据发生改变时,先走beforeUpdate,VDOM更新完DOM后,走updated
  5. 当组件切换或者跳转路由销毁VUE实例时,调用beforeDestroy钩子函数(如果有)
  6. 解除事件绑定,销毁子组件
  7. 执行destroyed钩子函数(如果有)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue生命周期总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。 创建前/后: 在beforeCre...
    雨蒙_snow阅读 1,307评论 0 1
  • (除了beforeCreate和created钩子之外,其他钩子均在服务器端渲染期间不被调用。) 1、before...
    冷r阅读 501评论 0 1
  • Vue框架已日臻成熟,生命周期也算是老生常谈了。网路上也有很多对Vue生命周期的讲解。此处是补充上自己的理解,再次...
    celineWong7阅读 3,159评论 0 2
  • vue生命周期 每个Vue实例或组件从创建到显示再到废弃的过程就是vue的生命周期。很多时候我们希望能在这个过程中...
    皮皮坤666阅读 29,154评论 1 18
  • 爸爸的一个老友走了。 想来,老爸拥有智能手机也不过是两三个月的功夫。而他的这位同村好友,自从被我爸知道了微信号码,...
    123深呼吸阅读 557评论 3 4