Vue组件实现原理是什么？

本文共计2782个文字，预计阅读时间需要12分钟。

组件化设计的目的是将复杂的应用为功能独立的组件，降低开发难度，同时提供良好的复用性和可维护性。

组件机制的设计，可以让开发者把一个复杂的应用分割成一个个功能独立组件，降低开发的难度的同时，也提供了极好的复用性和可维护性。本文我们一起从源码的角度，了解一下组件的底层实现原理。

组件注册时做了什么？

在Vue中使用组件，要做的第一步就是注册。Vue提供了全局注册和局部注册两种方式。

全局注册方式如下：

Vue.component('my-component-name', { /* ... */ })

局部注册方式如下：

var ComponentA = { /* ... */ } new Vue({ el: '#app', components: { 'component-a': ComponentA } })

全局注册的组件，会在任何Vue实例中使用。局部注册的组件，只能在该组件的注册地，也就是注册该组件的Vue实例中使用，甚至Vue实例的子组件中也不能使用。

有一定Vue使用经验的小伙伴都了解上面的差异，但是为啥会有这样的差异呢？我们从组件注册的代码实现上进行解释。