Web前端严选

本文将介绍如何使用Vue3+TS写一个基础项目，有了主要框架概念之后，后续对于应用的开发能更加地得心应手。 3.x版本开始使用函数式编程，因此可以使用链式调用。 规定了数组元素类型是RouteRecordRaw，它可以在定义路由时进行友善地提示。 基本路由定义好后，下面开始写数…

本文将简要介绍一下当前Vue3组合式API的使用方式及意义。 watchEffect对执行过程中用到的响应式状态作为依赖进行跟踪（与2.x中的watch选项类似，但是它不需要把被依赖的数据源和副作用回调分开），并在依赖变更时重新运行该函数。当组件的setup()或者生命周期钩子…

若要拷贝当前obj，可以使用for循环依次复制其键值，也可以使用扩展运算符。 拷贝后的值应与旧值无关，若扔存在关联则是浅拷贝。这里对新值进行修改，旧值也发生了改变，表明在复制obj时，将c属性的对象引用地址也拷贝过去了，造成了新值对旧值的引用地址修改。 通过slice方法将ar…

with用于扩展一个语句的作用域链，但一般情况下不建议使用with语句，因为它可能是引起混淆错误和兼容性问题的根源。在Vue源码中有使用with语句的功能点，因此在这里将简介其功能，以助于阅读框架源码。 with语句可以在不造成性能损失的情況下，减少变量的长度。其造成的附加计算…

Websocket是一个持久化的网络通信协议，可以在单个 TCP 连接上进行全双工通讯，没有了Request和Response的概念，两者地位完全平等，允许服务端主动向客户端发送数据，一旦建立连接，客户端和服务端之间即可实时进行双向数据传输。 它的最大特点就是，服务器可以主动向…

后续的例子中，都需要先通过tsc命令编译文件，然后再通过node命令运行文件来查看运行结果，后面将不再赘述。 一般枚举的使用场景在声明一些固定值的时候，通过枚举从而配置全局变量，便于在开发时引用或者修改。 举例来说，动物是一个类，猫是动物的一个子类，猫有抓老鼠的功能特性，那我们…

Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。 observe这个函数传入一个 obj（需要被追踪变化的对象），通过遍历所有属性的方式对该对象的…

webpack和Link等很多工具和库的核心都是通过Abstract Syntax Tree抽象语法树这个概念来实现对代码的检查、分析等操作的。 通过了解抽象语法树这个概念，你也可以随意编写类似的工具。 一般来说每个js引擎都会有自己的抽象语法树格式，Chrome的v8引擎，F…

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。 我们是不是可以将一个应用划分成若干个子应用，再将子应用打包成一个个的lib呢？当路径切换时加载不同的子应用，这样每个子应用都是独立的，技术栈也就不用再做限制了！从而解决了前端协同开发的问题。 2…

给定两个数组，用一个函数计算出二者交集。 由于同一个数字在两个数组中都可能出现多次，因此需要用哈希表记录每个数字出现的次数。对于同一个数字，其在交集中出现的次数等于该数字在两个数组中出现次数的最小值。 首先遍历第一个数组，并在哈希表中记录第一个数组中的每个数字以及对应出现的次数…