【Vue原理】Component - 白话版

liuyix 发布于2019-08-23 18:32 / 569人阅读

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理白话版从模板上使用到挂载到页面

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

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

【Vue原理】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挂载到父页面

专线服务 idc机房托管 vue安卓版 component react-component Icon React Component

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105402.html

【Vue原理】Event - 源码版之绑定组件自定义事件

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之绑定组件自定义事件组件写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...

amuqiao 2019-08-23 18:36 评论0 收藏0
【Vue原理】Component - 源码版之创建组件VNode

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之创建组件今天就要开启我写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...

hover_lew 2019-08-23 18:34 评论0 收藏0
【Vue原理】Component - 源码版之挂载组件DOM

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之挂载组件由这篇文章从模写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...

lbool 2019-08-23 18:34 评论0 收藏0
【Vue原理】NextTick - 源码版之服务Vue

写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧【Vue原理】NextTick - 源码版之服务Vue 初次看的兄弟可以先看【Vue原理】NextTick - 白话版简单了解下...

Acceml 2019-08-26 18:36 评论0 收藏0
【Vue原理】Mixins - 源码版

写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧【Vue原理】Mixins - 源码版今天探索的是 mixins 的源码，mixins 根据不同的选项类型会做不同的处理篇幅会有些长，...

gotham 2019-08-23 18:32 评论0 收藏0