1. 组件化跟模块化的区别
组件的出现就是为了拆分 vue 实例的庞大内容的，我们可以以不同的组件来划分不同的功能模块
之后我们需要什么样的功能就直接搬运过来什么样的组件就可以了
模块化是从程序逻辑代码结构来划分的(比如我们会将所有 api 封装起来，单独放到一个模块中这就是按照逻辑来划分的)，后端的模块化是为了代码的分层开发，保证每个功能模块的职能单一
组件化是按照 ui 视图界面来划分的(比如我们将表单作为一个组件来使用，这个就是按照视图来划分)，前端的组件化是为了代码的重用
2. Vue 中定义组件的三种方式
(1) 使用 Vue.extend 来创建全局组件
这种方式是通过对 Vue 实例的继承来完成的，因此创建的组件将会是全局组件，也就是所有 Vue 实例都可以访问的组件
在定义的时候我们将会用一个变量来接受这个新的实例
其定义参数为一个对象，其中 template 属性指向了我们定义的 html 结构
之后再使用 Vue.component(‘组件名称’,{创建出来的模板对象，也就是我们用来接受新的组件实例的那个变量的名字})
这样一操作我们就可以将组件注册到我们的组件堆里面了
在 vm 实例里面用驼峰形式定义的东西在 html 页面中使用的化必须要转成中间用杠链接的形式，如：’myNewComp’->’my-new-comp’
我们也可以把 Vue.extend 作为 Vue.component 的第二个参数直接进行注册，这样可以省一个步骤
html
{message}}
javascript
// 创建一个Vue.extend实例
let bigFont = Vue.extend({
template: ”
This text is big font text”
});
// 将创建的实例注册到组件堆上面
Vue.component(“myCompOne”, bigFont);
let vm = new Vue({
el: “#app”,
data: {
message: “yerts”
}
});
(2) 直接使用 Vue.component 中的字面量形式
在第一种定义方式中我们将 Vue.extend 作为第二个参数传入到了 Vue.component 中，其实我们可以做的更绝
也就是将 Vue.extend 直接作为一个对象字面量的形式，直接在里面定义 template 属性，然后将其传入到 Vue.component 的第二个参数
记住，所有的组件必须只能有一个根节点，不然都会报错
html
javascript
//直接将定义过程作为字面量的形式传入注册函数的方式创建组件
Vue.component(“myCompTow”, {
template: ”
This is my second component.
”
});
let vm = new Vue({
el: “#app”,
data: {
message: “yerts”
}
});
(3) 通过让 template 指向 html 文件中的 template 的方式来构建组件
前两种方式在定义一个组建的时候都定义在了一个 js 文件中，但是这样就带来了不会有智能提示的功能
因此第三种定义组建的方式就是解决这一问题的
我们可以在 html 页面中使用 template 标签作为模板的容器，并设置其 id 属性作为我们的选择器，之后的使用过程中我们只需要在获取 template 的地方使用template:”#选择器”这种方式来让其指向我们自己定义的模板即可，这种方式定义的时候也需要我们的Vue.component(‘组件名称’,{template:’#id’})来注册全局组件
html
{message}}
javascript
// 通过在html页面定义好组件的结构，在js文件里面注册其行为的方式构建组件
Vue.component(“myCompThree”, {
template: “#myTempOne”
});
let vm = new Vue({
el: “#app”,
data: {
message: “yerts”
}
})