new Vue()
- 做初始化工作
- 执行beforeCreate钩子函数(如果有)
- 初始化data数据
- 执行created钩子函数(如果有)
- 判断是否传了el选项
- 如果没有传,则等到实例vm主动调用$mount()再继续执行
- 如果传了el,再判断是否有传template模板选项
- 如果没有传template,则将el对应容器的所有内容,当成template
- 将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
}
}
]
}
}
- 执行beforeMount钩子函数(如果有)
- 将虚拟DOM替换掉el容器中的旧内容(把真正的HTML覆盖掉旧模板)
- 执行mounted钩子函数(如果有)
- 当data数据发生改变时,先走beforeUpdate,VDOM更新完DOM后,走updated
- 当组件切换或者跳转路由销毁VUE实例时,调用beforeDestroy钩子函数(如果有)
- 解除事件绑定,销毁子组件
- 执行destroyed钩子函数(如果有)