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)

vue源码(六)-vue组件化机制_第1张图片

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

vue源码(六)-vue组件化机制_第2张图片

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


<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: '
I am comp
'
}) // 创建实例 const app = new Vue({ el: '#demo' });
script> body> html>

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

vue源码(六)-vue组件化机制_第3张图片

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

vue源码(六)-vue组件化机制_第4张图片
整体流程

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

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

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

你可能感兴趣的:(Vue)