跳至主要內容

组件化开发

Guitar大约 5 分钟

组件化概述

组件 Component：实现应用中局部功能的代码和资源的集合。

  • 组件实例称为 vc（vue component）。

组件化应用：凡是采用组件方式开发的应用都可以称为组件化应用。

类似于模块与模块化应用。

模块：一个大的 js 文件按照模块化拆分规则进行拆分，生成多个 js 文件，每一个 js 文件叫做模块。

模块化应用：凡是采用模块方式开发的应用都可以称为模块化应用。

  • 组件可以包含 html（结构）、css（样式）、js（交互）、媒体等，可以说组件是包含模块的。

  • 组件的划分粒度很重要，粒度太粗的话影响复用性，太细又有时又浪费精力。

  • Vue组件支持嵌套，把复用性拉满。

    子组件由父组件来管理，父组件由父组件的父组件管理。在 Vue 中根组件就是 vm。因此每一个组件也是一个 Vue 实例。

    js不进行类型检查，Vue实例指

*传统应用存在的问题：

  1. 关系纵横交织，复杂，牵一发动全身，不利于维护。（高耦合）
  2. 代码虽然复用，但复用率不高。

组件的使用

组件使用分三步：

  1. 创建组件
  2. 注册组件
  3. 使用组件

创建组件

const vc = Vue.extend(optionObj)

optionObj 与 vm 几乎相同，略有差别：

  1. 创建Vue组件的时候，配置项中不能使用el配置项，需要使用template配置项来配置模板语句。

    el配置项是进行挂载的，vm才能用。

  2. 配置项中的data不能使用直接对象的形式，必须使用function形式（getter）。

    用以确保组件实例化时每个vc对象都有自己的一份data。

注册组件

// 局部注册：在父组件或vm的配置项中使用 components 配置项进行子组件注册（常用）
components : {
    组件的名字 : vc对象
}

// 全局注册：全局注册的组件在整个应用中都是可用的，vc、vm中可用直接使用（较少用）
Vue.component('组件的名字', vc对象)

使用组件

// 在模板中直接使用即可
`<div>
	<组件名></组件名>
</div>`
  • 必须是已经注册了的组件才能使用。（全局注册或是在本vc配置项中注册）。
  • 哪里注册的，就在哪里的模板里用。
  • 将注册时的名字来作为标签名使用（与变量名无关）。

小细节

  1. 在Vue当中是可以使用自闭合标签的，但是前提必须在脚手架环境中使用。

  2. 在创建组件的时候 Vue.extend() 可以省略，但是底层实际上还是会调用的，在注册组件的时候会调用。

    const vc = optionObj;

  3. 组件的名字

第一种：全部小写

第二种：首字母大写，后面都是小写。（Vue开发者工具默认显示就是这个格式）

第三种：kebab-case命名法（串式命名法。例如：user-login）

第四种：CamelCase命名法（驼峰式命名法。例如：UserLogin），但是这种方式只允许在脚手架环境中使用。

  • 不要使用HTML内置的标签名作为组件的名字。

  • 在创建组件的时候，通过配置项配置一个name，这个name不是组件的名字，是设置Vue开发者工具中显示的组件的名字。

    const vc = {
    name:"My Component";
    ...
}

vc 与vm

Vue.extend(...) 返回的是 vc 的构造函数 vc-constructor，是一个function VueComponent(...)。

vc 真正的实例化实在解析到模板中对应的标签时，此时才会创建真正的 vc 实例。

  • 此后也不区分 vc 跟 vc-constructor 的表述。
  • vm 由开发人员创建，vc 由vue创建（在解析模板时，一对标签对应一个vc实例）。

vc 是 vm 的缩减版，vc 有的 vm 都有，vm 有的 vc 不一定有（但大部分还是有的）。

通过vc可用访问到vm的原型对象上的属性。

设计原因：代码复用。

底层原理：VueComponent.prototype.__proto__ = Vue.prototype。

image-20230606220731713
image-20230606220731713
  • 这样使得：Vue、vm、VueComponent、vc 都共享了 Vue 的原型对象。

单文件组件

单文件组件：一个 .vue 文件对应一个组件，使得组件得以在其他文件中使用。

  • .vue 文件需要经过 vue 的编译，才能转换为浏览器能识别的 html、css、js。

单文件组件的文件名命名规范：

  1. 全部小写
  2. 首字母大写，后面全小写
  3. kebab-case
  4. CamelCase（使用这种方式居多，和vue开发者工具呼应）

.vue 文件内容：

<!--结构-->
<template>
	...
</template>

<!--交互-->
<script>
	...
</script>

<!--样式-->
<style>
	...
</style>
  • 三部分对应于一个组件的主要内容（html、js、css）。

在 .vue 文件中共用组件需要使用 import 和 export 的ES6语法：

// 导入外部组件，供以注册
import OtherComponent from "./../xxx.vue";

const vc = { 
	components : {OtherComponent}
    // 注册组件，注册后模板中可用
};
export default vc; // 默认导出即可，供其他组件注册、使用本组件

通常在 main.js 中完成 vm 的创建，作为整个App的入口：

new Vue({
    el : "#app";
})

在html页面中引入 vue.js 和 main.js 即可完成整个App的渲染：

<html>
    <head>
        ...
    </head>
    <body>
        
    </body>
    <sript src="./vue.js"></sript> <!--先引入vue-->
    <sript src="./main.js"></sript>
</html>

执行原理：

第一步：浏览器打开 index.html 页面，加载容器

第二步：加载 vue.js 文件，有了 Vue

第三步：加载 main.js ，完成所有组件以及子组件的创建和注册。

第四步：创建 Vue 实例 vm，编译模板语句，渲染。

浏览器并不支持ES6模块化语法，故不能直接运行，需要搭建Vue脚手架环境来运行。

Copyright ©2024-present Guitar