首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

Vue3.5新增的baseWatch让watch函数和Vue组件彻底分手

编程知识
2024年08月26日 15:11

前言

Vue 3.5.0-beta.3版本中新增了一个base watch函数,这个函数用法和我们熟知的watch API一模一样。区别就是我们之前用的watch API是和Vue组件以及生命周期是一起实现的,他们是深度绑定的。而Vue3.5新增的base watch函数是一个新的函数,他的实现和Vue组件以及生命周期没有一毛钱关系。

欧阳写了一本开源电子书vue3编译原理揭秘,看完这本书可以让你对vue编译的认知有质的提升。这本书初、中级前端能看懂,完全免费,只求一个star。

@vue/runtime-core

vue3是模块化设计,他将核心功能拆分为多个独立的模块,如下图:
modules

比如reactivity模块中就是响应式的核心代码、runtime-core模块就是运行时相关的核心代码、compiler-core模块就是编译相关的核心代码。

并且这些模块还被单独当作npm包进行发布,命名规则是@vue+模块名。比如reactivity模块对应的npm包就是@vue/reactivity。如下图:
npm

所以如果我们只需要vue的响应式功能,理论上只需要导入@vue/reactivity包即可。比如我之前的文章: 涨见识了!脱离vue项目竟然也可以使用响应式API,在这篇文章中我就介绍了如何脱离Vue项目,在node.js项目中使用vue的响应式API。

但是不知道你有没有注意到,在demo中我是require("vue"),而不是require("@vue/reactivity")

因为watch不是由@vue/reactivity中导出的,而是由@vue/runtime-core中导出的,如果我只引入@vue/reactivity就会报错了。

const { ref, watch, watchEffect } = require("vue");

const count = ref(0);

// 模拟count变量的值修改
setInterval(() => {
  count.value++;
}, 1000);

watch(count, (newVal) => {
  console.log("触发watch", newVal);
});

watchEffect(
  () => {
    console.log("触发watchEffect", count.value);
  },
  {
    flush: "sync",
  }
);

watch的实现是和vue组件以及生命周期深度绑定的,而vue组件以及生命周期明显是和响应式无关的。他们的实现是在runtime-core模块中,而非reactivity模块中,这也就是为什么watch的实现是放在runtime-core模块中。
runtime

据说性能是 Taro 10 倍的小程序框架 vuemini 底层也是依靠@vue/reactivity实现的,但是由于watch是由@vue/runtime-core中提供的,小程序框架却只引入了@vue/reactivity,所以作者不得不手写了一个watch函数。
vue-mini

重构watch函数

智子在写Vue Vapor时又拆了一个新的模块,叫做runtime-vapor。如果你不了解Vue Vapor,可以看看我之前的文章: 没有虚拟DOM版本的vue(Vue Vapor)
vue-vapor

他们遇到一个问题需要在runtime-vapor模块中使用watch函数,而watch函数是位于runtime-core模块中。但是又不应该在runtime-vapor模块中直接引用runtime-core模块,所以Vue Vapor团队的绚香音就将watch函数重构到了reactivity模块中,这样在runtime-vapor模块中直接使用reactivity模块中的watch函数就行了。

这也就是为什么需要重构watch函数到reactivity模块中。

在欧阳的个人看法中watch函数本来就是属于响应式中的一部分,他在runtime-core模块中反而不合理。在欧阳第一次看vue3源码时就在奇怪为什么没有在reactivity模块中找到watch函数的实现,而是在runtime-core模块中实现的。

当watch函数重构到reactivity模块后,小程序框架 vuemini 的作者也发了一篇帖子。
X

watch函数重构到reactivity模块后,小程序框架中手写的watch函数都不需要了,因为reactivity模块已经提供了。

看见完了!这下 Vue Mini 真成 @vue/reactivity 套壳了...这个评论后,对不起!杨明山大佬欧阳确实没忍住笑出了声。

总结

vue3.5版本中,Vue Vapor团队在reactivity模块中重构实现了一个watch函数。重构的这个watch函数和我们现在使用的watch函数用法是一样的,区别在于以前的watch函数的实现和Vue组件以及生命周期是深度绑定的,而重构的watch函数和Vue组件以及生命周期一毛钱关系都没有。

这个改动对于普通开发者可能没什么影响,但是对于下游项目,比如Vue mini来说还是很受益的。因为以前他们需要自己去手写watch函数,现在reactivity提供了后就不需要这些手写的watch函数了。

关注公众号:【前端欧阳】,给自己一个进阶vue的机会

另外欧阳写了一本开源电子书vue3编译原理揭秘,看完这本书可以让你对vue编译的认知有质的提升。这本书初、中级前端能看懂,完全免费,只求一个star。

From:https://www.cnblogs.com/heavenYJJ/p/18378494
本文地址: http://www.shuzixingkong.net/article/1460
0评论
提交 加载更多评论
其他文章 JS脚本批量处理TS数据类型
在TS开发中,经常会遇到后台数据字段比较多的情况,这时候需要一个个复制字段然后给他手动配置数据类型来完成我们的TS类型定义,相当麻烦。有什么快速的方法呢,我就目前遇到的两种情况分别写了JS脚本来处理后台数据,直接生成我们需要的数据格式。 脚本编写 1. 处理数据字典中的数据 一般数据字典表里的数据可
JS脚本批量处理TS数据类型 JS脚本批量处理TS数据类型 JS脚本批量处理TS数据类型
SpringBoot多环境日志配置
SpringBoot多环境日志配置 SpringBoot 默认使用 LogBack 日志系统 默认情况下,SpringBoot项目的日志只会在控制台输入。 如果想查询历史日志则无法找到,我们需要一个日志系统来统一管理日志。 一般正式项目会有单独日志系统,将日志操作存入数据库。 第一种方式是 在 ap
SpringBoot多环境日志配置 SpringBoot多环境日志配置
TwinCAT3 - 实现CiA402
目录1,起缘2,想办法3,开搞3.1,CANOpen通信3.1.1 对象字典3.1.2 通信建立3.2,CiA402伺服状态机3.3,伺服运行3.3.1 操作模式3.3.2 轮廓位置模式3.3.3 轮廓速度模式3.3.4 其他4,用起来 1,起缘 在TwinCAT3项目中涉及到轴运动时,通常做法都是
TwinCAT3 - 实现CiA402 TwinCAT3 - 实现CiA402 TwinCAT3 - 实现CiA402
【故障公告】博客站点遭遇大规模疑似 CC 攻击
在上周五 12:24-14:05 遭遇大规模 DDoS 攻击后,今天11:40左右开始遭遇疑似大规模 CC 攻击,明显的特征是有很多来自海外各个国家IP的异常高频次访问请求。 虽然我们针对海外访问临时采取了躲避措施,但攻击请求不仅限于海外,我们躲不过去。 非常抱歉,这次攻击给大家带来了麻烦,请大家谅
Webpack 5 支持访问 Rust WebAssembly 线性内存
前面在《解决 Rust WebAssembly 启动 Web 程序报错》 一文中讲到,将 Webpack 升级到 5.54.0+。其实问题并未彻底解决,还潜藏另一个问题。当我们像原先那样,通过导出 memory 来访问 WebAssembly 线性内存: import { memory } from
Webpack 5 支持访问 Rust WebAssembly 线性内存
数据库服务器运维最佳实践
本文简要介绍了数据库服务器运维的最佳实践涵盖了多个方面,包括硬件选择、系统配置、性能优化、安全管理、数据备份与恢复、高可用性和灾难恢复等。
学习真DDD的最佳路径
本文书接上回《DDD是软件工程的第一性原理?》,关注公众号(老肖想当外语大佬)获取信息: 最新文章更新; DDD框架源码(.NET、Java双平台); 加群畅聊,建模分析、技术实现交流; 视频和直播在B站。 假DDD的特征 在开始之前,考虑到目前关于DDD的资料非常多且杂,我们需要具备分辨的能力,确
学习真DDD的最佳路径 学习真DDD的最佳路径 学习真DDD的最佳路径
知道泛型擦除会造成多态的冲突吗?
类型擦除会造成多态的冲突,而JVM的解决方法就是泛型的桥接方法。 举例 现在有这样一个泛型类: class Pair<T> { private T value; public T getValue() { return value; } public void setValue(T va