Vue 组件的本质

从一段模板说起

html 复制代码

<div id="app">
  <my-header :title="pageTitle"></my-header>
  <my-content :posts="posts"></my-content>
  <my-footer></my-footer>
</div>

<my-header> 是什么？HTML 标准里没有这个标签。但 Vue 能理解它，把它变成一个完整的 DOM 子树。

这就是组件的本质：把一段模板、逻辑、样式打包成一个"自定义标签"，像搭乐高一样搭页面。

组件是什么？

从数据结构的角度看，一个 Vue 组件就是一堆配置选项：

javascript 复制代码

{
  name: 'MyComponent',
  props: ['title'],
  data() { return { count: 0 } },
  computed: { ... },
  methods: { ... },
  template: '<div>{{ title }} - {{ count }}</div>'
}

当 Vue 遇到 <my-component>，它做的事情是：

拿出这个配置对象
创建一个组件实例
把实例挂载到 DOM 树中

组件的注册

全局注册

javascript 复制代码

Vue.component('my-component', {
  template: '<div>我是一个全局组件</div>'
})

内部实现（简化）：

javascript 复制代码

Vue.component = function(id, definition) {
  // 把组件配置存到全局的 options.components 中
  this.options.components[id] = definition
}

全局组件在任何模板中都可以使用，因为 Vue 会在找不到某个标签对应的原生 HTML 元素时，去 Vue.options.components 中查找。

局部注册

javascript 复制代码

new Vue({
  components: {
    'my-component': { template: '<div>局部组件</div>' }
  }
})

局部组件只在当前实例（及其子组件）的模板中可用。

组件实例的创建过程

当 Vue 在模板中遇到一个组件标签时，发生了什么？

复制代码

模板: <my-component :title="hello"></my-component>

第1步：识别这是一个组件（不是原生 HTML 标签）
第2步：找到组件的配置对象（从全局/局部注册中）
第3步：创建组件实例 new VueComponent(options)
第4步：执行组件的生命周期（beforeCreate → created → beforeMount → mounted）
第5步：把组件的渲染结果（VNode）插入父组件的 VNode 树中

创建组件实例的核心代码（简化）：

javascript 复制代码

function createComponentInstance(vnode, parent) {
  const options = {
    _isComponent: true,
    _parentVnode: vnode,     // 组件在父模板中对应的 VNode
    parent: parent            // 父组件实例
  }

  // 调用 VueComponent 构造函数
  return new vnode.componentOptions.Ctor(options)
}

组件通信

父→子：Props

父组件传值给子组件：

html 复制代码

<child :name="parentName"></child>

Props 的工作原理：

父组件的渲染函数中，parentName 是父组件 data 的一个响应式属性
子组件的 props 声明了 name
Vue 在创建子组件时，把父组件传递的值赋给子组件的 _props.name
子组件的 _props 也是响应式的------所以父组件的数据变了，子组件也会自动更新

简化实现：

javascript 复制代码

function initProps(vm, propsOptions, propsData) {
  vm._props = {}

  propsOptions.forEach(key => {
    // 为每个 prop 创建响应式属性
    defineReactive(vm._props, key, propsData[key])

    // 代理到 vm 上，让子组件可以用 this.name 访问
    Object.defineProperty(vm, key, {
      get() { return vm._props[key] },
      set() { console.warn('不要直接修改 prop！') }
    })
  })
}

子→父：$emit

javascript 复制代码

// 子组件
this.$emit('add', payload)

// 父模板
<child @add="handleAdd"></child>

$emit 的原理非常直白：

javascript 复制代码

Vue.prototype.$emit = function(event, ...args) {
  // 找到父组件在当前组件的 VNode 上绑定的事件监听器
  const listeners = this._parentVnode.componentOptions.listeners
  if (listeners && listeners[event]) {
    listeners[event](...args)  // 直接调用
  }
}

就是把父组件传进来的回调函数存起来，$emit 的时候调用。

跨层级：Provide / Inject

javascript 复制代码

// 祖先
provide() {
  return { theme: 'dark' }
}

// 后代（不管隔了多少层）
inject: ['theme']

实现原理简化：

javascript 复制代码

function initProvide(vm) {
  // 把 provide 的结果合并到父组件的 _provided 上
  vm._provided = Object.create(vm.$parent ? vm.$parent._provided : null)
  const provide = vm.$options.provide
  if (typeof provide === 'function') {
    Object.assign(vm._provided, provide.call(vm))
  }
}

function initInjections(vm) {
  // 沿原型链向上查找
  const result = resolveInject(vm.$options.inject, vm)
  Object.keys(result).forEach(key => {
    defineReactive(vm, key, result[key])
  })
}

function resolveInject(inject, vm) {
  const result = {}
  for (const key of inject) {
    let source = vm
    while (source) {
      if (source._provided && key in source._provided) {
        result[key] = source._provided[key]
        break
      }
      source = source.$parent  // 向上查找
    }
  }
  return result
}

利用了 JS 的原型链：vm._provided 的原型指向父组件的 _provided，向上查找自然遍历了整个组件树。

插槽（Slot）

插槽的本质是**"父组件写内容，子组件用占位符接收"**。

html 复制代码

<!-- 使用组件 -->
<my-layout>
  <h1 slot="header">我的标题</h1>   ← 父组件定义内容
  <p>正文内容</p>
</my-layout>

<!-- 组件定义 -->
<div class="layout">
  <slot name="header"></slot>        ← 子组件占位
  <slot></slot>                      ← 默认插槽
</div>

插槽的 VNode 是在父组件的上下文中渲染的 ，所以插槽内容访问的是父组件的数据。但插槽的挂载位置是在子组件内部。

一个完整的组件生命周期

复制代码

new Vue({...})
  │
  ▼
beforeCreate  ← 数据/方法还没初始化，不能访问 data
  │
  ▼
created      ← 数据/方法/计算属性都已初始化，可以访问
  │
  ▼
beforeMount  ← 模板编译完成，但还没挂载到 DOM
  │
  ▼
mounted      ← 挂载完成，可以访问 DOM
  │
  ▼
(数据变化)
  │
  ▼
beforeUpdate ← 数据变了，但 DOM 还没更新
  │
  ▼
updated      ← DOM 已更新
  │
  ▼
beforeDestroy ← 销毁之前，清理定时器/事件监听的好时机
  │
  ▼
destroyed     ← 组件已销毁

总结

概念	本质
组件注册	把配置对象存到字典里，模板解析时查找
组件实例	根据配置对象 + 父组件上下文 new 出的 VueComponent
Props	父→子，响应式传递
$emit	调用父组件绑定的回调函数
Provide/Inject	原型链向上查找
Slot	父作用域渲染，子组件占位挂载

组件系统让 Vue 应用变成了一棵可组合的实例树。每个组件都是一个独立的"小 Vue"，有自己的响应式数据、有自己的 Watcher、有自己的生命周期。

但组件模板中写的 <div>{{ message }}</div>，Vue 是怎么把它变成能执行的 JavaScript 函数的？