vue源码-vue组件化机制

Posted 2022-09-06 suwu150

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue源码-vue组件化机制相关的知识，希望对你有一定的参考价值。

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)处

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

能够查看到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行能够查看到开始创建。

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

整体流程

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

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

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

以上是关于vue源码-vue组件化机制的主要内容，如果未能解决你的问题，请参考以下文章