作者：李亚飞

---

Debugging is like trying to find a needle in a haystack, except the needle is also made of hay.

Debug调试就像是在大片的干草堆中找针一样，只不过针也是由干草制成的。

在软件开发的世界里，偶尔会出现一些非常隐蔽的 Bug，这时候工程师们像探险家一样，需要深入代码的丛林，寻找隐藏在其中的“幽灵宝藏”。前段时间，我和我的团队也踏上了这样一段刺激、有趣的探险之旅。

最近繁忙的工作告一段落，我总算轻松下来了，想趁这个机会，跟大家分享我们的这次“旅途”。

01 引子

我是 ShowMeBug 的 CEO 李亚飞，是一个古老的 Ruby 工程师。由于 2019 年招聘工程师的噩梦经历，我立志打造一个真实模拟工作场景的 IDE，用来终结八股文、算法横行的技术招聘时代。

这个云上的 IDE 引擎，我称之为轻协同 IDE 引擎——因为它不是为了繁杂重度的工作场景准备的，而是适应于大部分人的习惯、能快速上手熟悉、加载速度快、能协同（面试用）、低延迟感，让用户感受非常友好 。

多环境启动与切换

为了达成秒级启动环境的性能要求，我们设计了一套精巧的分布式文件系统架构，其核心是一个可以瞬间复制大量小文件的写时复制 (COW) 技术。IO 吞吐能达到几万人同时在线，性能绝对是它的一大优势。

我们对此信心满满，然而没想到，很快就翻车了。

02 探险启程

2023 年 1 月，北方已经白雪皑皑，而深圳却仍难以感受到冬天的寒意。

我和我的团队在几次打开文件树的某个文件时，会显得有点慢——当时没有人在意，按照常规思路，“网速”背了这个锅。事后我们复盘才发现，这个看似微不足道的小问题，其实正是我们开始这次探险之旅的起点。

1 月底，南方的寒意缓缓侵入。这时候我们的轻协同 IDE 引擎已经开始陆续支持了 Vue2、Vue3、React、Django、Rails 等框架环境，一开始表现都很棒，加载和启动速度都很快。但是，跑了一段时间，我们开始察觉，线上环境就出现个别环境（Rails 环境）启动要 20-30s 才能完成。

虽然其他环境仍然保持了极快的加载和启动速度，但敏锐的第六感告诉我，不行，这一定有什么猫腻，如果不立即行动，势必会对用户体验带来很不好的影响。于是，我开始安排团队排查眼前这个不起眼的问题，我们的探险之旅正式开始。

03 初露希望

湿冷的冬季，夜已深，我和我们的团队依旧坐在电脑前苦苦探索，瑟瑟发抖。

探险之旅的第一站，就是老大难的问题：定位Bug。目前只有某一个环境启动很慢，其他的环境都表现不错。大家想了很多办法都没有想明白为什么，甚至怀疑这个环境的模板是不是有问题——但把代码放在本地启动，最多就2秒。

哎，太诡异了。我们在这里卡了至少一周时间，不断追踪代码，分析日志文件，尝试各种方案，都没有弄清楚一个正常的程序启动为什么会慢。我们一度陷入了疲惫和焦虑的情绪中。

Debug 是种信仰，只有坚信自己能找到 Bug，才有可能找到 Bug。

软件开发界一直有一个低级 Bug 定律：所有诡异的问题都来自一个低级原因。在这“山重水复疑无路”之际，我们决定重新审视我们的探险路径：为什么只有 Rails 更慢，其他并不慢？会不会只是一个非常微小的原因而导致？

这时候，恰好有一个架构师朋友来访，向我们建议，可以用 perf 火焰图分析看看 Rails 的启动过程。

perf火焰图实例

当我们用 perf 来分析时，惊讶地发现：原来 Rails 的启动要加载更多的文件！ 紧接着，我们又重新用了一个文件读写监控的工具：fatrace，通过它，我们看到 Rails 每次启动需要读写至少 5000 个文件，但其他框架并不需要。

这才让我们突然意识到，会不会是文件系统读写速度不及预期，导致了启动变慢。

04 Bug现身

为了搞清楚是不是文件系统读写速度的问题，我急需一个测试 IO 抖动的脚本。我们初步估算一下，写好这个脚本需要好几个小时的时间。

夜已深，研发同学都陆续下班了。时间紧迫！我想起了火爆全球的 ChatGPT，心想，不如让它写一个试试。

测试 IO 抖动的脚本

Cool，几乎不需要改动就能用，把代码扔在服务器开跑，一测，果然发现问题：每一次文件读写都需要 10-20ms 才能完成 。实际上，一个优秀的磁盘 IO 读写时延应该在亚毫级，但这里至少慢了 50 倍。

Bingo，如同“幽灵宝藏”一般的分子级 Bug 逐渐显现，问题的根因已经确认：过慢的磁盘 IO 读写引发了一系列操作变慢，进而导致启动时间变得非常慢 。

更庆幸的是，它还让我们发现了偶尔打开文件树变慢的根本原因，这也是整个系统并发能力下降的罪魁祸首 。

05 迷雾追因

看到这里，大家可能会问，这套分布式文件系统莫非一直这么慢，你们为什么在之前没有发现？

非也，早在项目开始的时候，这里的时延是比较良好的，大家没有特别注意这个 IOPS 性能指标，直到我们后面才留意到，系统运行超过一个月时，IO 读写时延很容易就进入到卡顿的状态，表现就是文件系统所在主机 CPU 忽高忽低，重启就会临时恢复。

此时，探险之旅还没结束。毕竟，这个“幽灵宝藏”周围依旧笼罩着一层迷雾。

我们继续用 fatrace（监控谁在读写哪个 IO）监控线上各个候选人答题目录的 IO读写情况，好家伙，我们发现了一个意外的情况：几乎每一秒都有一次全量的文件 stats 操作 (这是一个检测文件是否有属性变化的 IO 操作）！

也就是说，比如有 1000 个候选人正在各自的 IDE 中编码，每个候选人平均有 300 个文件，就会出现每秒 30 万的 IO 操作数！

我们赶紧去查资料，根据研究数据显示，一个普通的 SSD 盘的 IOPS 最高也就到 2-3 万 。于是，我们重新测试了自己分布式文件系统的 IOPS 能力，结果发现也是 2-3 万 。

那这肯定远远达不到我们理想中的能力级别。

这时，问题更加明确：某种未知的原因导致了大量的 IOPS 的需求，引发了 IO 读写时延变长，慢了大约几十倍。

06 接近尾声

我和我的团队继续深究下去，问题已经变得非常明确了：

原来，早在去年 12 月，我们上线一个监听文件增删的变化来通知各端刷新的功能。

最开始我们采用事件监听 (fswatch event)，因为跨了主机，所以存在 1-2s 的延迟。研发同学将其改为轮询实现的方案，进而引发了每秒扫描目录的 stats 行为。

当在百人以下访问时，IOPS 没有破万，还足够应对。但一旦访问量上千，便会引发 IO 变慢，进而导致系统出现各种异常：间歇导致某些关键接口 QPS 变低，进而引发系统抖动。

随着“幽灵宝藏”显露真身，这次分子级 Bug 的探险之旅也已经接近尾声。团队大
呼：这过程实在太酸爽了！

07 技术无止境

每一个程序员在成长路上，都需要与 Bug 作充足的对抗，要么你勇于探索，深入代码的丛林，快速定位，挖到越来越丰富的“宝藏”，然后尽情汲取到顶级的知识，最终成为高手；或者被它打趴下, 花费大量时间都找不到问题的根源，成为芸芸众生中的一人。

当然，程序员的世界中，不单单是 Debug。

当我毕业 5 年之后，开始意识到技术的真正价值是解决真正的社会问题。前文中我提到，由于我发现技术招聘真是一个极其痛苦的事：特别花面试官的时间，却又无法有效分析出候选人的技术能力，所以创立 ShowMeBug 来解决这个问题：用模拟实战的编程环境，解决科学评估人才的难度。

这个轻协同 IDE 技术从零开发，支持协同文件树、完全自定义的文件编辑器、协同的控制台 (Console) 与终端 (Shell)，甚至直接支持 Ctrl+P 的文件树搜索，不仅易于使用，又强大有力。

但是这还不够。要知道，追求技术精进是我们技术人的毕生追求。对于这个轻协同IDE，我们追求三个零：零配置、零启动、零延迟。其中，零启动就是本文所追求的极限：以最快的速度启动环境和切换环境。

因此，探险之旅结束后，我们进一步改进了此文件系统，设定 raid 的多磁盘冗余，采用高性能 SSD，同时重新制定了新磁盘架构参数，优化相关代码，最终大幅提升了分布式文件系统的稳定性与并发能力。

截止本文结尾，我们启动环境的平均速度为 1.3 秒，切换环境速度进入到亚秒级，仅需要 780ms。目前在全球范围的技术能力评估赛道 (TSA) 中，具备 1-2 年的领先性。

08 后记

正当我打算结束本文时，我们内部的产品吐槽群信息闪烁，点开一看：嚯，我们又发现了新 Bug。

立夏已至，我们的探险之旅又即将开始。

在深圳地铁延误、临停n次之后

终于让我不得不又new了一个py文件😭😭

这次主要记录的是一个延误告警的开发过程

一、实现逻辑

使用库：requests，time，zmail，re

实现逻辑：

1、抓取深圳地铁微博的文章

2、判断是否有延误相关的内容

3、判断时间是否是今天

4、通知方式：邮件

5、定时执行任务

二、抓取深圳地铁微博（一中1～3）

def goout_report():

    url ="https://weibo.com/ajax/statuses/mymblog"

    # url ="https://weibo.com/szmcservice/statuses/mymblog"

    data = {"uid":2311331195,"page":1,"feature":0}

    headers={

    "accept":"application/json, text/plain, */*",

    "accept-encoding":"gzip, deflate, br",

    "accept-language":"zh-CN,zh;q=0.9",

    "referer":"https://weibo.com/szmcservice?tabtype=feed",

    "cookie":"SUB=_2AkMV8LtUf8NxqwJRmf8XzmLgaY9wywjEieKjrEqPJRMxHRl-yT92ql0ctRB6PnCVuU8iqV308mSwZuO-G9gDVwYDBUdc; SUBP=0033WrSXqPxfM72-Ws9jqgMF55529P9D9WFpwsXV4nqgkyH.bEVfx-Xw; login_sid_t=c6bbe5dc58bf01c49b0209c29fadc800; cross_origin_proto=SSL; _s_tentry=passport.weibo.com; Apache=4724569630281.133.1655452763512; SINAGLOBAL=4724569630281.133.1655452763512; ULV=1655452763517:1:1:1:4724569630281.133.1655452763512:; wb_view_log=1920*10801; XSRF-TOKEN=1YMvL3PsAm21Y3udZWs5LeX3; WBPSESS=xvhb-0KtQV-0lVspmRtycws5Su8i9HTZ6dAejg6GXKXDqr8m6IkGO6gdtA5nN5IMNb5JZ1up7qJoFXFyoP2RSQSYXHY1uLzykpOFENQ07VthB0G9WHKwRCMWdaof42zB4mOkdTEeX_N9-m1x6Cpm3pmPsC1YhmTwqH8RGwXmYkI=",

    "referer":"https://weibo.com/szmcservice",

    "x-requested-with": "XMLHttpRequest",

    "x-xsrf-token":"1YMvL3PsAm21Y3udZWs5LeX3",

    "sec-ch-ua":'Not A;Brand";v="99", "Chromium";v="102", "Google Chrome";v="102',

    "sec-ch-ua-platform":"Windows",

    "sec-fetch-dest": "empty",

    }

    text = requests.get(url,headers=headers,params=data,verify=False).json()['data']['list']

    today_date = time.ctime()[:10]

    for i in range(1,5):

        time_post = text[i]['created_at'][:10]

        content = str(text[i]).split("'text': '")[1].split(", 'textLength'")[0]

        tp=""

        if '延误' in content and time_post == today_date:

            # mail(content)

            text = re.findall(">(.*?)<|>(.*?)\\",content)

            for i in text:

                for j in i:

                    if j!="":





                       tp=tp+j



           mail(tp)

            break

        else:

            continue

 

三、邮件通知，代码如下

def mail(content):

    mail = {

        'subject': '别墨迹了！地铁又双叒叕延误啦',  #邮件标题

        'content_text': content,  # 邮件内容

    }

    server = zmail.server('自己的邮箱', '密码',smtp_host="smtp.qq.com",

                      smtp_port=465) #此处用的qq邮箱、授权码

    server.send_mail('收件人邮箱', mail)

ps：需去QQ邮箱网页版-设置-账户-开启smtp服务、获取授权码

四、定时执行任务

1、Jenkins比较合适项目的一个定时执行，

可参考如下：

jenkins环境： jenkins环境部署踩坑记

git环境：Mac-git环境搭建

2、windows-计算机管理比较合适脚本的执行，具体步骤如下，

• 
  

  windows键+R输入compmgmt.msc可进入计算机管理界面

  
  

  

  
  


• 
  

  点击上图“创建任务”后如图，

  
  

  “常规”界面上输入任务名称、选项二，

  
  

  这样锁屏也会自动执行脚本

  
  

  

  
  


• 
  

  点击“触发器”-新建进入新建触发器界面

  
  

  这个界面可设置任务执行时间、执行频率、任务重复间隔、延迟时间等等

  
  

  

  
  


• 
  

  点击“操作”-新建跳到如图-新建操作界面

  
  

  这个界面可在“程序或脚本”输入框设置脚本运行程序，比如python.exe

  
  

  在“添加参数”输入框设置需要运行脚本路径（包含脚本名）

  
  

  在“起始于”输入框设置脚本执行路径（一般可为脚本目录）

  
  

  

  
  


• 
  

  其他选项卡也可以看看，

  
  

  全部填写完可以点击“创建任务”界面上的“确定”按钮，

  
  

  然后在列表中找到新建的任务点击可查看，

  
  

  

  
  


• 
  

  实时执行测试的话可以点击上图“运行”按钮

  
  

  或者右击任务-运行即可

  
  

  任务执行结果如下：

  
  

---

哈哈，如题所说，对于很多人来说写正则就是”兰德里的折磨“吧。如果不是有需求频繁要用，根本就不会想着学它。(?!^)(?=(\\d{3})+ 这种就跟外星文一样。

但你要说是用它，它又真的好用。用来做做校验、做做字符串提取、做做变形啥的，真不错。最好的就是能 CV 过来直接用~

本篇带来 15 个正则使用场景，按需索取，收藏恒等于学会！！

千分位格式化

在项目中经常碰到关于货币金额的页面显示，为了让金额的显示更为人性化与规范化，需要加入货币格式化策略。也就是所谓的数字千分位格式化。

1. 123456789 => 123,456,789


2. 123456789.123 => 123,456,789.123

const formatMoney = (money) => {

  return money.replace(new RegExp(`(?!^)(?=(\\d{3})+${money.includes('.') ? '\\.' : '$'})`, 'g'), ',')  

}



formatMoney('123456789') // '123,456,789'

formatMoney('123456789.123') // '123,456,789.123'

formatMoney('123') // '123'

想想如果不是用正则，还可以用什么更优雅的方法实现它？

解析链接参数

你一定常常遇到这样的需求，要拿到 url 的参数的值，像这样：

// url 



const name = getQueryByName('name') // fatfish

const age = getQueryByName('age') // 100

通过正则，简单就能实现 getQueryByName 函数：

const getQueryByName = (name) => {

  const queryNameRegex = new RegExp(`[?&]${name}=([^&]*)(&|$)`)

  const queryNameMatch = window.location.search.match(queryNameRegex)

  // Generally, it will be decoded by decodeURIComponent

  return queryNameMatch ? decodeURIComponent(queryNameMatch[1]) : ''

}



const name = getQueryByName('name')

const age = getQueryByName('age')



console.log(name, age) // fatfish, 100

驼峰字符串

JS 变量最佳是驼峰风格的写法，怎样将类似以下的其它声明风格写法转化为驼峰写法？

1. foo Bar => fooBar

2. foo-bar---- => fooBar

3. foo_bar__ => fooBar

正则表达式分分钟教做人：

const camelCase = (string) => {

  const camelCaseRegex = /[-_\s]+(.)?/g

  return string.replace(camelCaseRegex, (match, char) => {

    return char ? char.toUpperCase() : ''

  })

}



console.log(camelCase('foo Bar')) // fooBar

console.log(camelCase('foo-bar--')) // fooBar

console.log(camelCase('foo_bar__')) // fooBar

小写转大写

这个需求常见，无需多言，用就完事儿啦：

const capitalize = (string) => {

  const capitalizeRegex = /(?:^|\s+)\w/g

  return string.toLowerCase().replace(capitalizeRegex, (match) => match.toUpperCase())

}



console.log(capitalize('hello world')) // Hello World

console.log(capitalize('hello WORLD')) // Hello World

实现 trim()

trim() 方法用于删除字符串的头尾空白符，用正则可以模拟实现 trim：

const trim1 = (str) => {

  return str.replace(/^\s*|\s*$/g, '') // 或者 str.replace(/^\s*(.*?)\s*$/g, '$1')

}



const string = '   hello medium   '

const noSpaceString = 'hello medium'

const trimString = trim1(string)



console.log(string)

console.log(trimString, trimString === noSpaceString) // hello medium true

console.log(string)

trim() 方法不会改变原始字符串，同样，自定义实现的 trim1 也不会改变原始字符串；

HTML 转义

防止 XSS 攻击的方法之一是进行 HTML 转义，符号对应的转义字符：

正则处理如下：

const escape = (string) => {

  const escapeMaps = {

    '&': 'amp',

    '<': 'lt',

    '>': 'gt',

    '"': 'quot',

    "'": '#39'

  }

  // The effect here is the same as that of /[&<> "']/g

  const escapeRegexp = new RegExp(`[${Object.keys(escapeMaps).join('')}]`, 'g')

  return string.replace(escapeRegexp, (match) => `&${escapeMaps[match]};`)

}



console.log(escape(`

  


    
hello world


  


`))

/*

<div>

  <p>hello world</p>

</div>

*/

HTML 反转义

有了正向的转义，就有反向的逆转义，操作如下：

const unescape = (string) => {

  const unescapeMaps = {

    'amp': '&',

    'lt': '<',

    'gt': '>',

    'quot': '"',

    '#39': "'"

  }

  const unescapeRegexp = /&([^;]+);/g

  return string.replace(unescapeRegexp, (match, unescapeKey) => {

    return unescapeMaps[ unescapeKey ] || match

  })

}



console.log(unescape(`

  <div>

    <p>hello world</p>

  </div>

`))

/*



  
hello world




*/

校验 24 小时制

处理时间，经常要用到正则，比如常见的：校验时间格式是否是合法的 24 小时制：

const check24TimeRegexp = /^(?:(?:0?|1)\d|2[0-3]):(?:0?|[1-5])\d$/

console.log(check24TimeRegexp.test('01:14')) // true

console.log(check24TimeRegexp.test('23:59')) // true

console.log(check24TimeRegexp.test('23:60')) // false

console.log(check24TimeRegexp.test('1:14')) // true

console.log(check24TimeRegexp.test('1:1')) // true

校验日期格式

常见的日期格式有：yyyy-mm-dd, yyyy.mm.dd, yyyy/mm/dd 这 3 种，如果有符号乱用的情况，比如2021.08/22，这样就不是合法的日期格式，我们可以通过正则来校验判断：

const checkDateRegexp = /^\d{4}([-\.\/])(?:0[1-9]|1[0-2])\1(?:0[1-9]|[12]\d|3[01])$/



console.log(checkDateRegexp.test('2021-08-22')) // true

console.log(checkDateRegexp.test('2021/08/22')) // true

console.log(checkDateRegexp.test('2021.08.22')) // true

console.log(checkDateRegexp.test('2021.08/22')) // false

console.log(checkDateRegexp.test('2021/08-22')) // false

匹配颜色值

在字符串内匹配出 16 进制的颜色值：

const matchColorRegex = /#(?:[\da-fA-F]{6}|[\da-fA-F]{3})/g

const colorString = '#12f3a1 #ffBabd #FFF #123 #586'



console.log(colorString.match(matchColorRegex))

// [ '#12f3a1', '#ffBabd', '#FFF', '#123', '#586' ]

判断 HTTPS/HTTP

这个需求也是很常见的，判断请求协议是否是 HTTPS/HTTP

const checkProtocol = /^https?:/



console.log(checkProtocol.test('https://medium.com/')) // true

console.log(checkProtocol.test('http://medium.com/')) // true

console.log(checkProtocol.test('//medium.com/')) // false

校验版本号

版本号必须采用 x.y.z 格式，其中 XYZ 至少为一位，我们可以用正则来校验：

// x.y.z

const versionRegexp = /^(?:\d+\.){2}\d+$/



console.log(versionRegexp.test('1.1.1'))

console.log(versionRegexp.test('1.000.1'))

console.log(versionRegexp.test('1.000.1.1'))

获取网页 img 地址

这个需求可能爬虫用的比较多，用正则获取当前网页所有图片的地址。在控制台打印试试，太好用了~~

const matchImgs = (sHtml) => {

  const imgUrlRegex = /]+src="((?:https?:)?\/\/[^"]+)"[^>]*?>/gi

  let matchImgUrls = []

  

  sHtml.replace(imgUrlRegex, (match, $1) => {

    $1 && matchImgUrls.push($1)

  })

  return matchImgUrls

}



console.log(matchImgs(document.body.innerHTML))

格式化电话号码

这个需求也是常见的一匹，用就完事了：

let mobile = '18379836654' 

let mobileReg = /(?=(\d{4})+$)/g 



console.log(mobile.replace(mobileReg, '-')) // 183-7983-6654

觉得不错的话，给个赞吧，以后继续补充~~

实现效果

实现方式

主要使用了

• radial-gradient


• transform


• perspective


• rotateX


• transform-origin

等属性

思路

• 只需要想清楚如何实现弧形三角即可。这里还是借助了渐变 -- 径向渐变

• 其实他是这样，如下图所示，我们只需要把黑色部分替换为透明即可，使用两个伪元素即可：

• 通过超出隐藏和旋转得到想要的效果

• 综上

在上述 outside-circle 的图形基础上：

1. 设置一个适当的 perspective 值


2. 设置一个恰当的旋转圆心 transform-origin


3. 绕 X 轴进行旋转

• 动图演示

代码

<!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>

<style>

  .g-container {

    position: relative;

    width: 300px;

    height: 100px;

    background: red;

    border: 1px solid #277f9e;

    border-radius: 10px;

    overflow: hidden;

}

.g-inner {

    position: absolute;

    width: 150px;

    height: 50px;

    background: #fee6e0;

    bottom: 0;

    border-radius: 0 20px 0 20px;

    transform: perspective(40px) scaleX(1.4) scaleY(1.5) rotateX(20deg) translate(-10px, 0);

    transform-origin: 50% 100%;

}

.g-inner::before {

    content: "";

    position: absolute;

    right: -10px;

    width: 10px;

    height: 10px;

    top: 40px;

    background: radial-gradient(circle at 100% 0, transparent, transparent 9.5px, #fee6e0 10px, #fee6e0);

}

.g-after {

    position: absolute;

    width: 150px;

    height: 50px;

    background: #6ecb15;

    bottom: 49px;

    right: 0;

    border-radius: 20px 0 20px 0;

    transform: perspective(40px) scaleX(1.4) scaleY(-1.5) rotateX(20deg) translate(14px, 0);

    transform-origin: 53% 100%;

}

.g-after::before {

    content: "";

    position: absolute;

    left: -10px;

    top: 40px;

    width: 10px;

    height: 10px;

    background: radial-gradient(circle at 0 0, transparent, transparent 9.5px, #6ecb15 10px, #6ecb15);

}

.g-inner-text,.g-after-text {

  position: absolute;

  width: 150px;

  height: 50px;

  line-height: 50px;

  text-align: center;

}

.g-inner-text {

  top: 50%;

  left: 0;

}

.g-after-text {

  top: 50%;

  right: 0;

}

</style>

<body>

  <div class="g-container">

    <div class="g-inner"></div>

    <div class="g-after"></div>

    <div class="g-inner-text">选项卡1</div>

    <div class="g-after-text">选项卡2</div>

  </div>

</body>

</html>

参考文章：github.com/chokcoco/iC…

为了让页面保活更加稳定，你们是怎么做的？

我用一行配置实现了

Vue页面保活是指在用户离开当前页面后，可以在返回时恢复上一次浏览页面的状态。这种技术可以让用户享受更加流畅自然的浏览体验，而不会被繁琐的操作打扰。

为什么需要页面保活？

页面保活可以提高用户的体验感。例如，当用户从一个带有分页的表格页面（【页面A】）跳转到数据详情页面（【页面B】），并查看了数据之后，当用户从【页面B】返回【页面A】时，如果没有页面保活，【页面A】会重新加载并跳转到第一页，这会让用户感到非常烦恼，因为他们需要重新选择页面和数据。因此，使用页面保活技术，当用户返回【页面A】时，可以恢复之前选择的页码和数据，让用户的体验更加流畅。

如何实现页面保活？

状态存储

这个方案最为直观，原理就是在离开【页面A】之前手动将需要保活的状态存储起来。可以将状态存储到LocalStore、SessionStore或IndexedDB。在【页面A】组件的onMounted钩子中，检测是否存在此前的状态，如果存在从外部存储中将状态恢复回来。

有什么问题？

• 浪费心智（麻烦/操心）。这个方案存在的问题就是，需要在编写组件的时候就明确的知道跳转到某些页面时进行状态存储。


• 无法解决子组件状态。在页面组件中还可以做到保存页面组件的状态，但是如何保存子组件呢。不可能所有的子组件状态都在页面组件中维护，因为这样的结构并不是合理。

组件缓存

利用Vue的内置组件<KeepAlive/>缓存包裹在其中的动态切换组件（也就是<Component/>组件）。<KeepAlive/>包裹动态组件时，会缓存不活跃的组件，而不是销毁它们。当一个组件在<KeepAlive/>中被切换时，activated和deactivated生命周期钩子会替换mounted和unmounted钩子。最关键的是，<KeepAlive/>不仅适用于被包裹组件的根节点，也适用于其子孙节点。

<KeepAlive/>搭配vue-router即可实现页面的保活，实现代码如下：

<template>

  <RouterView v-slot="{ Component }">

    <KeepAlive>

      <component :is="Component"/>

    </KeepAlive>

  </RouterView>

</template>

有什么问题？

• 页面保活不准确。上面的方式虽然实现了页面保活，但是并不能满足生产要求，例如：【页面A】是应用首页，【页面B】是数据列表页，【页面C】是数据详情页。用户查看数据详情的动线是：【页面A】->【页面B】->【页面C】，在这条动线中【页面B】->【页面C】的时候需要缓存【页面B】，当从【页面C】->【页面B】的时候需要从换从中恢复【页面B】。但是【页面B】->【页面A】的时候又不需要缓存【页面B】，上面的这个方法并不能做到这样的配置。

最佳实践

最理想的保活方式是，不入侵组件代码的情况下，通过简单的配置实现按需的页面保活。

【不入侵组件代码】这条即可排除第一种方式的实现，第二种【组件缓存】的方式只是败在了【按需的页面保活】。那么改造第二种方式，通过在router的路由配置上进行按需保活的配置，再提供一种读取配置结合<KeepAlive/>的include属性即可。

路由配置

src/router/index.ts

import useRoutersStore from '@/store/routers';



const routes: RouteRecordRaw[] = [

  {

    path: '/',

    name: 'index',

    component: () => import('@/layout/index.vue'),

    children: [

      {

        path: '/app',

        name: 'App',

        component: () => import('@/views/app/index.vue'),

      },

      {

        path: '/data-list',

        name: 'DataList',

        component: () => import('@/views/data-list/index.vue'),

        meta: {

          // 离开【/data-list】前往【/data-detail】时缓存【/data-list】

          leaveCaches: ['/data-detail'],

        }

      },

      {

        path: '/data-detail',

        name: 'DataDetail',

        component: () => import('@/views/data-detail/index.vue'),

      }

    ]

  }

];



router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {

  const { cacheRouter } = useRoutersStore();

  cacheRouter(from, to);

  next();

});

保活组件存储

src/stroe/router.ts

import { RouteLocationNormalized } from 'vue-router';



const useRouterStore = defineStore('router', {

  state: () => ({

    cacheComps: new Set<string>(),

  }),

  actions: {

    cacheRouter(from: RouteLocationNormalized, to: RouteLocationNormalized) {

      if(

        Array.isArray(from.meta.leaveCaches) && 

        from.meta.leaveCaches.inclued(to.path) && 

        typeof from.name === 'string'

      ) {

        this.cacheComps.add(form.name);

      }

      if(

        Array.isArray(to.meta.leaveCaches) && 

        !to.meta.leaveCaches.inclued(from.path) && 

        typeof to.name === 'string'

      ) {

        this.cacheComps.delete(to.name);

      }

    },

  },

  getters: {

    keepAliveComps(state: State) {

      return [...state.cacheComps];

    },

  },

});

页面缓存

src/layout/index.vue

<template>

  <RouterView v-slot="{ Component }">

    <KeepAlive :include="keepAliveComps">

      <component :is="Component"/>

    </KeepAlive>

  </RouterView>

</template>



<script lang='ts' setup>

import { storeToRefs } from 'pinia';

import useRouterStore from '@/store/router';



const { keepAliveComps } = storeToRefs(useRouterStore());

</script>

TypeScript提升配置体验

import 'vue-router';



export type LeaveCaches = string[];



declare module 'vue-router' {

  interface RouteMeta {

    leaveCaches?: LeaveCaches;

  }

}

该方案的问题

• 缺少通配符处理/*、/**/index。


• 无法缓存/preview/:address这样的动态路由。


• 组件名和路由名称必须保持一致。

总结

通过<RouterView v-slot="{ Component }">获取到当前路由对应的组件，在将该组件通过<component :is="Component" />渲染，渲染之前利用<KeepAlive :include="keepAliveComps">来过滤当前组件是否需要保活。
基于上述机制，通过简单的路由配置中的meta.leaveCaches = [...]来配置从当前路由出发到哪些路由时，需要缓存当前路由的内容。

如果大家有其他保活方案，欢迎留言交流哦！

开头

这里主要是根据 vue 递归组件 作用域插槽 代码的理解和el-tree是如何写的。

代码

父组件

<template>

  <div>

    <Tree :data="data">

      <template #default="{ title }">

        <div class="prent">

          {{ title + "+自定义" }}

        </div>

      </template>

    </Tree>

  </div>

</template>

<script>

import Tree from "./tree.vue";

export default {

  components: {

    Tree,

  },

  data() {

    return {

      data: [{

        title: "父1",

        children: [{

          title: "子",

          children:[{title:"孙",}]

        }],

      },{

        title: "父2",

        children:[{title:"子"}]

      }]

    };

  }

};

</script>

子组件

<template>

  <div class="tree">

    <div v-for="item of data" :key="item.title">

      <!-- 显示title标题 -->

      <div class="title">

        <!-- 插槽，这里也是把title传出去, A插槽 -->

        <slot :title="item.title">

          <!-- {{ item.title }} -->

        </slot>

      </div>

      <!-- 如果存在子项则调用本身组件 递归 -->

      <Tree v-if="item.children" :data='item.children'>

            <!-- B 插槽 -->

          <slot :title='item.title' />

      </Tree>

    </div>

  </div>

</template>



<script>

export default {

  name: 'Tree',

  props: {

    data: Array,

  },

};

</script>



<style scoped>

.tree {

  padding-left: 10px;

}



ul,

li {

  list-style: none;

  margin: 0;

  padding: 0;

}

</style>

理解步骤,始终知道 -> 递归就是把最里面的放到最外面来，你就当 A插槽最后会被 B 插槽替代。

所以，父组件的 default 插槽用的是 B 插槽，因此 B 插槽就暴露出一个 title 给父组件使用。

删掉 A 的title ：

<template>

  <div class="tree">

    <div v-for="item of data" :key="item.title">

      <!-- 显示title标题 -->

      <div class="title">

        <!-- 插槽，这里也是把title传出去, A插槽 -->

        <slot :title="item.title">

          <!-- {{ item.title }} -->

        </slot>

      </div>

      <!-- 如果存在子项则调用本身组件 递归 -->

      <Tree v-if="item.children" :data='item.children'>

            <!-- B 插槽 -->

          <slot :title='item.title' />

      </Tree>

    </div>

  </div>

</template>



<script>

export default {

  name: 'Tree',

  props: {

    data: Array,

  },

};

</script>



<style scoped>

.tree {

  padding-left: 10px;

}



ul,

li {

  list-style: none;

  margin: 0;

  padding: 0;

}

</style>

结果：

由于可能只有一层，所以走不到 B 插槽，因此 A 插槽也需要暴露一个 title 给外面使用。

el-tree 的原理

父组件

<template>

  <div>

    <Tree :data="data">

        <!-- C -->

      <template #default="{ title }">

        <div class="prent">

          {{ title + "+自定义" }}

        </div>

      </template>

    </Tree>

  </div>

</template>

<script>

import Tree from "./tree.vue";

export default {

  components: {

    Tree,

  },

  data() {

    return {

      data: [{

        title: "父1",

        children: [{

          title: "子",

          children:[{title:"孙",}]

        }],

      },{

        title: "父2",

        children:[{title:"子"}]

      }]

    };

  }

};

</script>

子组件

<template>

  <div class="tree">

    <div v-for="item of data" :key="item.title">

      <!-- 显示title标题 -->

      <div class="title">

        <!-- 插槽，这里也是把title传出去, A -->

        <slot :title="item.title">

          <!-- {{ item.title }} -->

        </slot>

      </div>

      <!-- 如果存在子项则调用本身组件 递归 -->

      <Tree v-if="item.children" :data='item.children'>

        <!-- B -->

        <template #default="{ title }">

          <div class="prent">

            {{ title + "+自定义22" }}

          </div>

        </template>

      </Tree>

    </div>

  </div>

</template>



<script>

import node from './node.js'

export default {

  name: 'Tree',

  components: {

    node,

    

  },

  props: {

    data: Array,

  },

  data() {

    return {

      tree: null,

    }

  },

  created() {

    if(!this.$parent.$scopedSlots.default) {

      this.tree = this

    }else {

      this.tree = this.$parent.tree

    }

  },

};

</script>



<style scoped>

.tree {

  padding-left: 10px;

}



ul,

li {

  list-style: none;

  margin: 0;

  padding: 0;

}

</style>

结果：

这里可以看到，父组件的 C 和 子组件中的 B 都是使用到了 A 这个插槽。

这里我们只要能把 B 替换成父组件的 C 就完成了递归插槽。

子组件的代码转变

<template>

  <div class="tree">

    <div v-for="item of data" :key="item.title">

      <!-- 显示title标题 -->

      <div class="title">

        <!-- 插槽，这里也是把title传出去 -->

        <slot :title="item.title">

          <!-- {{ item.title }} -->

        </slot>

      </div>

      <!-- 如果存在子项则调用本身组件 递归 -->

      <Tree v-if="item.children" :data='item.children'>

        <template #default="{ title }">

          <node :title="title">

          </node>

        </template>

      </Tree>

    </div>

  </div>

</template>



<script>

import node from './node.js'

export default {

  name: 'Tree',

  components: {

    node: {

      props: {

        title: String,

      },

      render(h) {

        const parent = this.$parent;

        const tree = parent.tree

        const title = this.title

        return (tree.$scopedSlots.default({ title }))

      }

    }

  },

  props: {

    data: Array,

  },

  data() {

    return {

      tree: null,

    }

  },

  created() {

    if (!this.$parent.$scopedSlots.default) {

      this.tree = this

    } else {

      this.tree = this.$parent.tree

    }

  },

};

</script>



<style scoped>

.tree {

  padding-left: 10px;

}



ul,

li {

  list-style: none;

  margin: 0;

  padding: 0;

}

</style>

这里搞了一个 node 的函数组件，node 函数组件拿到 子组件的 tree， tree也是一层层的保存着 $scopedSlots.default 其实就是 C 的那些编译节点。 然后把 title 传给了 C。

el-tree 源码贴图

tree

tree-node

总结

写的有点乱啊，这个只是辅助你理解 递归插槽，其实一开始都是懵逼了，多看下代码理解还是能看的懂的。

前端部署需要用户刷新才能继续使用，一直是一个老大难的用户体验问题。本文将围绕这个问题进行讲解，揭晓问题发生的原因及解决思路。

一、背景

网站发版过程中，用户可在浏览web页面时，可能会导致页面无法加载对应的资源，导致出现点击无反应的情况，严重影响用户体验。

二、问题分析

2.1 问题现象

网络控制台显示加载页面的资源显示404。

2.2 满足条件

发生这个现象，需要满足三个条件：

1. 站点是SPA页面，并开启懒加载；


2. 资源地址启用内容hash。（加载更快启用了强缓存，为了应对资源变更能及时更新内容，会对资源地址的文件名加上内容hash）。


3. 覆盖式部署，新版本发布后旧的版本会被删除。

特别在容器部署的情况的SPA页面，很容易满足上诉三个条件。笔者在做公司的内部系统就踩过坑。

2.3 原因分析

浏览器打开页面后，会记录路由和资源路径的映射，服务器发版后，没有及时通知浏览器更新路由映射表。导致用户在发布前端打开的页面，在版本更新后，进入下一个路由加载上一个版本的资源失败，导致需要用户刷新才能正常使用。

三、解决方案

3.1 方案一：失败重试

3.1.1 思路整理：

既然加载失败了，就重试加载发版后的资源版本就行。增加一个manifest.json文件能够获取新版本对应的资源路径。

3.1.2 举例说明

以vue项目进行举例子说明：

第一步: 修改构建工具配置以生成manifest文件

使用vite构建的项目，可以在vite.config.ts增加配置build.manifest为true，用以生成manifest.json文件

export default defineConfig({

  // 更多配置

  build: {

    //开启manifest

    manifest: true,

    cssCodeSplit: false //关闭单独生成css文件，方便demo演示

  }

})

如果使用webpack构建的项目，可以使用webpack-manifest-plugin插件进行配置。

进行项目生产构建，生成manifest.json，内容如下：

 // 简单说明：文件内容是项目原始代码目录结构和构建生成的资源路径一一对应

{

  "index.html": { // 页面入口

    "dynamicImports": ["src/pages/page1.vue", "src/pages/page2.vue"],

    "file": "assets/index-e170761c.js",

    "isEntry": true,

    "src": "index.html"

  },

   // page1对应单文件组件

  "src/pages/page1.vue": {

    "file": "assets/page1-515906ab1.js", // JS文件

    "imports": ["index.html"],

    "isDynamicEntry": true,

    "src": "src/pages/page1.vue"

  },

   // page2对应单文件组件

  "src/pages/page2.vue": {

    "file": "assets/page2-9785c68c.js", // JS文件

    "imports": ["index.html"],

    "isDynamicEntry": true,

    "src": "src/pages/page2.vue"

  },

  "style.css": {

    "file": "assets/style-809e5baa.css",

    "src": "style.css"

  }

}

第二步，修改route文件，加上重试逻辑

在路由文件中，增加加载页面js失败的重试逻辑，通过新版的manifest.json来获取新版的页面js，再次加载。

import { createRouter, createWebHistory } from 'vue-router'





const router = createRouter({

  history: createWebHistory('/'),

  routes: [

    {

      path: '/page1',

      // component: () => import(`../pages/page1.vue`), // 变更前

      component: () => retryImport('page1'), // 变更后

    },

    {

      path: '/page2',

      // component: () => import(`../pages/page1.vue`),

      component: () => retryImport('page2'),

    },

  ]

})





async function retryImport(page) {

  try {

    // 加载页面资源

    switch (page) {

      case 'page1':

        // 这里demo演示，没有使用dynamic-import-vars

        return await import(`../pages/page1.vue`)

      default:

        return await import(`../pages/page2.vue`)

    }

  } catch (err: any) {

    //  判断是否是资源加载错误，错误重试

    if (err.toString().indexOf('Failed to fetch dynamically imported module') > -1) {

      // 获取manifest资源清单

      return fetch('/manifest.json').then(async (res) => {

        const json = await res.json()

        // 找到对应的最新版本的js

        const errPage = `src/pages/${page}.vue`

        // 加载新的js

        return await import(`/${json[errPage].file}`)

      })

    }

    throw err

  }

}

export default router

3.1.3 总结

这个方案改造只涉及前端层，成本最低，但是无法做到多版本共存，只能适配部分发版变更，如果涉及删除页面的版本，最好增加一个容错页面。

3.2 方案二：增量部署

3.2.1 思路整理

生产环境发布改成增量发布，不再是覆盖式的发布，发版后旧版本依旧保留。

3.2.2 示例实践

需要改造构建配置，增加版本的概念，保证新旧版本不路径冲突

vite 构建工具示例：

// vite.config.ts

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

const version = require('./package.json').version



// 支持构建命令传入构建版本

const versionName = process.env.VERSION_NAME || version

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue()],

  build: {

    manifest: true,

    assetsDir: `./${versionName}`, // 版本号

  }

})

webpack构建工具示例：

// webpack.config.js

const path = require('path');

// 支持构建命令传入构建版本

const versionName = process.env.VERSION_NAME || version

module.exports = {

  //...

  output: {

    path: path.resolve(__dirname, `dist/${versionName}/assets`),

  },

};

3.2.3 总结

需要CI/CD发版改造，由之前的容器部署改成静态部署（即文件上传对象存储的思路一样），这种增量发部署适配全部的场景，而且，支持多版本共存，能做到版本灰度放量。

四、总结

本文通过覆盖式部署在前端版本发布，导致用户不可使用的严重体验问题，分析问题发生根因，并给出两种解决思路。笔者结合公司的云设施，最后使用增量部署，并BFF层配合使用，多版本共存，线上启用通过配置指定启用哪个版本，再也不用赶着时间点去发版。

1. provide/inject

provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在子孙组件中使用 inject 来注入这个数据。

使用 provide/inject 的好处是可以让我们在父组件和子孙组件之间传递数据，而无需手动进行繁琐的 props 传递。它可以让代码更加简洁和易于维护。但需要注意的是，provide/inject 的数据是非响应式的，这是因为provide/inject是一种更加底层的 API，它是基于依赖注入的方式来传递数据，而不是通过响应式系统来实现数据的更新和同步。

具体来说，provide方法提供的数据会被注入到子组件中的inject属性中，但是这些数据不会自动触发子组件的重新渲染，如果provide提供的数据发生了变化，子组件不会自动感知到这些变化并更新。

如果需要在子组件中使用provide/inject提供的数据，并且希望这些数据能够响应式地更新，可以考虑使用Vue的响应式数据来代替provide/inject。例如，可以将数据定义在父组件中，并通过props将其传递给子组件，子组件再通过$emit来向父组件发送数据更新的事件，从而实现响应式的数据更新。

下面是一个简单的例子，展示了如何在父组件中提供数据，并在子孙组件中注入这个数据：

<!-- 父组件 -->

<template>

  <div>

    <ChildComponent />

  </div>

</template>



<script>

import ChildComponent from './ChildComponent.vue';



export default {

  provide: {

    message: 'Hello from ParentComponent',

  },

  components: {

    ChildComponent,

  },

};

</script>



//上面provide还可以写成函数形式

export default {

    provide(){

        return {

              message: this.message

        }

    }

}

<!-- 子组件 -->

<template>

  <div>

    <GrandchildComponent />

  </div>

</template>



<script>

import GrandchildComponent from './GrandchildComponent.vue';



export default {

  inject: ['message'],

  components: {

    GrandchildComponent,

  },

};

</script>

<!-- 孙子组件 -->

<template>

  <div>

    <p>{{ message }}</p>

  </div>

</template>



<script>

export default {

  inject: ['message'],

};

</script>

在上面的例子中，父组件中提供了一个名为 message 的数据，子孙组件中都可以使用 inject 来注入这个数据，并在模板中使用它。注意，子孙组件中的 inject 选项中使用了一个数组，数组中包含了需要注入的属性名。在这个例子中，我们只注入了一个 message 属性，所以数组中只有一个元素。

2. 自定义v-model

要使自定义的Vue组件支持v-model，需要实现一个名为value的prop和一个名为input的事件。在组件内部，将value prop 绑定到组件的内部状态，然后在对内部状态进行修改时触发input事件。

下面是一个简单的例子，展示如何创建一个自定义的输入框组件并支持v-model：

<template>

  <input :value="value" @input="$emit('input', $event.target.value)" />

</template>



<script>

export default {

  name: 'MyInput',

  props: {

    value: String

  }

};

</script>

在上面的组件中，我们定义了一个value prop，这是与v-model绑定的数据。我们还将内置的input事件转发为一个自定义的input事件，并在事件处理程序中更新内部状态。现在，我们可以在父组件中使用v-model来绑定这个自定义组件的值，就像使用普通的输入框一样：

<template>

  <div>

    <my-input v-model="message" />

    <p>{{ message }}</p>

  </div>

</template>



<script>

import MyInput from './MyInput.vue';



export default {

  components: {

    MyInput

  },

  data() {

    return {

      message: ''

    };

  }

};

</script>

在上面的代码中，我们通过使用v-model指令来双向绑定message数据和MyInput组件的值。当用户在输入框中输入文本时，MyInput组件会触发input事件，并将其更新的值发送给父组件，从而实现了双向绑定的效果。

3. 事件总线（EventBus）

Vue事件总线是一个事件处理机制，它可以让组件之间进行通信，以便在应用程序中共享信息。在Vue.js应用程序中，事件总线通常是一个全局实例，可以用来发送和接收事件。

以下是使用Vue事件总线的步骤：

3.1 创建一个全局Vue实例作为事件总线：

import Vue from 'vue';

export const eventBus = new Vue();

3.2 在需要发送事件的组件中，使用$emit方法触发事件并传递数据：

eventBus.$emit('eventName', data);

3.3 在需要接收事件的组件中，使用$on方法监听事件并处理数据：

eventBus.$on('eventName', (data) => {

  // 处理数据

});

需要注意的是，事件总线是全局的，所以在不同的组件中，需要保证事件名称的唯一性。

另外，需要在组件销毁前使用$off方法取消事件监听：

eventBus.$off('eventName');

这样就可以在Vue.js应用程序中使用事件总线来实现组件之间的通信了。

4. render方法

Vue 的 render 方法是用来渲染组件的函数，它可以用来替代模板语法，通过代码的方式来生成 DOM 结构。相较于模板语法，render 方法具有更好的类型检查和代码提示。

下面详细介绍 Vue 的 render 方法的使用方法：

4.1 基本语法

render 方法的基本语法如下：

render: function (createElement) {

  // 返回一个 VNode

}

其中 createElement 是一个函数，它用来创建 VNode（虚拟节点），并返回一个 VNode 对象。

4.2 创建 VNode

要创建 VNode，可以调用 createElement 函数，该函数接受三个参数：

• 标签名或组件名


• 可选的属性对象


• 子节点数组

例如，下面的代码创建了一个包含文本节点的 div 元素：

render: function (createElement) {

  return createElement('div', 'Hello, world!')

}

如果要创建一个带有子节点的元素，可以将子节点作为第三个参数传递给 createElement 函数。例如，下面的代码创建了一个包含两个子元素的 div 元素：

render: function (createElement) {

  return createElement('div', [

    createElement('h1', 'Hello'),

    createElement('p', 'World')

  ])

}

如果要给元素添加属性，可以将属性对象作为第二个参数传递给 createElement 函数。例如，下面的代码创建了一个带有样式和事件处理程序的 button 元素：

render: function (createElement) {

  return createElement('button', {

    style: { backgroundColor: 'red' },

    on: {

      click: this.handleClick

    }

  }, 'Click me')

},

methods: {

  handleClick: function () {

    console.log('Button clicked')

  }

}

4.3 动态数据

render 方法可以根据组件的状态动态生成内容。要在 render 方法中使用组件的数据，可以使用 this 关键字来访问组件实例的属性。例如，下面的代码根据组件的状态动态生成了一个带有计数器的 div 元素：

render: function (createElement) {

  return createElement('div', [

    createElement('p', 'Count: ' + this.count),

    createElement('button', {

      on: {

        click: this.increment

      }

    }, 'Increment')

  ])

},

data: function () {

  return {

    count: 0

  }

},

methods: {

  increment: function () {

    this.count++

  }

}

4.4 JSX

在使用 Vue 的 render 方法时，也可以使用 JSX（JavaScript XML）语法，这样可以更方便地编写模板。要使用 JSX，需要在组件中导入 Vue 和 createElement 函数，并在 render 方法中使用 JSX 语法。例如，下面的代码使用了 JSX 语法来创建一个计数器组件：

import Vue from 'vue'



export default {

    render() {

        return (

            <div>

                <p>Count:{this.count}</p>

                <button onClick={this.increment}>Increment</button>

            </div>

        )

    },

    data() {

        return { count: 0 }

    },

    methods: {

        increment() {

            this.count++

        }

    }

}

注意，在使用 JSX 时，需要使用 {} 包裹 JavaScript 表达式。

4.5 生成函数式组件

除了生成普通的组件，render 方法还可以生成函数式组件。函数式组件没有状态，只接收 props 作为输入，并返回一个 VNode。因为函数式组件没有状态，所以它们的性能比普通组件更高。

要生成函数式组件，可以在组件定义中将 functional 属性设置为 true。例如，下面的代码定义了一个函数式组件，用于显示列表项：

export default {

  functional: true,

  props: ['item'],

  render: function (createElement, context) {

    return createElement('li', context.props.item);

  }

}

注意，在函数式组件中，props 作为第二个参数传递给 render<


/code> 方法。