Vue组件是如何一步步解析并最终渲染到页面的？

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

前言：本文将对Vue组件的解析以及渲染进行简要讲解。

我们可以通过Vue.component全局注册组件，之后在模板中可以直接使用。例如：

前言

本文将对vue组件如何解析以及渲染做一个讲解。

我们可以通过Vue.component注册全局组件，之后可以在模板中进行使用

<div id="app"> <my-button></my-button> </div> <script> Vue.component("my-button", { template: "<button> 按钮组件</button>", }); let vm = new Vue({ el:'#app' }); </script>

全局组件解析原理

为了保证组件的隔离，每个组件通过extend方法产生一个新的类，去继承父类。并把用户通过Vue.component方法传入的 opts 合并到 vue.options.components，再vue初始化时合并Vue.options.components 和 vm.$options.components 。