Vue.js组件精讲 开篇:Vue.js的精髓——组件

写在前面

Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化。写一个 Vue 工程,也就是在写一个个的组件。

业务场景是千变万化的,而不变的是 Vue.js 组件开发的核心思想和使用技巧,掌握了 Vue.js 组件的各种开发模式,再复杂的业务场景也可以轻松化解。本小册则着重介绍笔者在 3 年的 Vue.js 开发及两年的 iView 开源中积累和沉淀的对 Vue.js 组件的见解和经验。

本小册不会介绍 Vue.js 的基础用法,因为市面上已经沉淀了大量的相关技术资料,而且 Vue.js 的文档已经足够详细。如果您尚未接触 Vue.js 或正打算开始了解,推荐您先阅读笔者出版的《Vue.js 实战》(清华大学出版社)一书,它适合刚接触 Vue.js 的开发者。因此,本小册适合已经了解或使用过 Vue.js 的开发者。

这一节,我们先笼统地聊聊 Vue.js 组件和组件化以及本小册各章节的梳理。

组件的分类

一般来说,Vue.js 组件主要分成三类:

1.由 vue-router 产生的每个页面,它本质上也是一个组件(.vue),主要承载当前页面的 HTML 结构,会包含数据获取、数据整理、数据可视化等常规业务。整个文件相对较大,但一般不会有 props 选项和 自定义事件,因为它作为路由的渲染,不会被复用,因此也不会对外提供接口。

在项目开发中,我们写的大部分代码都是这类的组件(页面),协同开发时,每人维护自己的页面,很少有交集。这类组件相对是最好写的,因为主要是还原设计稿,完成需求,不需要太多模块和架构设计上的考虑。

2.不包含业务,独立、具体功能的基础组件,比如日期选择器、模态框等。这类组件作为项目的基础控件,会被大量使用,因此组件的 API 进行过高强度的抽象,可以通过不同配置实现不同的功能。比如笔者开源的 iView,就是包含了 50 多个这样基础组件的 UI 组件库。

每个公司都有自己的组件使用规范或组件库,但要开发和维护一套像 iView 这样的组件库,投入的人力和精力还是很重的,所以出于成本考虑,很多项目都会使用已有的开源组件库。

独立组件的开发难度要高于第一类组件,因为它的侧重点是 API 的设计、兼容性、性能、以及复杂的功能。这类组件对 JavaScript 的编程能力有一定要求,也会包含非常多的技巧,比如在不依赖 Vuex 和 Bus(因为独立组件,无法依赖其它库)的情况下,各组件间的通信,还会涉及很多脑壳疼的逻辑,比如日期选择器要考虑不同时区、国家的日历习惯,支持多种日期格式。

本小册也会重点介绍此类组件的各种开发模式和技巧,对应不同的模式,会带有具体的组件实战。

4.业务组件。它不像第二类独立组件只包含某个功能,而是在业务中被多个页面复用的,它与独立组件的区别是,业务组件只在当前项目中会用到,不具有通用性,而且会包含一些业务,比如数据请求;而独立组件不含业务,在任何项目中都可以使用,功能单一,比如一个具有数据校验功能的输入框。

业务组件更像是介于第一类和第二类之间,在开发上也与独立组件类似,但寄托于项目,你可以使用项目中的技术栈,比如 Vuex、axios、echarts 等,所以它的开发难度相对独立组件要容易点,但也有必要考虑组件的可维护性和复用性。

小册的内容

因为本小册是围绕 Vue.js 组件展开的,所以第二节会讲解 Vue.js 组件的三个 API:prop、event、slot,当然,如果你已经开发过一些独立组件,完全可以跳过这节内容。

3 - 7 小节会介绍组件间通信的一些方法和黑科技,一部分是 Vue.js 内置的,一部分是自行实现的,在实际开发中,会非常实用。同时也利用这些方法完成了两个具体的实战案例:

1.具有数据校验功能的表单组件 —— Form;
2.组合多选框组件 —— CheckboxGroup & Checkbox。

本小册都会以这种核心科技 + 对应实战的形式展开。

8 - 10 小节介绍 Vue 的构造器 extend 和手动挂载组件 $mount 的用法及案例。Vue.js 除了我们正常 new Vue() 外,还可以手动挂载的,这 3 节将介绍手动挂载一个 Vue 组件的使用场景。其中涉及到两个案例:

1.动态渲染 .vue 文件的组件 —— Display;
2.全局通知组件 —— $Alert。

Display 组件用于将 .vue 文件渲染出来,线上的案例是 iView Run,它不需要你重新编译项目,就可以渲染一个标准的 Vue.js 组件。

$Alert 是全局的通知组件,它的调用方法不同于常规组件。常规组件使用方法形如:

<template><Alert content="通知内容" :duration="3"></Alert>
</template>
<script>import Alert from '../components/alert.vue';export default {components: { Alert }}
</script>

而 $Alert 的调用更接近 JS 语法:

export default {methods: {showMessage () {this.$Alert({content: '通知内容',duration: 3});}}
}

虽然与常规 Vue 组件调用方式不同,但底层仍然由 Vue 组件构成和维护。

11 - 12 小节介绍 Render 函数与 Functional Render,并完成一个能够渲染自定义列的 Table 组件。Render 函数也是 Vue.js 组件重要的一部分,只不过在大多数业务中不常使用。本小节会介绍它的使用场景。

13 小节介绍作用域 slot(slot-scope),并基于这种方法同样实现 Table 组件。slot 用的很多,但 slot-scope 在业务中并不常用,但在一些特定场景下,比如组件内部有循环体时,会非常实用。

14 - 15 小节介绍递归组件,并完成树形控件 —— Tree。

16 - 19 小节是综合拓展,会着重讲解 Vue.js 容易忽略却很重要的 API,以及对 Vue.js 面试题的详细分析。除此之外,还会总结笔者在两年的 iView 开源经历中的经验,除了技术细节外,还包括开源项目的持续性发展、推广等。

结语

三年前,我开始接触 Vue.js 框架,当时就被它的轻量、组件化和友好的 API 所吸引。与此同时,我也开源了 iView 项目。三年的磨(cǎi )砺(kēng),沉淀了不少关于 Vue.js 组件的经验。

本小册的内容也许不会让你的技术一夜间突飞猛进,但绝对使你醍醐灌顶。

那么,请准备好一台电脑和一杯咖啡,一起来探索 Vue.js 的精髓吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/791527.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

达梦配置ODBC连接

达梦配置ODBC连接 基础环境 操作系统&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本&#xff1a;DM Database Server 64 V8 架构&#xff1a;单实例1 下载ODBC包 下载网址&#xff1a;https://www.unixodbc.org/ unixODBC-2.3.0.tar.gz2 编译并…

python-django物流仓储进销存配送管理系统flask_1ea2k

实现了一个完整的物流管理系统&#xff0c;其中主要有站点信息模块、物流进度模块、用户表模块、司机模块、入库信息模块、签收信息模块、类型模块、快递信息模块、客户模块、客服模块、公告信息模块、服务类型模块、配置文件模块、出库信息模块、车辆信息模块、仓管模块、账户…

有一个已排好序的数组,要求输入一个数后,按原来排序的规律将它插入数组中

#include <stdio.h> // 标准输入输出头文件 int main(){ // 初始化数组a&#xff0c;包含10个有序整数 int a[11]{1,4,6,9,13,16,19,28,40,100}; int temp1,temp2,number,end,i,j; // 打印数组a的当前内容 printf("请输入数组a:\n"…

Lucky Chains

题目链接 Educational Codeforces Round 139 (Rated for Div. 2) D. Lucky Chains 取模的性质&#xff0c;更相减损术 思路&#xff1a; 我们假设链的长度为 w w w&#xff0c;不妨设 x ≥ y x\ge y x≥y&#xff0c;那么 g c d ( x k , y k ) 1 ( 0 ≤ k ≤ w ) gcd…

生成式AI的情感实验——AI能否产生思想和情感?

机器人能感受到爱吗&#xff1f;这是一个很好的问题&#xff0c;也是困扰了科学家们很多年的科学未解之谜。虽然我们尚未准备好向智能机器赋予情感&#xff0c;但智能机器却已经可以借助生成式人工智能&#xff08;AI&#xff09;来帮助我们表达自己的情感。 自然情感表达 AI正…

阻抗控制中的effort and flow

阻抗控制&#xff0c;由Hogan在&#xff08;Hogan&#xff0c;1985&#xff09;中首次描述&#xff0c;已被广泛应用于机器人系统的控制中&#xff0c;以调节交互或接触任务的遵从性。阻抗表示运动与相互作用力或扭矩之间的动态关系。 阻抗控制是一种基于力的控制方法&#xf…

leetcode3100--换水问题II

1. 题意 经典空瓶换汽水问题 2. 题解 直接模拟即可 class Solution { public:int maxBottlesDrunk(int numBottles, int numExchange) {int ans 0;while (numBottles > numExchange) {ans numExchange;numBottles - numExchange - 1;numExchange;}return ans numBott…

risc-v向量扩展strlen方法学习

riscv向量文档中给出了strlen的实现&#xff0c; 大概是这么一个思路&#xff0c; 加载向量: 使用向量加载指令&#xff08;如 vload&#xff09;从内存中加载一个向量长度的字符。比较向量与零: 使用向量比较指令&#xff08;如 vmask 或 vcmpeq&#xff09;来检查向量中的每…

加快形成新质生产力的重要着力点

新一轮科技革命和产业变革、大国竞争加剧以及我国经济发展方式转型等重大挑战在当下形成历史性交汇&#xff0c;这也为我国创造了重要的战略机遇。想要牢牢抓住发展的“机会窗口”&#xff0c;必须以科技创新推动产业创新&#xff0c;以产业升级构筑竞争新优势&#xff0c;加快…

Linux网络协议栈从应用层到内核层④

文章目录 1、网卡接受数据2、网络设备层接收数据3、ip层接受数据4、tcp层接受数据5、上层应用读取数据6、数据从网卡到应用层的整体流程 1、网卡接受数据 当网卡收到数据时&#xff0c;会触发一个中断&#xff0c;然后就会调用对应的中断处理函数&#xff0c;再做进一步处理。…

Least Prefix Sum

题目链接 Hello 2023 C. Least Prefix Sum 思路&#xff1a; 仔细看式子&#xff0c;发现可以对它进行推理&#xff08; m m m 是定值&#xff0c; 1 ≤ k ≤ n 1\le k\le n 1≤k≤n &#xff09;&#xff1a; 当 k ≤ m k\le m k≤m 时&#xff0c;有 a 1 a 2 ⋯ a …

pycharm

✅作者简介&#xff1a;CSDN内容合伙人、阿里云专家博主、51CTO专家博主、新星计划第三季python赛道Top1&#x1f3c6; &#x1f4c3;个人主页&#xff1a;hacker707的csdn博客 &#x1f525;系列专栏&#xff1a;零基础学Python &#x1f4ac;个人格言&#xff1a;不断的翻越一…

ubuntu22.04 静态IP设置脚本

#!/bin/bash# 设置静态IP地址的脚本# 网卡名称 interface"ens33"# 静态IP地址 ip_address"192.168.225.2"# 子网掩码长度 subnet_mask_len"24"# 默认网关 default_gateway"192.168.225.1"# DNS服务器 dns_servers"[114.114.114.1…

企业计算机服务器中了mallox勒索病毒怎么办?Mallox勒索病毒解密流程步骤

网络技术的不断应用与发展&#xff0c;为企业的生产运营带来了极大便利&#xff0c;企业通过网络办公开展各项工作业务已经成为常态&#xff0c;网络为企业的发展带来了更多机遇&#xff0c;但随之而来的网络数据安全威胁也在不断增加。近期&#xff0c;云天数据恢复中心接到山…

19k star, 导出微信聊天记录,生成 HTML、Word、CSV等格式,并分析聊天数据,做成可视化年报

19k star, 导出微信聊天记录&#xff0c;生成 HTML、Word、CSV等格式&#xff0c;并分析聊天数据&#xff0c;做成可视化年报 分类 开源分享 项目名: 留痕 -- 一款强大的微信聊天管理工具 Github 开源地址&#xff1a;https://github.com/LC044/WeChatMsg Gitee 开源地址&…

分布式架构中一些常用算法的理解

对分布式算法 - 一致性Hash算法的理解 一致性哈希算法是一种分布式算法&#xff0c;用于解决数据分布和负载均衡问题。它通过将数据和节点映射到一个哈希环上&#xff0c;实现了数据在节点之间的均匀分布和最小化数据迁移。 一致性哈希算法的核心思想是将数据和节点都映射到哈…

python随笔学习

python里面的高阶函数: 在Python中&#xff0c;高阶函数是指能够接收其他函数作为参数&#xff0c;或者将函数作为返回值的函数。这种特性使得函数更加灵活&#xff0c;可以用来构建更复杂的功能。 Python中常见的高阶函数: map(function, iterable)&#xff1a;将一个函数应…

百度行驶证C++离线SDK V1.1 C#接入

百度行驶证C离线SDK V1.1 C#接入 目录 说明 效果 项目 代码 下载 说明 自己根据SDK封装了动态库&#xff0c;然后C#调用。 SDK包结构 效果 项目 代码 using Newtonsoft.Json; using System; using System.Drawing; using System.Runtime.InteropServices; using System…

LeetCode-94. 二叉树的中序遍历【栈 树 深度优先搜索 二叉树】

LeetCode-94. 二叉树的中序遍历【栈 树 深度优先搜索 二叉树】 题目描述&#xff1a;解题思路一&#xff1a;递归解题思路二&#xff1a;迭代解题思路三&#xff1a;0 题目描述&#xff1a; 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 示例 1&#xff1…

基于Python深度学习的中文情感分析系统(V2.0)

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…