1. new Vue()new命令底层机制的第一步就是发明一个空对象,let obj={},这个空对象就是咱们常说的vm实例,只是当初这个实例上啥也没有。前面的所有流程能够简略概括为:往这个空对象上增加一些属性和办法,最初返回进来。接下来这个空对象就要开始生命周期之旅了。
  2. 进行第一次初始化,具体初始化什么那就得看源码了,初学者也无需晓得,不过能够理解一下,官网的说法是:init Events & LifeCycle,翻译成中文就是:初始化事件和生命周期;
  3. 第一次初始化实现之后,就会触发beforeCreate钩子,你在这个钩子中写的代码都会在这个时候执行;
  4. 而后进行第二次初始化,第二次初始化的内容官网说法是:init injection & reactivity(初始化注入和响应式),简略说来就是:往实例上增加一些属性和办法(注入),比方datacomputedmethods,并且在这个过程中实现了数据的响应式。
  5. 整个初始化过程至此就完结了,这时会触发created钩子;
  6. 上面开始模板编译阶段(这个阶段次要有两次判断):

    6.1 首先进行第一个判断,有没有el选项?如果有就进入6.2;如果没有,就停在这里,直到vm.$mount(el)调用了再进入6.2。大白话了解:没有货色给我挂载,我还费这么大劲编译干啥?等你确定指标给我挂载了,我再开始工作。

    6.2 要开始编译了,然而编译啥呢?这里会进行第二次次判断,如果有template选项,就编译template,如果没有,就编译内部的HTML

  7. 编译实现,这时要触发beforeMounted钩子;
  8. el元素赋值给vm.$el,之后咱们就能够用vm.$el拜访这个元素了;
  9. 挂载结束,触发mounted钩子。

至此,页面实现渲染,期待与用户产生交互,个别会产生两种状况:

  1. 遇到了某些响应式数据产生了变动,Vue得告诉DOM从新渲染,然而别急,在DOM从新渲染之前,“我”得先触发一下beforeUpdate钩子,而后再开始渲染,渲染完结后,记得触发一下updated钩子哦。
  2. 用户某个操作想销毁“我”,那就执行 vm.$destroy(),这个函数执行的第一步是触发beforeDestroy钩子,第二步是开始销毁,销毁什么内容?官网说法是 teardown wathcers, child components and event listeners(拆除观察者、子组件和事件监听者),第三步是触发destroyed钩子。

最初通过官网的生命周期流程图对下面整个流程做个总结: