最近工作中在使用FFmpeg，加上之前写过较多的SpringBoot的Starter，所以干脆再写一个FFmpeg的Starter出来给大家使用。

首先我们来了解一下FFmpeg能干什么，FFmpeg 是一个强大的命令行工具和库集合，用于处理多媒体数据。它可以用来做以下事情：

• 解码：将音频和视频从压缩格式转换成原始数据。


• 编码：将音频和视频从原始数据压缩成各种格式。


• 转码：将一种格式的音频或视频转换为另一种格式。


• 复用：将音频、视频和其他流合并到一个容器中。


• 解复用：从一个容器中分离出音频、视频和其他流。


• 流媒体：在网络上传输音频和视频流。


• 过滤：对音频和视频应用各种效果和调整。


• 播放：直接播放媒体文件。

FFmpeg支持广泛的编解码器和容器格式，并且由于其开源性质，被广泛应用于各种多媒体应用程序中，包括视频会议软件、在线视频平台、编辑软件等。
例如

作者很喜欢的一款截图软件ShareX就使用到了FFmpeg的功能。

现在ffmpeg-spring-boot-starter已发布，maven地址为
ffmpeg-spring-boot-starter

那么如何使用ffmpeg-spring-boot-starter 呢？

第一步，新建一个SpringBoot项目

SpringBoot入门：如何新建SpringBoot项目（保姆级教程）

第二步，在pom文件里面引入jar包

<dependency>

    <groupId>io.gitee.wangfugui-ma</groupId>

    <artifactId>ffmpeg-spring-boot-starter</artifactId>

    <version>${最新版}</version>

</dependency>

第三步，配置你的ffmpeg信息

在yml或者properties文件中配置如下信息

ffmpeg.ffmpegPath=D:\\ffmpeg-7.0.1-full_build\\bin\\

注意这里要配置为你所安装ffmpeg的bin路径，也就是脚本（ffmpeg.exe）所在的目录，之所以这样设计的原因就是可以不用在系统中配置环境变量，直接跳过了这一个环节（一切为了Starter）

第四步，引入FFmpegTemplate

    @Autowired

    private FFmpegTemplate ffmpegTemplate;

在你的项目中直接使用Autowired注解注入FFmpegTemplate即可使用

第五步，使用FFmpegTemplate

execute(String command)

• 功能：执行任意FFmpeg命令，捕获并返回命令执行的输出结果。


• 参数：command - 需要执行的FFmpeg命令字符串。


• 返回：命令执行的输出结果字符串。


• 实现：使用Runtime.getRuntime().exec()启动外部进程，通过线程分别读取标准输出流和错误输出流，确保命令执行过程中的所有输出都被记录并可被进一步分析。


• 异常：抛出IOException和InterruptedException，需在调用处妥善处理。

FFmpeg执行器，这是这里面最核心的方法，之所以提供这个方法，是来保证大家的自定义的需求，例如FFmpegTemplate中没有封装的方法，可以灵活自定义ffmpeg的执行参数。

convert(String inputFile, String outputFile)

• 功能：实现媒体文件格式转换。


• 参数：inputFile - 待转换的源文件路径；outputFile - 转换后的目标文件路径。


• 实现：构建FFmpeg命令，调用FFmpeg执行器完成媒体文件格式的转换。

就像这样：

    @Test

    void convert() {

        ffmpegTemplate.convert("D:\\video.mp4","D:\\video.avi");

    }

extractAudio(String inputFile)

• 功能：精确提取媒体文件的时长信息。


• 参数：inputFile - 需要提取时长信息的媒体文件路径。


• 实现：构造特定的FFmpeg命令，仅请求媒体时长数据，直接调用FFmpeg执行器并解析返回的时长值。

就像这样：

    @Test

    void extractAudio() {  System.out.println(ffmpegTemplate.extractAudio("D:\\video.mp4"));

    }

copy(String inputFile, String outputFile)

• 功能：执行流复制，即在不重新编码的情况下快速复制媒体文件。


• 参数：inputFile - 源媒体文件路径；outputFile - 目标媒体文件路径。


• 实现：创建包含流复制指令的FFmpeg命令，直接调用FFmpeg执行器，以达到高效复制的目的。
  
  

  就像这样：

    @Test

    void copy() {

        ffmpegTemplate.copy("D:\\video.mp4","D:\\video.avi");

    }

captureVideoFootage(String inputFile, String outputFile, String startTime, String endTime)

• 功能：精准截取视频片段。


• 参数：inputFile - 源视频文件路径；outputFile - 截取片段的目标文件路径；startTime - 开始时间；endTime - 结束时间。


• 实现：构造FFmpeg命令，指定视频片段的开始与结束时间，直接调用FFmpeg执行器，实现视频片段的精确截取。

@Test

    void captureVideoFootage() {

        ffmpegTemplate.captureVideoFootage("D:\\video.mp4","D:\\cut.mp4","00:01:01","00:01:12");

    }

scale(String inputFile, String outputFile, Integer width, Integer height)

• 功能：调整媒体文件的分辨率。


• 参数：inputFile - 源媒体文件路径；outputFile - 输出媒体文件路径；width - 目标宽度；height - 目标高度。


• 实现：创建包含分辨率调整指令的FFmpeg命令，直接调用FFmpeg执行器，完成媒体文件分辨率的调整。

    @Test

    void scale() {

        ffmpegTemplate.scale("D:\\video.mp4","D:\\video11.mp4",640,480);

    }

cut(String inputFile, String outputFile, Integer x, Integer y, Integer width, Integer height)

• 功能：实现媒体文件的精确裁剪。


• 参数：inputFile - 源媒体文件路径；outputFile - 裁剪后媒体文件路径；x - 裁剪框左上角X坐标；y - 裁剪框左上角Y坐标；width - 裁剪框宽度；height - 裁剪框高度。


• 实现：构造FFmpeg命令，指定裁剪框的坐标与尺寸，直接调用FFmpeg执行器，完成媒体文件的精确裁剪。

    @Test

    void cut() {

        ffmpegTemplate.cut("D:\\video.mp4","D:\\video111.mp4",100,100,640,480);

    }

embedSubtitle(String inputFile, String outputFile, String subtitleFile)

• 功能：将字幕文件内嵌至视频中。


• 参数：inputFile - 视频文件路径；outputFile - 输出视频文件路径；subtitleFile - 字幕文件路径。


• 实现：构造FFmpeg命令，将字幕文件内嵌至视频中，直接调用FFmpeg执行器，完成字幕的内嵌操作。

    @Test

    void embedSubtitle() {

        ffmpegTemplate.embedSubtitle("D:\\video.mp4","D:\\video1211.mp4","D:\\srt.srt");

    }

merge(String inputFile, String outputFile)

• 功能: 通过外部ffmpeg工具将多个视频文件合并成一个。


• 参数:
  
  
  
  • inputFile: 包含待合并视频列表的文本文件路径。
  
  
  • outputFile: 合并后视频的输出路径。
  
  
  
  

是这样用的：

   @Test

    void merge() {

        ffmpegTemplate.merge("D:\\mylist.txt","D:\\videoBig.mp4");

    }

注意，这个mylist.txt文件长这样：

后续版本考虑支持

大家好，我是码农先森。

现状

传统的 PHP-FPM 也是多进程模型的的运行方式，但每个进程只能处理完当前请求，才能接收下一个请求。而且对于 PHP 脚本来说，只是接收请求和响应请求，并不参与网络通信。对数据库资源的操作，也是一次请求一次有效，用完即销毁不能复用，在系统高负载的情况下对数据库等资源的消耗会很大，能承受的并发量有限。

Swoole 的出现给 PHP 带来了一种新的运行方式，完全接管了 PHP-FPM 的功能，并且弥补了 PHP 在异步网络通信领域的空白。Swoole 提供了 PHP 的全生命周期管理，此外 Swoole 的常驻进程模式，也能够高效的利用资源，比如可以建立数据库连接池、共享内存变量等。还有 Swoole 中能够支撑高并发的利器「协程」，更加使 PHP 的性能上了一个新的台阶，甚至在某些特定场景下都可以与 Go 语言的性能相媲美。

虽说 Swoole 给 PHP 带来了很大的性能提升，但也还是一个基于多进程模型的异步通信扩展，多进程的模式也存在着许多的问题，比如跨进程间的通信、进程间的资源共享等问题。简而言之，多进程会带来一定的系统资源消耗及产生新的问题。

因此 Swoole 官方为了解决多进程的问题，引进了多线程的支持，这意味着 v6 版本之后，Swoole 将会变成单进程多线程的运行模式。

v6 新特性

根据 Swoole 作者韩天峰发布的预告，在 v6 版本中增加多线程的支持。其中多线程的实现是基于 PHP 的 ZTS 机制和 TSRM API，在 PHP 层面隔离所有全局变量，实现线程安全。Swoole v6 的多线程将是真正的多线程实现，在单进程的模式下所有的 PHP 程序代码均是在多核并行执行，能够高效的利用好 CPU 资源。

v6 版本还提供了线程安全的 Map 和 ArrayList 数据结构，可以实现跨线程的数据共享读写。在 Server 端的 Event Worker、Task Worker、User Process 等将全部替换为 线程的运行方式，在同一个进程空间内执行，彻底摒弃了多进程的模式。

当然新的特性势必会带来新的开销，对于 Map 等共享的数据结构在多线程的模式下需要加锁，来避免数据竞争，可能会损耗一些性能。

以下是列举的一些线程相关的 API 方法：

• use Swoole\Thread 线程对象。


• use Swoole\Thread\Map 线程安全下的 Map 数据结构。


• use Swoole\Thread\ArrayList 线程安全下的 ArrayList 数据结构。


• Swoole\Thread::getId() 获取当前线程的 ID。


• Swoole\Thread::getArguments() 获取父线程传递给子线程的参数列表。


• Swoole\Thread::join() 等待子线程退出，请注意 $thread 对象销毁时会自动执行 join() ，这可能会导致进程阻塞。


• Swoole\Thread::joinable() 检测子线程是否已退出。


• Swoole\Thread::detach() 使子线程独立运行，不再需要 Thread::join()。


• Swoole\Thread::HARDWARE_CONCURRENCY 硬件层支持的并行线程数量。


• Swoole\Thread::$id 获取子线程的 ID。


• Swoole\Thread::exec() 开启一个新的线程。

最后

自 Swoole 从 2012 年发布第一个版本开始，就扛起了 PHP 领域异步通信的大旗，但这多年以来 Swoole 的发展也是实属不易。还记得刚开始时的异步回调模式的套娃式编程方式，开发起来异常艰难，到后来的同步式编程，直接降低了PHP程序员的学习门槛，让 PHP 在实时通信、物联网通信、游戏开发等领域也能大展拳脚，同时在 PHP 的发展史上也产生了重大的影响。

随着 Go 语言在编程界的持续火热，Swoole 常常被 PHP 程序员拿来和 Go 语言一决高下，总是被诟病 Swoole 无法有效利用多核 CPU、进程间的通信困难等问题。话又说回来，Swoole 作为一个 PHP 的扩展程序和天生具有高性能的 Go 语言自然是不可比拟的，但 Swoole 也是在逐渐的向 Go 语言靠近，比如 Swoole 中也使用了「go、channel」关键词来实现协程及通信通道，虽说底层的实现机制还是大不相同的。

当然 Swoole 也在不断地努力持续优化，就像将要推出的 v6 版本增加多线程的支持，来改变目前多进程的局面。至于这个版本对 PHP 发展来说有没有很大的影响，我认为影响有限。但对 Swoole 的发展还是有很大的影响，毕竟以后再也不用受多进程的困扰了，这也是一大进步。

在 Web 领域作为世界上最好的语言，尽管 PHP 近年来的发展不尽如人意，但作为一名 PHPer 也有必要和有义务一起来维护和推动 PHP 生态的发展。

欢迎关注、分享、点赞、收藏、在看，我是微信公众号「码农先森」作者。

根据业务需要，开发一个微信公众号的相关开发，根据相关开发和整理总结了一下相关的流程和需要，进行一些整理和总结分享给大家，最近都在加班和忙碌，博客已经很久未更新了，打气精神，再接再厉，申请、认证公众号的一系列流程就不在这里赘述了，主要进行的是技术的分享，要达到的效果如下图:

开发接入

首先说明我这里用的是PHP开发语言来进行的接入，设置一个url让微信公众号的服务回调这个url,在绑定之前需要一个token的验证，设置不对会提示token不正确的提示

官方提供的测试Url工具：developers.weixin.qq.com/apiExplorer…

private function checkSignature()

{

	$signature = isset($_GET["signature"]) ? $_GET["signature"] : '';

	$timestamp = isset($_GET["timestamp"]) ? $_GET["timestamp"] : '';

	$nonce = isset($_GET["nonce"]) ? $_GET["nonce"] : '';

	$echostr = isset($_GET["echostr"]) ? $_GET["echostr"] : '';

	$token = 'klsg2024';

	$tmpArr = array($token, $timestamp, $nonce);

	sort($tmpArr, SORT_STRING);

	$tmpStr = implode( $tmpArr );

	$tmpStr = sha1( $tmpStr );

	if( $tmpStr == $signature ){

		return $echostr;

	}else{

		return false;

	}

}

在设置的地方调用: 微信公众号的 $echostr 和 自定义的匹配上说明调用成功了

public function console(){

	//关注公众号推送

	$posts = $this->posts;

	if(!isset($_GET['openid'])){

		$res = $this->checkSignature();

		if($res){

			echo $res;

			return true;

		}else{

			return false;

		}

	}

}

设置access_token

公众号的开发的所有操作的前提都是先设置access_token，在于验证操作的合法性，所需要的token在公众号后台的目录中获取:公众号-设置与开发-基本设置 设置和查看：

#POST https://api.weixin.qq.com/cgi-bin/token

{

    "grant_type": "client_credential",

    "appid": "开发者ID(AppID)",

    "secret": "开发者密码(AppSecret)"

}

返回的access_token，过期时间2个小时，Http url 返回结构如下:

{

    "access_token": "82_W8kdIcY2TDBJk6b1VAGEmA_X_DLQnCIi5oSZBxVQrn27VWL7kmUCJFVr8tjO0S6TKuHlqM6z23nzwf18W1gix3RHCw6uXKAXlD-pZEO7JcAV6Xgk3orZW0i2MFMNGQbAEARKU", 

    "expires_in": 7200

}

为了方便起见,公众号平台还开放了一个稳定版的access_token,参数略微有不同。

POST https://api.weixin.qq.com/cgi-bin/stable_token

{

    "grant_type": "client_credential",

    "appid": "开发者ID(AppID)",

    "secret": "开发者密码(AppSecret)",

    "force_refresh":true

}

自定义菜单

第一个疑惑是公众号里的底部菜单 是怎么搞出来的，在官方文档中获取到的，如果公众号后台没有设置可以根据自定义菜单来进行设置。

1、创建菜单，参数自己去官方文档上查阅

POST https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN

2、查询菜单接口,文档和调试工具给的有点不一样，我使用的是调试工具给出的url

GET https://api.weixin.qq.com/cgi-bin/menu/get?access_token=ACCESS_TOKEN

3、删除菜单

GET https://api.weixin.qq.com/cgi-bin/menu/delete?access_token=ACCESS_TOKEN

事件拦截

在公众号的开发后台里会设置一个Url，每次在操作公众号时都会回调接口，用事件去调用和处理，操作公众号后，微信公众平台会请求到设置的接口上,公众号的openid 比较重要，是用来识别用户身份的唯一标识，openid即当前用户。

{

    "signature": "d43a23e838e2b580ca41babc78d5fe78b2993dea",

    "timestamp": "1721273358",

    "nonce": "1149757628",

    "openid": "odhkK64I1uXqoUQjt7QYx4O0yUvs"

}

用户进行相关操作时，回调接口会收到这样一份请求,都是用MsgType和Event去区分,下面是关注的回调：

{

    "ToUserName": "gh_d98fc9c8e089",

    "FromUserName": "用户openID",

    "CreateTime": "1721357413",

    "MsgType": "event",

    "Event": "subscribe",

    "EventKey": []

}

下面是点击菜单跳转的回调：

{

    "ToUserName": "gh_d98fc9c8e089",

    "FromUserName": "用户openID",

    "CreateTime": "1721381657",

    "MsgType": "event",

    "Event": "VIEW",

    "EventKey": "https:\/\/zhjy.rchang.cn\/api\/project_audit\/getOpenid?type=1",

    "MenuId": "421351906"

}

消息推送

消息能力是公众号中最核心的能力，我们这次主要分享2个，被动回复用户消息和模板推送能力。

被动回复用户消息

被动回复用户消息，把需要的参数拼接成xml格式的，我觉得主要是出于安全上的考虑作为出发点。

<xml>

  <ToUserName><![CDATA[toUser]]></ToUserName>

  <FromUserName><![CDATA[fromUser]]></FromUserName>

  <CreateTime>12345678</CreateTime>

  <MsgType><![CDATA[text]]></MsgType>

  <Content><![CDATA[你好]]></Content>

</xml>

在php代码里的实现即为：

protected function subscribe($params)

{

    $time = time();

    $content = "欢迎的文字";

    $send_msg = '<xml>

            <ToUserName><![CDATA['.$params['FromUserName'].']]></ToUserName>

            <FromUserName><![CDATA['.$params['ToUserName'].']]></FromUserName>

            <CreateTime>'.time().'</CreateTime>

            <MsgType><![CDATA[text]]></MsgType>

            <Content><![CDATA['.$content.']]></Content>

        </xml>';



    echo $send_msg;

    return false;

}

模板推送能力

模版推送的两个关键是申请了模版，还有就是模版的data需要和模版中的一致，才能成功发送，模版设置和申请的后台位置在 广告与服务-模版消息

public function project_message()

{

	$touser = '发送人公众号openid';

	$template_id = '模版ID';

	$url = 'https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=' . $this->access_token;

	$details_url = '点开链接，需要跳转的详情url';

	$thing1 = '模版里定义的参数';

	$time2 = '模版里定义的参数';

	$const3 = '模版里定义的参数';

	$send_data = [

		'touser' => $touser,

		'template_id' => $template_id,

		'url' => $details_url,

		'data' => [

			'thing1' => ['value' => $thing1],

			'time2' => ['value' => $time2],

			'const3' => ['value' => $const3],

		]

	];



	$result = curl_json($url, $send_data);

}

错误及解决方式

1、公众号后台: 设置与开发-安全中心-IP白名单 把IP地址加入白名单即可。

{

    "errcode": 40164,

    "errmsg": "invalid ip 47.63.30.93 ipv6 ::ffff:47.63.30.93, not in whitelist rid: 6698ef60-27d10c40-100819f9"

}

2、模版参数不正确时，接口返回

{

    "errcode": 47003,

    "errmsg": "argument invalid! data.time5.value invalid rid: 669df26e-538a8a1a-15ab8ba4"

}

3、access_token不正确

{

    "errcode": 40001,

    "errmsg": "invalid credential, access_token is invalid or not latest, could get access_token by getStableAccessToken, more details at https://mmbizurl.cn/s/JtxxFh33r rid: 669df2f1-74be87a6-05e77d20"

}

4、access_token超过调用次数

{

    "errcode": 45009,

    "errmsg": "reach max api daily quota limit, could get access_token by getStableAccessToken, more details at https:\/\/mmbizurl.cn\/s\/JtxxFh33r rid: 669e5c4c-2bb4e05f-61d6917c"

}

文档参考

公众号开发文档首页: developers.weixin.qq.com/doc/offiacc…

分享一个微信公众号的调试工具地址，特别好用 ： mp.weixin.qq.com/debug/

 前言

前面我们聊过可以通过不同的 script 属性比如 defer，async 来实现不同的加载效果，从而实现首屏优化。

今天我们来聊一下动态导入之 import，当然 import 动态导入也不是一把梭的，也是需要根据项目情况进行使用，在面试以及实际工作当中都可以用到，一起来看看吧！

在了解动态导入之前，我们先来看一下什么是静态导入。 

静态导入

静态导入会在编译时解析所有导入的模块，并在程序开始执行之前加载它们。这意味着所有被导入的模块在应用启动时就已经加载完毕。

什么意思，我们先来看一下下面这段代码：

这段代码很简单，我在页面导入了 import.js，当点击按钮时打印输出语句。

我们来看一下浏览器初始化加载情况：

很明显，程序开始执行之前，import.js 就被加载了。

但是在某些时刻，我们不希望文件在没有被使用时就被加载，只希望在使用时加载，这样可以优化首屏的加载速度，这些时刻我们就可以使用动态导入。

动态导入

动态导入是一种在代码执行时按需加载模块的技术，而不是在应用程序初始化时加载所有模块。

默认不会一上来加载所有文件，只会在用到时加载，这样可以优化初始加载时间，提升页面响应速度。

动态导入与静态导入不同，动态导入使用 ES6 中的 import() 语法，可以在函数或代码块中调用，从而实现条件加载、按需加载或延迟加载。例如：

import('./import.js')

 还是上面的代码，我们使用动态导入来进行实现一下：

我们再来看一下浏览器的加载情况：

可以看到一上来并没有加载 import.js

当点击按钮时，才加载了 import.js 文件，这就说明import导入的文件不会一上来就直接被加载，而是在相关代码被执行时才进行加载的。

 一些应用

路由懒加载

在 react 中我们常常使用 lazy 和 Suspense 来实现路由的懒加载，这样做的好处就是初始化时不会一下加载所有的页面，而是当切换到相应页面时才会加载相应的页面，例如：

组件动态导入

 对于一些不常用或者不需要直接加载的组件我们也可以采用动态导入，比如弹出框。

我们只需要在点击时进行加载显示即可。

 分包优化

这里就简单说一下分包的优化，webpack 默认的分包规则有以下三点：

根据第二点，被动态导入的文件会被单独进行打包，不会被分包进同一个文件，也就不会在初始加载 bundle.js 时被一起进行加载。

通过将代码分割成多个小包，可以在用户需要时才加载特定的模块，从而显著减少初始加载的时间。

总结

在进行首屏优化时，可以采取动态导入的方式实现，使用 import('./文件路径')实现，虽然动态导入有一些优化首屏渲染的优势，但是也有一些缺点，比如首次加载延迟，不利于 SEO 优化等，所以在使用动态导入时应该好好进行规划，比如一些不常用的模块或者内容不太复杂，对加载速度无要求的文件可以进行动态导入，这个还是要根据项目的需求来进行使用的。

智能驾驶业务里常用web 3d来可视化地图和传感器数据、显示路径规划结果等方法协助算法调试和仿真，可以用threejs来做，毕竟在国内社区相对活跃，也比较容易上手，效果类似下图：

当然以上图片都是客户端的版本，web3d版本的ui其实并不会这么精致，毕竟只是服务于内部算法和研发。这个专栏纯属作者一时兴起并希望能产出一个麻雀虽小五脏俱全的行泊场景（简称人太闲），本文就先把自车的基础场景搭建起来

本文基于 three^0.167.1 版本

初始化项目

用 Vite 脚手架快速搭一个 react 项目用来调试

pnpm create vite autopilot --template react-ts

把 threejs 官网的例子稍微改下，加到项目里看看。新建一个 renderer 对象如下：

// src/renderer/index.ts

import * as THREE from "three";



class Renderer {

  constructor() {

    //

  }



  initialize() {

    const container = document.getElementById("my-canvas")!;

    const width = container.offsetWidth,

      height = container.offsetHeight;

    const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);

    camera.position.z = 1;

    const scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);

    const material = new THREE.MeshNormalMaterial();

    const mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);

    const renderer = new THREE.WebGLRenderer({ antialias: true });

    renderer.setSize(width, height);

    renderer.setAnimationLoop(animate);

    container.appendChild(renderer.domElement);

    function animate(time: number) {

      mesh.rotation.x = time / 2000;

      mesh.rotation.y = time / 1000;

      renderer.render(scene, camera);

    }

  }

}



export const myRenderer = new Renderer();

// App.tsx

import { useEffect } from "react";

import { myRenderer } from "./renderer";

import "./App.css";



function App() {

  useEffect(() => {

    myRenderer.initialize();

  }, []);



  return (

    <>

      <div id="my-canvas"></div>

    </>

  );

}



export default App;

加载自车

ok，跨出第一步了，接下来整辆自车（egoCar）

“自车”指的是自动驾驶汽车本身，它能够通过搭载的传感器、计算平台和软件系统实现自主导航和行驶

可以上 free3d 下载个免费的车辆模型，里面有很多种格式的，尽量找 gltf/glb 格式的（文件体积小，加载比较快）。

这里以加载 glb 格式的模型为例，可以先把模型文件放到 public 目录下，因为加载器相对网页的根路径（index.html）解析，而 public 目录在打包后会原封不动保存到根目录里

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

const gltfLoader = new GLTFLoader();



class Renderer {

  scene = new THREE.Scene();

  // ...  

  loadEgoCar() {

    gltfLoader.load("./su7.glb", (gltf) => {

      const car = gltf.scene;

      car.scale.set(0.1, 0.1, 0.1);

      this.scene.add(car);

    });

  }

  // ...

  initialize() {

    // ...

    this.loadEgoCar();

  }

}

但如果一定要放到 src/assets/models 目录里呢？然后通过import方式引入文件来用，那这么操作下来就会遇到这个报错（You may need to install appropriate plugins to handle the .glb file format, or if it's an asset, add "**/*.glb" to assetsInclude in your configuration）：

怎么解？在 vite.config.ts 文件加入 assetsInclude。顺带把 vite 指定路径别名 alias 也支持一下

// vite .config.ts 

import { defineConfig } from "vite";

import react from "@vitejs/plugin-react";

import { fileURLToPath, URL } from "node:url";



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

export default defineConfig({

  plugins: [react()],

  // 指定路径别名

  resolve: {

    alias: {

      "@": fileURLToPath(new URL("./src", import.meta.url)),

    },

  },

  assetsInclude: ["**/*.glb"],

});

node:url 如果提示没有该模块，先安装下@types/node，可能要重启下vscode才能生效

pnpm i @types/node -D

接下来就可以直接用 import 导入 glb 文件来用了

import carModel from "@/assets/models/su7.glb";



class Renderer {

  // ...

  loadEgoCar() {

    gltfLoader.load(carModel, (gltf) => {

      const car = gltf.scene;

      car.scale.set(0.1, 0.1, 0.1);

      this.scene.add(car);

    });

  }

}

OrbitControls

增加 OrbitControls 插件，便于调节自车视角，这个插件除了围绕目标点（默认是原点[0,0,0]）旋转视角，还支持缩放（滚轮）和平移（鼠标右键，触摸板的话是双指长按）

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

class Renderer {

    initialize() {

        // ...

        const controls = new OrbitControls(camera, renderer.domElement);

        function animate() {

          // ...

          controls.update();

          renderer.render(scene, camera);

        }

    }

}

光源设置

看起来场景和自车都比较暗，咱们调下光源，加一个环境光 AmbientLight 和平行光 DirectionalLight，平行光位置放自车后上方，沿着自车方向（也就是原点方向）发射光源

// ...

// 没有特定方向，影响整个场景的明暗

const ambient = new THREE.AmbientLight(0xffffff, 0.4);

scene.add(ambient);

// 平行光

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);

directionalLight.position.set(60, 80, 40);

scene.add(directionalLight);

地面网格

增加坐标网格，新建一个 Grid 对象，提供一个水平的基准面，便于观察

// ...

// 50表示网格模型的尺寸大小，20表示纵横细分线条数量

const gridHelper = new THREE.GridHelper(50, 20);

scene.add(gridHelper);

// 顺带调高下相机位置

camera.position.set(0, 1, 1.8);

// 设置场景背景色(颜色值，透明度)

renderer.setClearColor(0x000000, 0.85);

道路实现

这里先简单实现一段不规则道路，封装一个 freespace 对象，还要考虑它的不规则和带洞的可能，所以需要做好接口定义，其实数据主要是点集，一般这些点集都是地图上游发下来的，可能是 protobuf 或者 json 的格式

export interface IFreespace {

  // 一般可以用于判断元素是否可复用

  id: string;

  position: IPos;

  contour: IPos[];

  // 洞可能有多个，所以这里应该设置成二维数组

  holes?: IPos[][];

  color?: IColor;

}

export interface IPos {

  x: number;

  y: number;

  z?: number;

}

export interface IColor {

  r: number;

  g: number;

  b: number;

  a?: number;

}

因为只是一个平面形状，所以可以用 THREE.Shape 来实现，它可以和 ExtrudeGeometry、ShapeGeometry 一起使用来创建二维形状

// src/renderers/freespace.ts

class Freespace {

  scene = new THREE.Scene();



  constructor(scene: THREE.Scene) {

    this.scene = scene;

  }



  draw(data: IFreespace) {

    const {

      contour,

      holes = [],

      color = { r: 0, g: 0, b: 0 },

      position,

    } = data;

    if (contour.length < 3) {

      return;

    }

    const shape = new THREE.Shape();

    // 先绘制轮廓

    // 设置起点

    shape.moveTo(contour[0].x, contour[0].y);

    contour.forEach((item) => shape.lineTo(item.x, item.y));

    // 绘制洞

    holes.forEach((item) => {

      if (item.length < 3) {

        return;

      }

      const path = new THREE.Path();

      path.moveTo(item[0].x, item[0].y);

      item.forEach((subItem) => {

        path.lineTo(subItem.x, subItem.y);

      });

      // 注意这一步

      shape.holes.push(path);

    });

    const shapeGeometry = new THREE.ShapeGeometry(shape);

    const material = new THREE.MeshPhongMaterial();

    // 注意：setRGB传参颜色值需要介于0-1之间

    material.color.setRGB(color.r / 255, color.g / 255, color.b / 255);

    material.opacity = color.a || 1;

    const mesh = new THREE.Mesh(shapeGeometry, material);

    mesh.position.set(position.x, position.y, position.z || 0);

    mesh.rotateX(-Math.PI / 2);

    this.scene.add(mesh);

  }

}



export default Freespace;

ok先用mock的数据画一段带洞的十字路口，加在 initialize 代码后就行，其实道路上还应该有一些交通标线，后面再加上吧

最后再监听下界面的 resize 事件，使其能根据容器实际大小变化动态调整场景

  // ...

  constructor() {

    // 初始化渲染对象

    this.renderers = {

      freespace: new Freespace(this.scene),

    };

  }

  initialize() {

      // ...

      this.loadEgoCar();

      this.registerDefaultEvents();

      // mock

      this.mockData();

  }

 mockData() {

    this.renderers.freespace.draw(freespaceData1);

  }

  // 监听resize事件

  registerDefaultEvents() {

    window.addEventListener("resize", this.onResize.bind(this), false);

  }

  unmountDefaultEvents() {

    window.removeEventListener("resize", this.onResize.bind(this), false);

  }

  onResize() {

    const container = document.getElementById("my-canvas")!;

    const width = container.offsetWidth,

      height = container.offsetHeight;

    this.camera.aspect = width / height;

    this.camera.updateProjectionMatrix();

    this.renderer.setSize(width, height);

  }

最后

ok先到这了，主要是先把项目搭起来，后面会继续分享下更多地图和感知元素以及他车、行人、障碍物等效果的实现

• github地址[0.1.1]


• 原文地址

有时候不得不承认，官方的总结有时就是最精简的：

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

虽然作为Vuex的升级版，但为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将pinia比作为Vue3的Vuex，同时，pinia提供了一种更简洁、更直观的方式来处理应用程序的状态，更为重要的是，pinia的学习成本更低，低到一篇文章就能涵盖pinia的全部。

Pinia的安装与配置：

首先自然是安装pinia，在基于Vue3的项目环境中，提供了npm与yarn两种安装方式：

npm install pinia

yarn add pinia

随后，通常就是在src目录下新建一个专属的store文件夹，在其中的js文件中创建并抛出这个仓库。

import { createPinia } from 'pinia'  // 引入pinia模块



const store = createPinia()    // 创建一个仓库



export default store   // 抛出这个仓库

既然把这个仓库抛出了，那么现在便是让它能在全局起作用，于是在Vue的主要应用文件中（通常为main.js），引入使用pinia。

import { createApp } from 'vue'

import App from './App3.vue'



import store from './store'  //引入这个仓库 



createApp(App).use(store).mount('#app')  // 再use一下

这样一来pinia仓库就能全局生效了!

Pinia的主要功能：

在官方文档中，Pinia提供了四种功能，分别是：

那么接下来我会通过一个具体的实例来表现出这四个功能，如下图：

分别是充当仓库的Store功能。存储子组件User.vue中数据的State功能。另一个子组件Update-user.vue中，点击按钮后数据会实现更新，也就是修改State中数据的Actions功能。与无论点击多少次” 经过一年后按钮 ”，页面都会实现同步更新的Getters功能。

State：

简单来说，State的作用就是作为仓库的数据源。

就比如说，我想在仓库的数据源里面放上一个对象来进行使用，那我们只需在先前创建的store文件夹中再创建一个js文件，这里我给它起名为user，然后再其中这样添加对象。

（第一行引入的defineStore代表defineStore是store的一部分。)

import { defineStore } from 'pinia'   // defineStore 是 store 的一部分



export const useUserStore = defineStore({

    id: 'user',

    state: () => ({   // 仓库数据源

            userInfo: {

                name: '小明',

                age: 18,

                sex:'boy'

            }

    })

})

那么现在，我们想使用仓库中的数据就成为了一件非常容易的事。

正如上图，这里有一个父组件App.vue，两个子组件User.vue、Update-user.vue。

父组件不做任何动作，只包含对两个子组件的引用：

<template>

        <User/>

        <Updateuser/>

</template>



<script setup>

import User from './components/User.vue'

import Updateuser from './components/Update-user.vue'





</script>



<style lang="css" scoped>



</style>

子组件User.vue：

可以看到在这个子组件中，我们通过import { useUserStore } from '@/store/user'引用仓库，从而获得了仓库中小明姓名、年龄、性别的数据。

由于接下来的Update-user.vue组件中会添加几个按钮对这些数据进行修改，那么我们就要把这些数据设置成响应式。

正常情况下，store自带响应性，但如果我们不想每次都写userStore.userInfo.name这么长一大串，就可以尝试将这些值取出来赋给其他变量：

这里有两种方法，第一种是引入computed模块，如第14行年龄的修改。另一种是引入storeToRefs模块，这是一种属于Pinia仓库的模块，将整个userInfo变成响应式。

于是接下来，就轮到我们的Actions登场了

<template>

<ul>

    <li>姓名：{{ userStore.userInfo.name }}</li>

    <li>年龄：{{ age }}</li>

    <li>性别；{{ userInfo.sex }}</li>

</ul>

</template>



<script setup>

import { useUserStore } from '@/store/user'

import { computed } from 'vue'

import { storeToRefs } from 'pinia'



const userStore = useUserStore()

const age = computed(() => userStore.userInfo.age)   // 1. 计算属性使响应式能生效

const { userInfo } = storeToRefs(userStore)  // 2. 专门包裹仓库中函数用来返回对象



</script>



<style lang="scss" scoped>



</style>

Actions：

简单来说，Actions的作用就是专门用来修改State，如果你想要修改仓库中的响应式元素，只需要进行两步操作：

第一步：在user.js也就是我们的仓库中添加actions，专门设置函数用来修改state对象中的值。例如changeUserName作用是修改姓名， changeUserSex作用是修改性别。

import { defineStore } from 'pinia'   // defineStore  是 store的一部分



export const useUserStore = defineStore({

    id: 'user',

    state: () => ({   // 仓库数据源

            userInfo: {

                name: '小明',

                age: 18,

                sex:'boy'

            }

    }),

    actions: {                     // 专门用来修改state

        changeUserName(name) {

            this.userInfo.name = name

        },

        changeUserSex(sex){

            this.userInfo.sex = sex

        }

    }

})

子组件Update-user.vue：

第二步，在控制按钮的组件Update-user.vue中触发这两个函数，就如第10与14行的两个箭头函数。

<template>

   <button @click="changeName">修改仓库中用户姓名</button>

      <button @click="changeSex">修改仓库中用户性别</button>

</template>



<script setup>

import { useUserStore } from '@/store/user'  // 引入Pinia仓库

const userStore = useUserStore()            // 声明仓库



const changeName = () => {                  // 触发提供的函数

  userStore.changeUserName('小红')



}

const changeSex = () => {

  userStore.changeUserSex('gril')

}



</script>



<style lang="css" scoped>



</style>

这样一来，依赖于Actions，我们就成功完成了响应式修改仓库中数据的功能，也就是前两个按钮的功能！

Getters：

简单来说Getters就是仓库中的计算属性。

现在我们来实现第三个按钮功能，首先就是在User.vue组件中第5行，添加 “ 十年之后年龄 ” 一栏：

<template>

<ul>

    <li>姓名：{{userStore.userInfo.name}}</li>

    <li>年龄：{{ age }}</li>

    <li>十年后年龄：{{ userStore.afterAge }}</li>    // 添加的栏

    <li>性别：{{ userInfo.sex }}</li>

</ul>

</template>



<script setup>

import { useUserStore } from '@/store/user'

import { computed } from 'vue'

import { storeToRefs } from 'pinia'



const userStore = useUserStore()

const age = computed(() => userStore.userInfo.age)

const { userInfo } = storeToRefs(userStore)



</script>



<style lang="scss" scoped>



</style>

那么现在你一定能注意到这一栏其中的userStore.afterAge，这正是我们将在getters中返回的值。

那么关于getters，具体的使用方法就是继续在user.js中添加进getters，我们在其中打造了一个afterAge函数来返回userStore.afterAge，正如第25行。

import { defineStore } from 'pinia'   // defineStore  是 store的一部分



export const useUserStore = defineStore({

    id: 'user',

    state: () => ({   // 仓库数据源

            userInfo: {

                name: '小明',

                age: 18,

                sex:'boy'

            }

    }),

    actions: { // 专门用来修改state

        changeUserName(name) {

            this.userInfo.name = name

        },

        changeUserSex(sex){

            this.userInfo.sex = sex

        },

        changeUserAge(age){           //  新添加的一年后年龄计算方法

            this.userInfo.age += age

        }

    },

    getters: { // 仓库中的计算属性,所依赖的值改变会重新执行

        afterAge(state) {

            return state.userInfo.age + 10

        }

    }

})

准备工作完毕，现在就该在页面上添加这个按钮，于是在组件Update-user.vue添加上按钮与执行函数。

 <button @click="changeAge">经过一年后</button>

const changeAge = () => {

  userStore.changeUserAge(1)

}

有了这些之后，这个项目的功能便彻底完善，无论点击多少次“ 经过一年后 ”按钮，在页面上显示的值都是正确且实时更新的，这就是Getters的功劳！

补充：数据持久化

关于整个项目的功能实现确实已经结束，但人的贪心却是不得满足的，如果我们想要在原有的基础上实现网页刷新数据却不刷新，也就是说数据的持久化，那又该怎么办呢？

很简单，也就是堪堪三步，便能实现。

第一步：安装persist插件。

npm i pinia-plugin-persist

第二步：在store的js文件中引入这个插件。

import { createPinia } from 'pinia'

import piniaPluginPersist from 'pinia-plugin-persist'  //引入插件



const store = createPinia()

store.use(piniaPluginPersist)  // 使用插件



export default store

第三步：在我们前文user.js的defineStore库内继续添加上persist功能。

persist: { // 持久化

    enabled: true,

    strategies: [ // 里面填想要持久化的数据

    {

        paths: ['userInfo'],    // 指明持久化的数据

        storage: localStorage  // 指明存储

    }

    ]

}

现在可以看到点击按钮后的数据都被存储到浏览器的存储空间中，无论多少次刷新都不会被重置！

最后：

至此，这样一个简简单单的项目，却解释清楚了Pinia功能的核心，读完这篇文章，相信每一个学习Pinia的人都能有所收获。

如何将指定html内容转化成图片保存？这个问题很值得深思，实际应用中也很有价值。最直接的想法就是使用canvas，熟悉canvas的同学可以尝试一下。这里不做太多的说明，本文采用html2canvas库来实现。

html2canvas库的使用非常简单，只需要引入html2canvas库，然后调用html2canvas方法即可，官方地址。

接下来说一下简单的使用，以react项目为例。

获取整个页面截图，可以使用底层IDroot，这样下载的就是root下的所有元素。

import html2canvas from "html2canvas";



const saveCanvas = () => {

    // 画布基础元素，要绘制的元素

    const canvas: any = document.getElementById("root");

    const options: any = { scale: 1, useCORS: true };

    html2canvas(canvas, options).then((canvas) => {

      const type = "png";

      // 返回值是一个数据url，是base64组成的图片的源数据

      let imgDt = canvas.toDataURL(type);

      let fileName = "img" + "." + type;

      // 保存为文件

      let a = document.createElement("a");

      document.body.appendChild(a);

      a.href = imgDt;

      a.download = fileName;

      a.click();

    });

  };

图片的默认背景色是#ffffff，如果想要透明色可设置为null，比如设置为红色。

const options: any = { scale: 1, useCORS: true, backgroundColor: "red" };

正常情况下网络图片是无法渲染的，可以使用useCORS属性，设置为true即可。

const options: any = { scale: 1, useCORS: true };

保存某块元素的截图

const canvas: any = document.getElementById("swiper");

如果希望将某些元素排除，可以将data-html2canvas-ignore属性添加到这些元素中，html2canvas将从渲染中排除这些元素。

<Button

  data-html2canvas-ignore

  color="primary"

  fill="solid"

  onClick={saveCanvas}

>

  download

</Button>

完整代码

npm install html2canvas

// demo.less

.contentSwiper {

  width: 710px;

  height: 375px;

  color: #ffffff;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 48px;

  user-select: none;

}

.swiper {

  padding: 0 20px;

}

import React from "react";

import { Button, Space, Swiper } from "antd-mobile";

import html2canvas from "html2canvas";

import styles from "./demo.less";



export default () => {

  const saveCanvas = () => {

    // 画布基础元素，要绘制的元素

    const canvas: any = document.getElementById("root");

    const options: any = { scale: 1, useCORS: true, backgroundColor: "red"

  };

    html2canvas(canvas, options).then((canvas) => {

      const type = "png";

      // 返回值是一个数据url，是base64组成的图片的源数据

      let imgDt = canvas.toDataURL(type);

      let fileName = "img" + "." + type;

      // 保存为文件

      let a = document.createElement("a");

      document.body.appendChild(a);

      a.href = imgDt;

      a.download = fileName;

      a.click();

    });

  };

  const colors: string[] = ["#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac"];

  const items = colors.map((color, index) => (

    <Swiper.Item key={index}>

      <div className={styles.contentSwiper} style={{ background: color }}>

        {index + 1}

      </div>

    </Swiper.Item>

  ));

  return (

    <div className="content">

      <div id="swiper" className={styles.swiper}>

        <Swiper

          style={{

            "--track-padding": " 0 0 16px",

          }}

          defaultIndex={1}

        >

          {items}

        </Swiper>

      </div>

      <div>

        <img

          width={200}

          src="https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF"

        />

      </div>

      <Space>

        <Button

          data-html2canvas-ignore

          color="primary"

          fill="solid"

          onClick={saveCanvas}

        >

          download

        </Button>

        <Button color="primary" fill="solid">

          Solid

        </Button>

        <Button color="primary" fill="outline">

          Outline

        </Button>

        <Button color="primary" fill="none">

          

        </Button>

      </Space>

    </div>

  );

};

比较好奇vue项目中使用watch还是watchEffect居多，查看了element-plus、ant-design-vue两个UI库, 整体上看，watch使用居多，而watchEffect不怎么受待见，那这两者之间有什么关系？

watchEffect是watch的衍生

为什么说watchEffect是watch的衍生？

• 首先，两者提供功能是有重叠。大部分监听场景，两者都能满足。

const list = ref([]);

const count = ref(0);



watch(

   list,

   (newValue) => {

    count.value = newValue.length;

   } 

)



watchEffect(() => {

    count.value = list.value.length;

})

• 其次，源码上两者也都是同一出处。以下是两者的函数定义：

export function watch(

  source: T | WatchSource,

  cb: any,

  options?: WatchOptions,

): WatchStopHandle {

  return doWatch(source as any, cb, options)

}



export function watchEffect(

  effect: WatchEffect,

  options?: WatchOptionsBase,

): WatchStopHandle {

  return doWatch(effect, null, options)

}

两者内部都调用doWatch函数，并且返回都是WatchStopHandle类型。唯独入参上有比较大的区别，watch的source参数就像大杂烩，支持PlainObject、Ref、ComputedRef以及函数类型；而watchEffect的effect参数仅仅是一个函数类型。

watch早于watchEffect诞生，watch源代码有这样一句提示：

if (__DEV__ && !isFunction(cb)) {

    warn(

      `\`watch(fn, options?)\` signature has been moved to a separate API. ` +

        `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +

        `supports \`watch(source, cb, options?) signature.`,

    )

}

也就是说历史的某一个版本，watch也是支持watch(fn, options?)用法，但为了降低API复杂度，将这部分功能迁移至watchEffect函数。一个优秀框架的发展历程也不过如此，都是在不断的重构升级。

话又说回来，到目前，为什么大部分Vue开发者更偏向于使用watch，而不是watchEffect?，带着这个问题，庖丁解牛式层层分析。

watch、watchEffect底层逻辑

当我们把watch、watchEffect底层逻辑看透，剩下的watchSyncEffect、watchPostEffect也就自然了解。

先回顾下watch、watchEffect内部调用doWatch的参数：

// watch

doWatch(source as any, cb, options)

// demo

watch(

   list,

   (newValue) => {

    count.value = newValue.length;

   } 

)



// watchEffect

doWatch(effect, null, options)

// demo

watchEffect(() => {

    count.value = list.value.length;

})

入参的区别，如下表所示：

根据参数对比，先抛出两个问题：

1. doWatch为什么能自动监听WatchEffect函数内的数据变更，并且能重新执行？

2. 第三个参数WatchOptions、WatchOptionBase有什么区别？

watchOptions、WatchOptionBase的定义如下：

export interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {

  immediate?: Immediate

  deep?: boolean

  once?: boolean

}



export interface WatchOptionsBase extends DebuggerOptions {

  flush?: 'pre' | 'post' | 'sync'

}

WatchOptionsBase仅提供了flush，因此watchEffect函数的第三个参数也只有flush一个选项。
flush包含pre、post、sync三个值，缺省为pre。它明确了监听器的触发时机，pre和post比较明确，对应渲染前、渲染后。

sync官方定义为：在某些特殊情况下 (例如要使缓存失效)，可能有必要在响应式依赖发生改变时立即触发侦听器。简而言之，依赖的多个变量，只要其中一个有更新，监听器就会触发一次。

const list = ref([]);

const page = ref(1);

const message = ref('');



watchEffect(() => {

    message.value = `总量${list.value.length}, 当前页：${page.value}`

    console.log(message.value);

}, { flush: 'sync' })

例如上述的list、page任意一个有更新，则会输出一次console。sync模式得慎重使用，例如监听的是数组，其中一项有更新都会触发监听器，可能带来不可预知的性能问题。

post也有明确的应用场景，例如:当页面侧边栏显示或隐藏后，需要容器渲染完成后再更新内部的图表等元素。不使用flush选项的解法，一般是监听visible变化并使用setTimeout延迟更新。有了post，一个属性即可搞定。

watch(visible, (value) => {

    setTimeout(() => {

        // 更新容器内图表

    }, 1000);

})



watch(visible, (value) => {

    // 更新容器内图表

}, { flush: 'post' })

完成了第二个问题的解答， 要回答第一个问题，需要深入doWatch函数， 在上一篇《写Vue大篇幅的ref、computed，而reactive为何少见？》也有对doWatch做局部介绍，可以作为辅助参考。

doWatch源码

先从doWatch函数签名上，对其有概括性的认识：

function doWatch(

  source: WatchSource | WatchSource[] | WatchEffect | object,

  cb: WatchCallback | null,

  {

    immediate,

    deep,

    flush,

    once,

    onTrack,

    onTrigger,

  }: WatchOptions = EMPTY_OBJ,

): WatchStopHandle

由于我们主要目的是回答问题：doWatch为什么能自动监听WatchEffect函数内的数据变更，并且能重新执行？

因此仅分析source为WatchEffect的情况，此时，cb为null, 第三个参数仅有flush选项。

WatchEffect类型定义如下：

export type WatchEffect = (onCleanup: OnCleanup) => void

onCleanup参数的作用是，在下一次监听器执行前被触发，通常用于状态清理。

doWatch函数实现，最核心的片段是ReactiveEffect的生成：

const effect = new ReactiveEffect(getter, NOOP, scheduler)

为什么ReactiveEffect是其核心？因为它起到了"中介"的作用，在监听器函数内，每一个可监听的变量都对应有依赖项集合deps，当调用这些变量的getter时，ReactiveEffect会把自身注入到依赖集合deps中，这样每当执行变量的setter时，deps集合中的副作用都会触发，而每个副作用effect内部会调用scheduler, scheduler可理解为调度器，负责处理视图更新时机，scheduler内部选择合适的时机触发监听器。

接下来着重看getter、scheduler定义，当source为WatchEffect类型时，getter定义片段如下：

 // no cb -> simple effect

  getter = () => {

    if (cleanup) {

      cleanup()

    }

    return callWithAsyncErrorHandling(

      source,

      instance,

      ErrorCodes.WATCH_CALLBACK,

      [onCleanup],

    )

  }

首先执行cleanup，也就是说如果参数传入有onCleanup回调，那么每次在获取新值前都会触发onCleanup。其次是return语句，调用callWithAsyncErrorHandling函数，从函数可探察之，一方面支持异步，另一方面处理异常错误。

支持异步：也就是我们传入的监听器可以是一个异步函数，那么我们可以在其中执行远程请求的调用，例如官方给的示例, 当id.value值变化，从远端请求数据await response，并赋值给data.value。

watchEffect(async (onCleanup) => {

  const { response, cancel } = doAsyncWork(id.value)

  // `cancel` 会在 `id` 更改时调用

  // 以便取消之前未完成的请求

  onCleanup(cancel)

  data.value = await response

})

上述示例中，如果id.value频繁更新，则会导致触发多次远端请求，要解决该问题，可调用onCleanup(cancel)，将cancel传入到doWatch内部，并且每次执行cleanup时被调用。onCleanup定义如下：

let cleanup: (() => void) | undefined

let onCleanup: OnCleanup = (fn: () => void) => {

    cleanup = effect.onStop = () => {

      callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)

      cleanup = effect.onStop = undefined

    }

}

其中，fn即为上述示例中的cancel，这样就建立了cancel和cleanup的关联，因此每次更新前，先调用cancel中断上一次请求。

callWithAsyncErrorHandling函数定义如下：

export function callWithAsyncErrorHandling(fn,instance,type,args?): any {

  ...

  const res = callWithErrorHandling(fn, instance, type, args)

    if (res && isPromise(res)) {

      res.catch(err => {

        handleError(err, instance, type)

      })

    }

    return res

  ...

}

res为fn函数执行结果，由于支持同步、异步。如果fn为异步函数，那么res为Promise类型，并且对异常做了兜底处理。

当fn函数执行后，内部所有可监听变量的deps都会添加上当前effect，所以只要变量有更新，effect的scheduler就被触发。

watchEffect官方定义有：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。“立即运行一个函数”如何体现？

doWatch函数的最后几行代码如下：

if (flush === 'post') {

    queuePostRenderEffect(

      effect.run.bind(effect),

      instance && instance.suspense,

    )

} else {

    effect.run()

}

如果flush不为post，那么立即执行effect.run(), 而run函数会调用getter，因此会立即运行监听器函数一次；如果flush为post，那么effect将会在vue下一次渲染前第一次执行effect.run()。

至此，我们就分析完watchEffect的底层逻辑，总结其特点：立即执行，支持异步，并且会自动监听变量更新。

为什么不能两者取一，而必须共存

再次回顾watch的定义:

export function watch(

  source: T | WatchSource,

  cb: any,

  options?: WatchOptions,

): WatchStopHandle {

  return doWatch(source as any, cb, options)

}

其中WatchOptions包含的选项有：immediate、deep、once、flush。如果是watchEffect，选项仅有flush，并且immediate相当于true，剩下的deep、once不支持配置。

先说watchEffect的缺点：

• 不支持immediate为false，必须是立即执行。例如下面的代码，由于autoplay默认false，初始化时不需要立即执行。如果是watchEffect，则pauseTimer初始化会执行一次，完全没必要。

watch(

    () => props.autoplay,

    (autoplay) => {

      autoplay ? startTimer() : pauseTimer()

    }

)

• 不支持deep为true的场景，只能见监听当前使用的属性。但如果是调用watch(source, cb, { deep: true }), 则会通过traverse(source)将source所有深度属性读取一次，和effect建立关联，达到自动监听所有属性的目的。


• 异步使用有坑，watchEffect 仅会在其同步执行期间，才追踪依赖。在使用异步回调时，只有在第一个 await 正常工作前访问到的属性才会被追踪。

再说watchEffect优点：

优点也是非常明显，写法非常简洁，无需显式声明监听哪些变量，一个回调函数搞定，并且默认为立即执行，我认为能满足开发中80%的应用场景。另一方面，由于只监听回调中使用的属性，相比于deep为true的一锅端方式，watchEffect则更加直观明了。

总结

watchSyncEffect、watchPostEffect和watchEffect唯一的区别是：flush分别固定为sync、post。所以，watchEffect为watch的衍生，而watchSyncEffect、watchPostEffect为watchEffect的衍生。

对于开发使用上:

• watchPostEffect、watchSyncEffect仅在极少数的特殊场景下才使用，完全可以用watchEffect(fn, { flush: 'sync' | 'post' })代替，多了反而对入门开发者来说是徒增干扰。


• 个人认为应优先使用watchEffect函数，毕竟代码写法上更加简洁，属性依赖上也更加明确。满足不了的场景，再考虑使用watch。

前言

Vue的内置指令估计大家都用过不少，例如v-for、v-if之类的就是最常用的内置指令，但今天给大家介绍几个平时用的比较少的内置指令。毕竟这几个Vue内置指令可用可不用，不用的时候系统正常跑，但在对的地方用了却能提升系统性能，下面将结合示例进行详细说明。

一、v-once

作用：在标签上使用v-once能使元素或者表达式只渲染一次。首次渲染之后，后面数据再发生变化时使用了v-once的地方都不会更新，因此用在数据不需要变化的地方就能进行性能优化。

v-once指令实现原理： Vue组件初始化时会标记上v-once，首次渲染会正常执行，后续再次渲染时如果看到有v-once标记则跳过二次渲染。

示例代码： 直接作用在标签上，可以是普通标签也可以是图片标签，当2S后数据变化时标签上的值不会重新渲染更新。

<template>

  <div>

    <span v-once>{{ message }}</span>

    <img v-once :src="imageUrl"></img>

  </div>

</template>



<script setup>

import { ref } from 'vue';



let message = ref('Vue指令!');

let imageSrc = ref('/path/my/image.jpg');



setTimeout(() => {

  message.value = '修改内容!';

  imageUrl.value = '/new/path/my/images.jpg';

}, 2000);



</script>

注意： 作用v-once会使属性失去响应式，要确保这个地方不需要响应式更新才能使用，否则会导致数据和页面视图对不上。

二、v-pre

作用： 在标签上使用v-pre后，Vue编译器会自动跳过这个元素的编译。使用此内置指令后会被视为静态内容。

v-pre指令实现原理： Vue初次编译时如果看到有v-pre标记，那么跳过这部分的编译，直接当成原始的HTML插入到DOM中。

示例代码： 常规文本会正常编译成您好！，但使用了v-pre后会跳过编译原样输出{{ message }}。

<template>

  <div>

    <h2>常规: {{ message }}</h2>

    <h2 v-pre>使用v-pre后: {{ message }}</h2>

  </div>

</template>



<script setup>

import { ref } from 'vue';



let message = ref('您好!');

</script>

注意： 要区分v-pre和v-once的区别，v-once用于只渲染一次，而v-pre是直接跳过编译。

这个指令可能很多人没想到应用场景有那些，其实最常见的用途就是要在页面上显示Vue代码，如果不用v-pre就会被编译。如下所示使用v-pre场景效果。

<template>

  <div>

    <pre v-pre>

      &lt;template&gt;

        &lt;p&gt;{{ message }}&lt;/p&gt;

      &lt;/template&gt;



      &lt;script setup&gt;

      import { ref } from 'vue';



      const message = ref('Hello Vue!');

      &lt;/script&gt;

    </pre>

  </div>

</template>



<script setup>

import { ref } from 'vue';



let message = ref('您好!');

</script>

页面上展示： 代码原始显示不会被编译。

三、v-memo（支持3.2+版本）

作用： 主要用于优化组件的渲染方面性能，能控制达到某个条件才重新当堂组件，否则不重新渲染。v-memo 会缓存 DOM，只有当指定的数据发生变化时才会重新渲染，从而减少渲染次数提升性能。

v-memo 指令实现原理： Vue初始化组件时会识别是否有v-memo标记，如果有就把这部分vnode缓存起来，当数据变化时会对比依赖是否变化，变化再重新渲染。

示例代码： 用v-memo 绑定了arr，那么当arr的值变化才会重新渲染，否则不会重新渲染。

<template>

  <div>

    <ul v-memo="arr">

      <li v-for="(item, index) in arr" :key="index">

        {{ item.text }}

      </li>

    </ul>

  </div>

</template>



<script setup>

import { ref } from 'vue';



let arr = ref([

  { text: '内容1' },

  { text: '内容2' },

  { text: '内容3' }

]);



setInterval(() => {

  arr.value[1].text = '修改2';

}, 2000);

</script>

注意： 用v-memo来指定触发渲染的条件，但只建议在长列表或者说复杂的渲染结构才使用。

小结

总结了几个比较冷门的Vue内置指令，平时用的不多，但用对了地方却能明显提升性能。如果那里写的不对或者有好建议欢迎大佬指出啊。

事情的起因是这样：

有一个小伙伴说自己用某电动车 App，由于种种原因后来注销了账号，注销完成之后，该 App 提示 “您的账户已删除。与您的账户关联的所有个人数据也已永久删除”。当时当他重新打开 App 之后，发现账户名变为了 unknown，邮箱和电话变成了账号的 uid@delete.account.品牌.com。更炸裂的是，这个 App 此时还是可以正常控制电动车，可以查看定位、电量、客服记录、维修记录等等信息。

小伙伴觉得心塞，感觉被这个 App 耍了，明明就没有删除个人信息，却信誓旦旦的说数据已经永久删除了。

其实咱们做后端服务的小伙伴都知道，基本上都是逻辑删除，很少很少有物理删除。

大部分公司可能都是把账号状态标记为删除，然后踢用户下线；有点良心的公司除了将账号状态标记为删除，还会将用户信息脱敏；神操作公司则把账号状态标记为删除，但是忘记踢用户下线。

于是就出现了咱们小伙伴遇到的场景了。

逻辑删除这事，其实不用看代码，就从商业角度稍微分析就知道不可能是物理删除。比如国内很多 App 对新用户都会送各种优惠券、代金券等等，如果物理删除岂不是意味着可以反复薅平台羊毛。

当然这个是各个厂的实际做法，那么这块有没有相关规定呢？松哥专门去查看了一下相关资料。

根据 GB/T 35273 中的解释，我挑两段给大家看下。

首先文档中解释了什么是删除：

去除用户个人信息的行为，使其保持不可被检索、访问的状态。

理论上来说，逻辑删除也能够实现用户信息不可被检索和访问。

再来看关于用户注销账户的规范：

删除个人信息或者匿名化处理。

从这两处解释大家可以看到，平台逻辑删除用户信息从合规上来说没有问题。

甚至可能物理删除了反而有问题。

比如张三注册了一个聊天软件实施诈骗行为，骗到钱了光速注销账号，平台也把张三的信息删除了，最后取证找不到人，在目前这种情况下，平台要不要背锅？如果平台要背锅，那你说平台会不会就真把张三信息给清空了？

对于这个小伙伴的遭遇，其实算是一个系统 BUG，账户注销，应该强制退出登录，退出之后，再想登录肯定就登录不上去了，所以也看不到自己之前的用户信息了。

小伙伴们说说，你们的系统是怎么处理这种场景的呢？