Vue中的 VueComponent

VueComponent

组件的本质

• Vue 组件是一个可复用的 Vue 实例。
• 每个组件本质上就是通过 Vue.extend() 创建的构造函数，或者在 Vue 3 中是由函数式 API（Composition API）创建的。

// Vue 2
const MyComponent = Vue.extend({template: '<div>Hello</div>'
});

组件注册

• 全局注册：Vue.component(‘MyComponent’, {…})
• 局部注册：

export default {components: {MyComponent}
}

Props 和事件

• props：父传子，用于组件参数传递。
• 自定义事件 $emit：子传父。

// 子组件
this.$emit('update:value', newValue);

插槽 Slot

• 默认插槽、具名插槽、作用域插槽。

<slot name="header"></slot>

生命周期钩子

• beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed

深入理解 VueComponent

VueComponent 的创建过程（以 Vue 2 为例）

Vue 执行 new Vue({…}) 时会走如下过程：

a. Vue.extend() 创建组件构造器

function VueComponent (options) {
this._init(options);
}

b. _init() 方法中合并配置、初始化生命周期、事件、render、data 等。

c. 渲染和挂载：调用 vm.$mount() → 创建 VNode → patch → 转换为真实 DOM。

组件更新机制

• 响应式依赖收集（Dep 和 Watcher）
• 数据变动触发组件局部更新（通过虚拟 DOM 的 diff 算法）。

🧩 VueComponent 源码解读（以 Vue 2.x 为主）

我们从组件创建 → 渲染 → 响应更新 → 销毁 全流程解读。

⸻

组件的创建过程

🔧 Vue.component() 注册组件

Vue.component('MyComp', {props: ['msg'],template: '<div>{{ msg }}</div>'
});

注册后，内部通过 Vue.options.components[‘MyComp’] 存储组件定义，等待使用。

注册本质：调用 extend 创建一个组件构造器（子类）：

function initGlobalAPI (Vue) {Vue.component = function (id, definition) {if (typeof definition === 'object') {definition = Vue.extend(definition); // 核心！}Vue.options.components[id] = definition;}
}

🏗️ Vue.extend 组件构造器

源码位置：src/core/global-api/extend.js

Vue.extend = function (extendOptions) {const Sub = function VueComponent(options) {this._init(options);};Sub.prototype = Object.create(Vue.prototype); // 原型继承Sub.prototype.constructor = Sub;Sub.options = mergeOptions(Vue.options, extendOptions);return Sub;
};

重点：

• 每个组件都是 Vue 的子类。
• 合并父 Vue 的选项和当前组件的选项。

组件实例的初始化

当我们在模板中写 ，Vue 解析 VNode 时会进入 createComponent() → createComponentInstanceForVnode() → new VNode.componentOptions.Ctor()。

🔄 调用 vm._init()

位置：src/core/instance/init.js

Vue.prototype._init = function (options) {vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor), options);initLifecycle(vm);initEvents(vm);initRender(vm);callHook(vm, 'beforeCreate');initState(vm); // 初始化 props、methods、data、computed、watchcallHook(vm, 'created');if (vm.$options.el) {vm.$mount(vm.$options.el);}
}

组件的挂载与渲染

🔨 vm.$mount() → 编译模板 → 生成 render 函数

位置：src/platforms/web/entry-runtime-with-compiler.js

const mount = Vue.prototype.$mount;
Vue.prototype.$mount = function (el) {el = document.querySelector(el);if (!this.$options.render) {const template = this.$options.template;const render = compileToFunctions(template);this.$options.render = render;}return mount.call(this, el);
}

🧱 渲染流程：render() → vnode → patch()

位置：src/core/instance/lifecycle.js

vm._update(vm._render());

•	_render() 执行 render 函数，返回 vnode。
•	_update() 使用 patch 将 vnode 转为真实 DOM。

响应式更新机制

🔁 组件的响应式核心依赖于：Observer、Dep、Watcher

• data 中的数据会被劫持（defineReactive）
• 每个组件对应一个渲染 watcher。
• 数据更新时通知 Dep → 触发 watcher → 重新执行 render → 生成新 vnode → diff patch。

new Watcher(vm, updateComponent, noop);

组件销毁过程

调用 $destroy()：

Vue.prototype.$destroy = function () {callHook(vm, 'beforeDestroy');// 删除 watcher// 解绑事件// 从 DOM 移除callHook(vm, 'destroyed');
}

🧬 源码主线流程总结（Vue 2）

Vue.component(…) → Vue.extend(…) → 组件构造函数 Sub

渲染 →
createComponent() →
new Sub(options) →
_init() →
mergeOptions → initState →
created → $mount()

$mount() →
compile(template) → render →
render() → vnode →
patch(vnode) → 挂载 DOM

数据更新 → Observer 触发 Dep.notify →
Watcher.update() → 重新 render → patch → 更新 DOM

📘 推荐文件入口

功能	文件	描述
全局 API 初始化	src/core/global-api/index.js	包括 Vue.component
组件构造器	src/core/global-api/extend.js	实现 Vue.extend
Vue 初始化	src/core/instance/init.js	实现 _init()
生命周期	src/core/instance/lifecycle.js	created、mounted 等钩子
渲染函数	src/core/instance/render.js	vm._render()
虚拟 DOM → DOM	src/core/vdom/patch.js	diff 算法
响应式系统	src/core/observer/	包含 Dep、Watcher、Observer