(1)阶段一:数据代理和监测创建阶段

 

 

 

(2)阶段二 :解析模板

 

 

进行两次判断

　　第一次判断,传入的配置对象是否有el属性 el:'#root' 

 

没有该属性vue就找不到对应模板进行解析,也就无法继续下一阶段

除非之后直接调用vm.$mouted('#root')手动挂载该属性

 

　　第二次判断,是否配置对象有template参数

　　他的效果是直接将其视为解析模板进行解析,并且只允许有一个根节点

 

 

  　　多用于组件,而且也不能用template标签作为组件根元素

在这个阶段

• vue在这个阶段进行解析
• 页面中的内容显示为原生的真实dom,其中插值语法等语法都还没有完成替代
• 编译虚拟dom,并保存在内存中

beforeMouted()

　　在虚拟dom编译完成后

• 此时对dom的操作,最终都不生效(可以用原生方法进行操作,但是之后替换阶段虚拟dom直接就替换掉原生dom了,所以无论怎么操作最后结果都不奏效)
• 此时页面是 未经 vue编译的dom结构
• 所以 : 不要在这个钩子函数中操作dom,没有意义

(3)将虚拟dom替换真实dom

 

 

 

 `

在这一阶段

• vue将虚拟dom存储到vm实例中的$el属性中
• 并且替换掉真实dom
• 这一阶段完成后,此时页面是 经过vue 编译的 dom(插值语法等都生效了)

mounted()

• 此时可以用原生方法操作dom(但是最好不要这么做)
• 此时初始化阶段结束
• 这个钩子函数进行 [开启定时器setinterval(),发送网络请求,订阅消息,绑定自定义事件...]

 

以上所有阶段合称挂载流程

之后为更新流程和销毁流程

(4)更新阶段 :当数据发生改变(数据监听时触发)

 

 

 beforeUpdate()

• 此时数据已经变化,但是页面还没来得及更新,尚未同步

之后进行新旧dom树比较,然后重新渲染

updated()

• 此时页面和数据已经保持同步了

(5)销毁阶段

只要调用了 vm.$destroy()

• vm实例已经被销毁了
• 该实例和其他组件实例对象的连接清理了
• 解除了自定义事件监听(注意不是原生事件,原生dom事件还是生效的!!!)/全部指令(v-if等)
• 但是vm的页面会定格在销毁的那一刻,只是功能等都已经不维护了
• beforedestroy(),可以调用方法和数据,但是页面不会对应变化,已经不会触发更新了(不会进入update阶段了,因为已经是销毁阶段了)

 

 

 

注意事项

 

 

(1)outHTML 和 innerHTML

vue是以outHTML为模板编译,如下图,div中的属性(如果存在)也能被模板解析