vue源码(六)-vue组件化机制

逃离我推掉我的手 2023-06-21 03:53 23阅读 0赞

#### vue源码(六)-vue组件化机制 ####

在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：

Vue.component('my-component-name', {  /* ... */ })

该组件名就是 Vue.component 的第一个参数。

###### 1.组件名大小写 ######

定义组件名的方式有两种：

*  使用 kebab-case

Vue.component('my-component-name', {  /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 。

*  使用 PascalCase

Vue.component('MyComponentName', {  /* ... */ })

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

##### 组件声明 #####

源码中`Vue.component()`定义位于文件`src/core/global-api/assets.js`中64行`initAssetRegisters(Vue)`处

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70][]

通过调用`initAssetRegisters(Vue)`方法对`Vue`进行扩展处理，打开`src/core/global-api/assets.js`文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1][]

能够查看到11行通过遍历的方式对`'component', 'directive', 'filter'`的注册。同时使用extend方法，将传入组件配置转换为构造函数。  
根据上面步骤已经完成了组件的注册，使用时又是如何解析的，使用过程如下：

<!DOCTYPE html>
    <html>
    <head>
        <title>Vue源码剖析</title>
        <script src="../../dist/vue.js"></script>
    </head>
    <body>
        <div id="demo">
            <h1>Vue组件化机制</h1>
            <comp></comp>
        </div>
        <script> Vue.component('comp', { template: '<div>I am comp</div>' }) // 创建实例 const app = new Vue({ el: '#demo' }); </script>
    </body>
    </html>

同样涉及到虚拟dom的构建，打开`src/core/vdom/create-element.js`文件，查看虚拟dom创建，134行能够查看到开始创建。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2][]

创建过程是继续调用`createComponent`方法，打开文件`src/core/vdom/create-component.js`查看createComponent方法，发现顺序处理\_\_事件监听、插槽处理、生命周期钩子挂载、命名处理\_\_，最后通过 new VNode创建虚拟dom并返回。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3][]

##### 整体流程 #####

首先创建的是根组件，首次\_render()时，会得到整棵树的VNode结构  
整体流程:

new Vue() => $mount() => vm._render() => createElement() => createComponent()

通过以上步骤创建虚拟dom之后，通过patch比对进行挂载到父级组件中。实现自定义组件的挂载。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191211102322533.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191211103501834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/201912111143283.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191211114904595.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70