手机查看网页源代码_组件化

我会带着你远行 2023-09-25 11:43 42阅读 0赞

7.1 组件化组件化回顾组件注册Vue.extend调试组件注册过程组件创建过程组件实例的创建和挂载过程

一个 Vue 组件就是一个拥有预定义选项的一个 Vue 实例

一个组件可以组成页面上一个功能完备的区域，组件可以包含脚本、样式、模板

![手机查看网页源代码\_组件化\_手机查看网页源代码][a57d7b6f584aa3529d8074843f09279e.png]

像上面这个图，我们可以把一个页面抽象成若干个组件，把这些组件组合成一个页面。组件就像 ‘积木块’，当我们有了组件之后搭建页面就好像在拼积木。这个图中把一个页面划分成了三部分：页头、主内容区域、侧边栏，每一个组件内部又可能嵌套了粒度更小的组件：比如主内容区域对应的组件，它里面又嵌套了列表组件，它们最终组合成了一个页面。

我们可以总结一下：组件化可以让我们方便地把页面拆分成多个可重用的组件，使用组件可以让我们重用页面中的某一个区域。另外，组件之间是可以嵌套的，有了组件之后我们开发页面就像搭积木一样。

组件化机制

组件化可以让我们方便的把页面拆分成多个可重用的组件组件是独立的，系统内可重用，组件之间可以嵌套有了组件可以像搭积木一样开发网页下面我们将从源码的角度来分析 Vue 组件内部如何工作

Vue中注册组件的两种方式

全局注册：在任何位置都可以使用局部注册：只能在当前注册的范围中使用

全局组件的注册方式

以上创建了一个全局组件，在任何位置都可以直接使用，在Vue的选项render函数中通过h函数创建组件对应的vnode，下面我们来看一下注册全局组件的这个函数的内部实现：

src/core/global-api/index.js

src/core/global-api/assets.js

src/shared/constans.js

src/core/global-api/assets.js

重点来看 全局组件的注册过程，其中如果第二个参数传递是对象，调用，把组件的选项对象转换成组件的构造函数，最终记录到中；如果第二个参数是函数，会直接把这个函数记录到中。

src/core/global-api/extend.js

通过源码我们可以看到，它内部就是基于传入的选项对象创建了组件的构造函数，组件的构造函数继承自Vue构造函数，所以组件对象拥有和Vue实例一样的成员

接下来通过调试查看全局组件的注册过程调试代码

增加断点并F5进入

![手机查看网页源代码\_组件化\_手机查看网页源代码\_02][02]

此时的type就是component，我们调用的是Vue.component这个方法，id是组件的名称comp、definition是调用时传入的第二个参数：组件的选项对象，里边只有template选项。往下执行，如果第二个参数为空，会获取这个组件，此时第二个参数有值

![手机查看网页源代码\_组件化\_手机查看网页源代码\_03][03]

开发环境中，会验证组件的名称，如果组件的名称不合法会警告

![手机查看网页源代码\_组件化\_手机查看网页源代码\_04][04]

接下来获取组件的名称，调用vue.extend，进入extend，在这个方法上面已经初始化了cid，用来唯一标识当前组件的构造函数并且作为缓存的键。接下来获取options选项中的\_Ctor(缓存的构造函数)

![手机查看网页源代码\_组件化\_手机查看网页源代码\_05][05]

当前的\_Ctor是undefined，它初始化为一个空对象，接下来从缓存中获取构造函数(取不到，因为此时缓存中还没有)

![手机查看网页源代码\_组件化\_手机查看网页源代码\_06][06]

接下来验证组件名称，Vue.component中已经验证过组件名称，但是如果直接调用Vue.extend也要去验证(且刚刚是在开发环境执行的，生产环境下会过滤掉，不用担心性能问题)

![手机查看网页源代码\_组件化\_手机查看网页源代码\_07][07]

接着，创建了组件的构造函数VueComponent

![手机查看网页源代码\_组件化\_手机查看网页源代码\_08][08]

组件的构造函数继承自Vue构造函数

![手机查看网页源代码\_组件化\_手机查看网页源代码\_09][09]

![手机查看网页源代码\_组件化\_手机查看网页源代码\_10][10]

cid++ 记录到sub中，然后合并Super.options和当前调用Vue.extend传入的选项

![手机查看网页源代码\_组件化\_手机查看网页源代码\_11][11]

![手机查看网页源代码\_组件化\_手机查看网页源代码\_12][12]

执行完毕后Sub的选项，可以看到它把刚刚两个选项合并起来了，在组件的构造函数的选项中也可以访问到\_base，从这里还可以看出Vue的选项都被合并到组件的选项中，所以Vue选项中的成员可以在任何组件中去使用

![手机查看网页源代码\_组件化\_手机查看网页源代码\_13][13]

再去初始化组件中的props、computed

![手机查看网页源代码\_组件化\_手机查看网页源代码\_14][14]

继承Vue中的一些静态成员，记录不同的options

![手机查看网页源代码\_组件化\_手机查看网页源代码\_15][15]

此处的extendOptions里面有一个\_Ctor空对象

![手机查看网页源代码\_组件化\_手机查看网页源代码\_16][16]

缓存当前组件的构造函数，当这个构造函数换成完毕之后，再来看extendOptions中的\_Ctor，里面记录了刚刚缓存好的构造函数

![手机查看网页源代码\_组件化\_手机查看网页源代码\_17][17]

返回到Vue.component方法，把创建好的构造函数最终记录到Vue构造函数的options选项的components对应的组件名称中，当前是comp。因为记录到了Vue的构造函数中，所以所有位置都可以直接使用全局组件

![手机查看网页源代码\_组件化\_手机查看网页源代码\_18][18]

全局组件注册完毕

回顾首次渲染过程

Vue 构造函数this.\_init()this.$mount()mountComponent()new Watcher() 渲染 WatcherupdateComponent()vm.\_render() -> createElement()vm.\_updata()

观察如下代码：

首先通过Vue.component返回了一个组件的构造函数，在render中的h函数就是createElement函数，调用createElement的时候传入了组件的构造函数。

我们要看的就是在createElement中是如何去处理组件的

\_createElement() 中调用 createComponent()src/core/vdom/create-element.js

createComponent() 中调用创建自定义组件对应的 VNodesrc/core/vdom/create-component.js

installComponentHooks() 初始化组件的 data.hook

钩子函数定义的位置(init()钩子中创建组件的实例)

创建组件实例的位置，由自定义组件的 init() 钩子方法调用

init()钩子函数又是在什么地方调用的呢？ 它是在patch的过程中调用的

我们看过了组件被转换为VNode的过程，接下来再来看init钩子函数调用的位置，因为在init钩子函数在中最终创建了组件对象，init钩子函数是在patch中调用的

src/core/vdom/patch.jsVue.\_update() --> patch() --> createElm() --> createComponent()创建组件实例，挂载到真实 DOM

调用钩子函数，设置局部作用于样式

调用钩子函数

总结

组件实例的创建过程是从上而下(父组件->子组件)组件实例的挂载过程是从下而上(子组件->父组件)

由此我们可以总结出来，组件的粒度不是越小越好，因为嵌套一层组件，就会重复执行一遍组件的创建过程，比较消耗性能。组件的抽象过程要合理，比如侧边栏组件，它内部的导航如果外部没有再次使用的话，可以把侧边栏和内部的导航设计成一个组件，减少组件重新创建的过程。

[a57d7b6f584aa3529d8074843f09279e.png]: https://img-blog.csdnimg.cn/img_convert/a57d7b6f584aa3529d8074843f09279e.png
[02]: https://img-blog.csdnimg.cn/img_convert/3b24c62f5161a807cd16b14a882b1d03.png
[03]: https://img-blog.csdnimg.cn/img_convert/668ec0808d0528b9bf57fa498e9a4008.png
[04]: https://img-blog.csdnimg.cn/img_convert/e023f957105ea8bfa39a3c64d1b18ea3.png
[05]: https://img-blog.csdnimg.cn/img_convert/ce97aa77a7009a3200b896b4f43bd443.png
[06]: https://img-blog.csdnimg.cn/img_convert/ad8b6a500edfe5e7cd762c0b5eb51f51.png
[07]: https://img-blog.csdnimg.cn/img_convert/b6df7646ead3307dbde181621d810655.png
[08]: https://img-blog.csdnimg.cn/img_convert/f979681cb60ffe81f5121e1eca7beb17.png
[09]: https://img-blog.csdnimg.cn/img_convert/8e2aa5a3b115c1e435fa95a9f1d18ba3.png
[10]: https://img-blog.csdnimg.cn/img_convert/99d085aac9dbeb6e04c559c3bb064b1d.png
[11]: https://img-blog.csdnimg.cn/img_convert/055bda8f822f14f572d9310cbdda098e.png
[12]: https://img-blog.csdnimg.cn/img_convert/e7d0fbea7770811171321662a4fc32e7.png
[13]: https://img-blog.csdnimg.cn/img_convert/cebef2103458c63d5a8de5cc7670786f.png
[14]: https://img-blog.csdnimg.cn/img_convert/ea03aac528d8240b45ca361c0258c16d.png
[15]: https://img-blog.csdnimg.cn/img_convert/4922aaf24fb090a61232ef18211b4076.png
[16]: https://img-blog.csdnimg.cn/img_convert/8afcd2728c51608a9f26385258a5489e.png
[17]: https://img-blog.csdnimg.cn/img_convert/ee39a3e2c242e1e14399aef7a43909b9.png
[18]: https://img-blog.csdnimg.cn/img_convert/4e9d18210bb38fee077035ed6df7347b.png