关于vue生命周期图

这是vue官网的生命周期图
clipboard.png
有几个地方有疑惑
1、created钩子之后检测是否有el选项,就是有没有下图el:#app这个选项,如果有就检测是否有template这个选项,如果没有el这个选项就等待调用vm.$mouted(el)这个钩子的调用,请问我这样理解是否是对的?

clipboard.png

2、检查出没有template选项,compile el’s outerHTML as template是什么意思?
3、beforemouted之后create vm.$el and replace ‘el’ with it是什么意思?

回答:

  • 第一个理解是对的

    • 绑定根元素分为自动和手动两种模式

    • el: '#app'是绑定配置,如果有,则自动绑定到#app

    • 如果没有,等到手动绑定调用vm.$mount()

  • 第二点,

    • 如果没有template进行填充被绑定区域,那么,被绑定区域el对象的outerHTML(此处即整个#app DOM对象,包括<div id="app"></div>标签),都作为被填充对象替换掉填充区

    • 参见我在这个问题中的回答

    • 上面回答中,例子是,App.vue中的<div id="#app>...</div>main.js里指代的是一个东西,走的是左边一个分支

    • 上面回答的例子,是有template,走左边分支,结果是把App.vue里整个组件根元素<div id="app">...</div>替换了被绑定元素

    • 然而,右边一个分支和左边类似,只是,被编译代码的来源不同而已,由于没有template,所以编译器无法从template生成用来填充el元素的HTML,所以,它就把index.html里被绑定元素对应的代码,作为了编译器的template

  • 第三个问题,可能与第二问描述的有点重复

    • 因为第二问中已经把整个模板编译流程都讲通了,但是实际上那个箭头只表示,对于template定义和未定义时,编译器如何选取编译模板的过程

    • 下面beforemounted之后create vm.$el and replace ‘el’ with it,指的才是上面回答中“编译,并替换了被绑定元素”的操作

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注