认识组件化开发
如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展，但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目。
组件化开发
现在可以说整个的大前端开发都是组件化的天下，无论从三大框架（Vue、React、Angular），还是跨平台方案的Flutter，甚至是移动端都在转向组件化开发，包括小程序的开发也是采用组件化开发的思想。所以，学习组件化最重要的是它的思想，每个框架或者平台可能实现方法不同，但是思想都是一样的。
我们需要通过组件化的思想来思考整个应用程序：我们将一个完整的页面分成很多个组件，每个组件都用于实现页面的一个功能块，每一个组件又可以进行细分，组件本身又可以在多个地方进行复用。
Vue的组件化
组件化是Vue、React、Angular的核心思想，也是我们后续课程的重点（包括以后实战项目）。
前面我们的createApp函数传入了一个对象App，这个对象其实本质上就是一个组件，也是我们应用程序的根组件。
组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用，任何的应用都会被抽象成一颗组件树。
接下来，我们来学习一下在Vue中如何注册一个组件，以及之后如何使用这个注册后的组件。
注册组件的方式
如果我们现在有一部分内容（模板、逻辑等），我们希望将这部分内容抽取到一个独立的组件中去维护，这个时候如何注册一个组件呢？
我们先从简单的开始谈起，比如下面的模板希望抽离到一个单独的组件中：
注册组件分成两种：
全局组件：在任何其他的组件中都可以使用的组件
局部组件：只有在注册的组件中才能使用的组件
注册全局组件
全局组件需要使用我们全局创建的app来注册组件，通过component方法传入组件名称、组件对象即可注册一个全局组件了，之后，我们可以在App组件的template中直接使用这个全局组件。
当然，组件本身也可以有自己的代码逻辑，比如自己的data、computed、methods等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- 4. 使用组件 -->
<component-a></component-a>
<!-- <ComponentName></ComponentName> -->
<component-name></component-name>
</template>
<!-- 1. 定义组件模板 -->
<template id="component-a">
<h2>{{title}}</h2>
<p>{{desc}}</p>
<button @click="btnClick">按钮点击</button>
</template>
<template id="component-b">
<h2>ComponentB</h2>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: "#my-app",
};
const app = Vue.createApp(App);
// 2. 使用app注册一个全局组件app.component()
// 全局组件: 意味着注册的这个组件可以在任何的组件模板中使用
app.component("component-a", {
template: "#component-a",
data() {
return {
title: "我是标题",
desc: "我是内容, 哈哈哈哈哈",
};
},
// 3. 组件中可以有自己的逻辑
methods: {
btnClick() {
console.log("按钮的点击");
},
},
});
app.component('ComponentName', {
template: "#component-b"
})
app.mount("#app");
</script>
</body>
</html>
组件的名称
在通过app.component注册一个组件的时候，第一个参数是组件的名称，定义组件名称的方式有两种：
- 方式一：使用kebab-case（短横线分割符）
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
- 方式二：使用PascalCase（驼峰标识符）
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
注册局部组件
全局组件往往是在应用程序一开始就会全局组件完成，那么就意味着如果某些组件我们并没有用到，也会一起被注册。
比如我们注册了三个全局组件：ComponentA、ComponentB、ComponentC，在开发中我们只使用了ComponentA、ComponentB，如果ComponentC没有用到但是我们依然在全局进行了注册，那么就意味着类似于webpack这种打包工具在打包我们的项目时，我们依然会对其进行打包，这样最终打包出的JavaScript包就会有关于ComponentC的内容，用户在下载对应的JavaScript时也会增加包的大小。
所以在开发中我们通常使用组件的时候采用的都是局部注册。
局部注册是在我们需要使用到的组件中，通过components属性选项来进行注册，比如之前的App组件中，我们有data、computed、methods等选项了，事实上还可以有一个components选项，该components选项对应的是一个对象，对象中的键值对是组件的名称:组件对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- 定义根组件模板 -->
<template id="my-app">
<h2>{{message}}</h2>
<!-- 4. 根组件中使用局部组件 -->
<component-a></component-a>
</template>
<!-- 1. 定义局部组件模板 -->
<template id="component-a">
<h2>我是组件A</h2>
<p>我是内容, 哈哈哈哈</p>
</template>
<script src="../js/vue.js"></script>
<script>
// 2. 将组件模板定义成组件
const ComponentA = {
template: "#component-a"
}
const App = {
template: '#my-app',
components: {
// key: 组件名称
// value: 组件对象
// 3. 注册局部组件
ComponentA: ComponentA
},
data() {
return {
message: "Hello World"
}
}
}
const app = Vue.createApp(App);
app.mount('#app');
</script>
</body>
</html>
Vue的开发模式
目前我们使用vue的过程都是在html文件中，通过template编写自己的模板、脚本逻辑、样式等。但是随着项目越来越复杂，我们会采用组件化的方式来进行开发，这就意味着每个组件都会有自己的模板、脚本逻辑、样式等。当然我们依然可以把它们抽离到单独的js、css文件中，但是这样属于那个组件的逻辑和样式就分离开了。而且我们的script是在一个全局的作用域下，很容易出现命名冲突的问题。并且我们的代码为了适配一些浏览器，必须使用ES5的语法，在我们编写代码完成之后，依然需要通过工具对代码进行构建。
所以在真实开发中，我们可以通过一个后缀名为 .vue 的single-file components (单文件组件) 来解决上述问题，并且可以使用webpack或者vite或者rollup等构建工具来对其进行处理。
单文件组件(SFC)的特点
在单文件组件中我们可以获得非常多的特性：
- 代码的高亮
- ES6、CommonJS的模块化能力
- 组件作用域的CSS
- 可以使用预处理器来构建更加丰富的组件，比如TypeScript、Babel、Less、Sass等
<template>
<div>
<h2>{{ title }}</h2>
<p>{{ desc }}</p>
<button @click="btnClick">按钮点击</button>
</div>
</template>
<script>
export default {
data() {
return {
title: "我是标题",
desc: "我是内容, 哈哈哈哈哈",
};
},
methods: {
btnClick() {
console.log("按钮的点击");
},
},
};
</script>
<style scoped></style>
如何支持SFC
如果我们想要使用支持SFC的.vue文件，比较常见的是两种方式：
方式一：使用Vue CLI来创建项目，项目会默认帮助我们配置好所有的配置选项，可以在其中直接使用.vue文件。
方式二：自己使用webpack或rollup或vite这类打包工具，对其进行打包处理。
我们最终，无论是后面我们做项目，还是在公司进行开发，通常都会采用Vue CLI的方式来完成。
但是在学习阶段，为了让大家理解Vue CLI打包项目的过程，我会接下来穿插讲解一部分webpack的知识，帮助大家更好的理解Vue CLI的原理以及其打包的过程。
网友评论