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

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

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

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

  1. 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方法,将传入组件配置转换为构造函数。
根据上面步骤已经完成了组件的注册,使用时又是如何解析的,使用过程如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Vue源码剖析</title>
  5. <script src="../../dist/vue.js"></script>
  6. </head>
  7. <body>
  8. <div id="demo">
  9. <h1>Vue组件化机制</h1>
  10. <comp></comp>
  11. </div>
  12. <script> Vue.component('comp', { template: '<div>I am comp</div>' }) // 创建实例 const app = new Vue({ el: '#demo' }); </script>
  13. </body>
  14. </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结构
整体流程:

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

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

发表评论

表情:
评论列表 (有 0 条评论,81人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Vue 开发

    Vue 组件化开发 什么叫做组件化 实例 什么叫做组件化 所谓组件化,就是把页面拆分成多个组件然后可重复利用,每个组件依赖的 CSS、JS、模板、图片