放大生命周期#
Has el
option
判断是否有 element 例如el:’#app’
vm.
m
o
u
n
t
(
e
l
)
i
s
c
a
l
l
e
d
翻
译
/
理
解
:
或
者
在
n
e
w
V
u
e
最
后
面
有
.
mount(el) is called 翻译/理解: 或者在 new Vue 最后面有 .
mount(el)iscalled翻译/理解:或者在newVue最后面有.mount("#app") 也可以
如果两者都没有 至此生命周期结束
No Compile el`s outerHtml as template
如果两者都没有 至此生命周期也结束
template
option
有 element 再检查是否有template
created和beforeMount生命周期之间,有2次判断4条可走路线:
是→是:竖直左下:去编译data数据和模版
否→停:右下 经el和另个写法都没有,退出生命周期
否→是:右下竖直 判断el以另一种方式回归到第二次判断:模版是否存在
是→否:竖直右下判断是否有data数据和模版,如果都没有,则生命周期结束
第一次:
判断vue实例是否有el:
如果有,再判断实例中是否有templet模版;
如果没有,看实例的最后是否有$(mount),再没有就结束。
第二次:
左右对称 yes走左边👈:编译data数据和模版生成html,并渲染render函数
No走右边👉:
beforeMount()
挂载 开始编译template中的内容 在虚拟dom中执行的
此方法没有将真实的内容渲染到页面上去
此方法可以用来做一些基础的工作
Create vm.$el and replace ‘el’ with it
用html替换dom
mounted()
模板已经编译完成 开始挂载 此方法结束 页面就显示出来了
如果有操作时要在页面加载出来之后执行的
可以写在此方法当中
Mounted
when data changes
以下方法执行的是 页面的增删改查
beforeUpdate()
组件更新之前 执行的函数
Virtual Dom and patch
updated()
组件更新之后 此方法执行完页面就展示
when vm.$destroy()
beforeDestroy()
销毁之前
Teardown watchers, child components and event listeners
destroyed()
销毁之后
Destroyed