吴星喜的博客

什么是闭包闭包（Closure）是 JavaScript 中一个重要的概念，它是指有权访问另一个函数作用域中变量的函数。更具体地说，闭包是由函数以及创建该函数时的词法环境组合而成的。 简单来说，当一个内部函数被外部引用，并且内部函数可以访问外部函数的变量时，就形成了闭包。 闭包的形成条件要形成闭包，需要满足以下几个条件： 函数嵌套（一个函数内部定义了另一个函数） 内部函数引用了外部函数的变量 外部函数被执行，并且内部函数被返回或传递给其他作用域 内部函数在外部作用域能够被访问 正例：典型的闭包应用示例 1：计数器123456789101112function createCounter() { let count = 0; return function () { count++; return count; };}const counter = createCounter();console.log(counter()); // 1console.log(counter()); // 2cons ...

前言在 Vue3 中，响应式系统是其核心特性之一。Vue3 提供了两种创建响应式数据的主要方式：reactive 和 ref。虽然它们都能实现响应式，但在使用方式、适用场景和底层实现上存在显著差异。本文将深入探讨这两种 API 的区别与原理，帮助开发者更好地理解和使用它们。 如果你对 Vue3 的其他方面也感兴趣，可以看看我们之前的文章，比如 Vue2 VS Vue3 内容全部重构 从各个维度做对比。 什么是 reactive？reactive 是 Vue3 中用于创建响应式对象的 API。它基于 ES6 的 Proxy 实现，可以拦截对象的各种操作（如获取、设置、删除等）。 reactive 的特点 用于创建一个响应式的对象（包括数组和复杂数据结构） 基于 ES6 的 Proxy 实现 只能用于对象类型（Object、Array、Map、Set 等），不能用于基本类型 直接返回一个响应式对象，无需通过 .value 访问 1234567891011121314import { reactive } from "vue";const state ...

前言Vue.js 作为一款流行的前端框架，经历了从 Vue2 到 Vue3 的重大升级。Vue3 不仅仅是一个版本更新，更是一次全面的重构，带来了性能、开发体验和功能上的巨大提升。本文将从多个维度深入对比 Vue2 和 Vue3，帮助开发者更好地理解两者之间的差异和 Vue3 的优势。 1. 响应式原理对比Vue2 的响应式系统Vue2 使用 Object.defineProperty 来实现响应式数据绑定。这个 API 可以劫持对象属性的 getter 和 setter，从而在数据变化时通知视图更新。 123456789101112131415161718192021222324252627282930function defineReactive(obj, key, val) { // 递归处理嵌套对象 observe(val); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get() { ...

前言 当开发多个项目时，每个项目运行环境要求的 node 版本不一样，那么我们就需要给每个项目指定 node 版本，也就是通过终端执行 nvm install 和 nvm use 命令去安装并切换版本。 ​ 但是每次都要在终端手动执行命令就很麻烦，特别是项目越来越多的时候，容易忘记切换版本或切换错版本，会导致项目启动不了或运行中有一些错误。 ​ 这就需要一个管理 node 版本的方法，自动切换 node 版本，这时 .nvmrc 就该上场了 .nvmrc 是什么 .nvmrc 的作用：便于切换 node 版本，保证多人开发环境的一致性 ​ .nvmrc 是一个文件，文件内容非常简单，只有一个 nvm 可识别的 node 版本文本内容，比如: v12.18.2，这个文件应该放在项目根目录下，并且不应被 git 忽略 创建 .nvmrc 文件 打开终端，进入项目根目录执行以下命令，使用 nvm 可识别的版本号格式即可： ​ 以下命令会将字符串填入指向的文件中并创建，当文件存在时，则会对文件进行重写 echo "12.18.2" > .nvm ...

方法一：通过Homebrew安装（推荐） 安装 Homebrew： 如果您还没有安装Homebrew，首先需要安装它。打开终端（Terminal.app）并运行以下命令：（官网地址：https://brew.sh/zh-cn/） 12341.官网提供的链接（没有vpn的话执行不成功）/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"2.国内下载地址/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" ​ 按照步骤安装完成就可以了. 使用Homebrew安装 NVM： 安装完 Homebrew 后，接着使用以下命令来安装 NVM： 打开终端zsh，执行： 1brew install nvm # 执行完成就代表nvm已经安装了，但是还需要配置环境变量 配置环境变量： ...

使用场景​ 当我们成功部署web应用之后，由于页面没有及时刷新，导致数据存在差异 无法体验到最新的功能等问题。 代码实现12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576interface Options { timer?: number}export class Updater { oldScript: string[] // 存储第一次值也就是script 的hash 信息 newScript: string[] // 获取新的值 也就是新的script 的hash信息 dispatch: Record<string, Array<() => void>> // 小型发布订阅通知用户更新了 timer: NodeJS.Timeout | null = null constructor(op ...

话不多说 ，直接开整！ jsdelivr加速地址： 12https://cdn.jsdelivr.net/gh/Github用户名/仓库名@masterhttps://fastly.jsdelivr.net/gh/Github用户名/仓库名@master 注意：这两个地址偶尔不好使，自己看哪个好用用哪个。 创建一个GitHub仓库： ​ 进入你的GitHub首页，在右上角你会找到一个➕，在下拉菜单中选取”New repository”选项 ​ .fxiwohleknvb{} ​ 按需填写相关信息，创建仓库： 获取一个GitHub的token用以picgo的身份验证，在你的GitHub主页，右上角点击你的头像，在展示的抽屉中选择”Settings” 然后把左侧选项框滑到最下面，选择”Developer settings”，再从左侧点击”Personal access token”下拉展开，选择”Tokens(classic)”，然后再点击右上角的”Generate new token”，选择”Generate new token(classic)” 按步骤填写 ...

vue3 中定义的 ref 类型变量，在 setup 中使用这些变量是需要带上.value 才可以访问的，但是在 template 中却可以直接使用。why？你可能会说 vue 自动进行 ref 解包了，那具体是如何实现的的？ proxyRefsvue3 中有个方法 proxyRefs，这属于底层方法，在官方文档中并没有阐述，但是 vue 里是可以导出这个方法！ 例如： 12345678910111213141516<script setup lang="ts">import { onMounted, ref, proxyRefs } from "vue";const user = { name: "James", age: ref(18),};const _user = proxyRefs(user);onMounted(() => { console.log(_user.name); console.log(_user.age); console ...

前提 下载 Node.js 和 NPM。 12node -v npm -v 选一个好的包名。包名必须是 pascal-case 并且全部小写。因为 NPM 上有 700k+ 的包，所以你需要在构建之前先去 www.npmjs.com/ 查询你的包名有没有被使用。在本文中，我取了 irene-awesome-gretter。 基本构建 选择一个合适的名字创建包文件夹。 1mkdir irene-awesome-greeter && cd irene-awesome-greeter 新建 1.gitignore 文件并写入 node_modules，新建 1README 文件。 12echo "node_modules" >> .gitignoreecho "# Irene Awesome Greeter" >> README.md Git 初始化包并关联远程仓库。下面 Git Repository Url 是远程仓库的 Url。 1234git initgit add . && ...

一、什么是pnpmpnpm又称 performant npm，翻译过来就是高性能的npm。 1.节省磁盘空间提高安装效率pnpm通过使用硬链接和符号链接（又称软链接）的方式来避免重复安装以及提高安装效率。 **硬链接**：和原文件共用一个磁盘地址，相当于别名的作用，如果更改其中一个内容，另一个也会跟着改变 符号链接（软链接）：是一个新的文件，指向原文件路径地址，类似于快捷方式 官网原话： 当使用 npm 时，如果你有 100 个项目，并且所有项目都有一个相同的依赖包，那么，你在硬盘上就需要保存 100 份该相同依赖包的副本。然而，如果是使用 pnpm，依赖包将被存放在一个统一的位置，因此： 1.如果你对同一依赖包需要使用不同的版本，则仅有 版本之间不同的文件会被存储起来。例如，如果某个依赖包包含 100 个文件，其发布了一个新 版本，并且新版本中只有一个文件有修改，则pnpm update 只需要添加一个新文件到存储中，而不会因为一个文件的修改而保存依赖包的所有文件。 2.所有文件都保存在硬盘上的统一的位置。当安装软件包时，其包含的所有文件都会硬链接自此位置，而不会占用额外的硬盘空间 ...