new Vue()
,new
命令底层机制的第一步就是发明一个空对象,let obj={}
,这个空对象就是咱们常说的 vm 实例,只是当初这个实例上啥也没有。前面的所有流程能够简略概括为:往这个空对象上增加一些属性和办法,最初返回进来。接下来这个空对象就要开始生命周期之旅了。- 进行第一次初始化,具体初始化什么那就得看源码了,初学者也无需晓得,不过能够理解一下,官网的说法是:
init Events & LifeCycle
,翻译成中文就是:初始化事件和生命周期; - 第一次初始化实现之后,就会触发
beforeCreate
钩子,你在这个钩子中写的代码都会在这个时候执行; - 而后进行第二次初始化,第二次初始化的内容官网说法是:
init injection & reactivity
(初始化注入和响应式),简略说来就是:往实例上增加一些属性和办法(注入),比方data
、computed
、methods
,并且在这个过程中实现了数据的响应式。 - 整个初始化过程至此就完结了,这时会触发
created
钩子; -
上面开始模板编译阶段(这个阶段次要有两次判断):
6.1 首先进行第一个判断,有没有
el
选项?如果有就进入 6.2;如果没有,就停在这里,直到vm.$mount(el)
调用了再进入 6.2。大白话了解:没有货色给我挂载,我还费这么大劲编译干啥?等你确定指标给我挂载了,我再开始工作。6.2 要开始编译了,然而编译啥呢?这里会进行第二次次判断,如果有
template
选项,就编译template
,如果没有,就编译内部的HTML
。 - 编译实现,这时要触发
beforeMounted
钩子; - 把
el
元素赋值给vm.$el
,之后咱们就能够用vm.$el
拜访这个元素了; - 挂载结束,触发
mounted
钩子。
至此,页面实现渲染,期待与用户产生交互,个别会产生两种状况:
- 遇到了某些响应式数据产生了变动,Vue 得告诉 DOM 从新渲染,然而别急,在 DOM 从新渲染之前,“我”得先触发一下
beforeUpdate
钩子,而后再开始渲染,渲染完结后,记得触发一下updated
钩子哦。 - 用户某个操作想销毁“我”,那就执行
vm.$destroy()
,这个函数执行的第一步是触发beforeDestroy
钩子,第二步是开始销毁,销毁什么内容?官网说法是teardown wathcers, child components and event listeners
(拆除观察者、子组件和事件监听者),第三步是触发destroyed
钩子。
最初通过官网的生命周期流程图对下面整个流程做个总结: