Vue原理Component-白话版

46次阅读

共计 1300 个字符,预计需要花费 4 分钟才能阅读完成。

写文章不容易,点个赞呗兄弟
专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧
研究基于 Vue 版本 【2.5.17】

如果你觉得排版难看,请点击 下面链接 或者 拉到 下面 关注公众号 也可以吧

【Vue 原理】Component – 白话版

component 从模板上使用到挂载到页面上,到底经历了一个怎么样的流程??里面到底掺杂了什么神奇的东西,母猪为何半夜惨叫,这一切的背后,究竟是 ….

component 从模板上使用到挂载到页面上,到底经历了一个怎么样的流程??里面到底掺杂了什么神奇的东西,母猪为何半夜惨叫,这一切的背后,究竟是 ….

好吧,马上进入主题,component 挂载流程

好了,既然说的是 component,那么其他的无关步骤自然是要略过的

总的说起来,component 创建流程,就两个步骤

1、创建 component 外壳 VNode
2、挂载 component dom

我们一步一步来说


创建组件 vnode

“这里说的组件 vnode,是外壳 vnode,不懂下面会说”

现在有一个页面 A 使用是了 test 组件

然后页面被解析成了一个渲染函数

现在要开始执行页面 A 渲染函数,这个渲染函数执行得到【模板对应的 VNode】

其中 _c 的作用就是,根据传入的参数,构造相应的 VNode

执行到 _c(‘test’),需要构建一个标签为 test 的 vnode,但是发现,诶?test 不是一个正常的 html 标签啊

于是送去非正常标签研究院进行研究,哈哈,就是去做一些特殊处理

做的是什么呢?

1、构建组件的构造函数,处理父组件给子组件绑定的数据,比如 props,事件,slot 等等

2、创建组件外壳 VNode,就是下面这个

相信大家应该清楚什么是外壳节点了,细节可以跳到下文相关内容看

VNode – 源码版

外壳节点,就是用来保存 父组件和子组件 进行 PY 交易重要场所

就是为了保存了上一步处理得到的 组件构造函数,props,事件,slot 等

来打印看下

只有 tag 判断属于组件之后,才会进行这一步。现在这一步就结束了,到下一步挂载


挂载组件 dom

当页面 A 渲染函数执行完毕,得到了一棵模板对应的 VNode 树

那么下一步就是 根据 VNode 创建 DOM,然后进行挂载了喂

此时!

Vue 需要递归遍历 页面的 VNode 树,进行生成对应的 DOM

然后!

每遍历到一个标签都要判断一次,这个标签是否是组件啊巴拉巴拉的

直到碰到了 test 这个比,你不是组件吗,继续送去研究所研究

做了什么研究?

1、拿到 test 外壳节点保存的构造函数

2、new 构造函数() 执行,得到新建的组件实例,完成实例初始化

3、根据上一步生成的实例,调用挂载函数,解析组件内部模板,然后生成 DOM,挂载到父页面 A 中

解析内部模板,就是处理正常的标签挂载了(排除组件嵌套)

具体流程可以参考下文

从模板到 DOM 的简要流程

好的,到此,component 构建的流程完美结束了


总结

组件的挂载是和页面挂载过程息息相关的,就只有两个步骤

1、页面解析模板得到 VNode 时:创建组件构造函数 + 生成外壳节点保存 父子关联的数据

2、页面开始挂载 DOM 时:新建建组件实例,解析组件内部模板,生成 DOM 挂载到父页面

正文完
 0