详解详解vue 组件组件
Vue的两大核心
1. 数据驱动 – 数据驱动界面显示
2. 模块化 – 复用公共模块，组件实现模块化提供基础
组件基础组件基础
组件渲染过程
template —> ast（抽象语法树） —> render —> VDom(虚拟DOM) —> 真实的Dom —> 页面
Vue组件需要编译，编译过程可能发生在
打包过程 （使用vue文件编写）
运行时（将字符串赋值template字段，挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)
对应的两种方式 runtime-only vs runtime-compiler
runtime-only（默认）
打包时只包含运行时，因此体积更少
将template在打包的时候，就已经编译为render函数，因此性能更好
runtime-compiler
打包时需要包含（运行时 + 编译器），因此体积更大，大概多10Kb
在运行的时候才把template编译为render函数，因此性能更差
启用runtime-compiler
vue.config.js（若没有手动创建一个）
module.exports = {
runtimeCompiler: true //默认false
}
组件定义组件定义
1. 字符串形式定义（不推荐）
例子
const CustomButton = {
template: "<button>自定义按钮</button>"
};
这种形式在运行时才把template编译成render函数，因此需要启用运行时编译（runtime-compiler）
2. 单文件组件（推荐）
创建.vue后缀的文件，定义如下
<template>
<div>
<button>自定义按钮</button>
</div>
</template>
<template> 里只能有一个根节点，即第一层只能有一个节点，不能多个节点平级
这种形式在打包的时就编译成render函数，因此跟推荐这种方式定义组件
组件注册组件注册
1. 全局注册
全局注册是通过Vue.component()注册
资源评论
