不练剑的温不胜

前言为了方便自己开发做的总结 总结插槽slot匿名插槽 12345678910<!-- 子组件 --><template> <div><slot></slot></div></template><!-- 父使用组件 --> <Dialog> <template v-slot> <div>2132</div> </template></Dialog 具名插槽具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中 12345678910111213141516171819<!-- 子组件 --><div> <slot name="header"></slot> <slot></slot> <slot ...

当执行 npm run dev命令的时候，会去项目的package.json文件对象的scripts对象中去寻找，然后执行对应的命令，比如我们使用vite去构建vue项目。配置文件 12345"scripts": { "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview" } 如上，找到dev后,会去执行vite 命令,但是如果我们直接执行 vite,那么就会报错，所以就可以得到执行vite的时候这边项目做了配置。 其实在执行的时候，这边会在本地的node_modules文件中去寻找vite去执行,如果没有就会去 npm install -g（全局包）中去寻找，如果这里面有，也可以去执行，如果这里也没有，那么就去直接去系统的环境变量中去寻找，但是一般你没配置就没有了，然后就报错，这就是这边执行的全部过 ...

前言前后端分离前端需要数据可以使用Mock,更加方便，故学习vite-plugin-mock 开始 注意:当前是3.0.0版本，目前发现修改mock文件会生成很多个xxx.mjs文件,控制台不停报错，issue,关注是否已经解决 安装 (yarn or npm)12345yarn add mockjs# ornpm i mockjs -S# orpnpm add mockjs and 12345yarn add vite-plugin-mock -D# ornpm i vite-plugin-mock -D# orpnpm add vite-plugin-mock -D 开发环境使用开发环境是使用 Connect 中间件实现的。与生产环境不同，您可以在 Google Chrome 控制台中查看网络请求记录 123456789101112131415//vite.config.ts 配置import { UserConfigExport, ConfigEnv } from 'vite'import vue from '@vitej ...

前言最近一直使用vite去开发vue,故需要记录一些基本配置 resolve.alias这是我最常用的的功能，因为写全相对路径太繁琐，就给常用的路径使用别名 1234567891011// vite.config.jsimport { defineConfig } from 'vite'import path from 'path'export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src') // 路径别名 } }}) 我们也可以使用插件，来自动给 src 和 src 下所有的文件夹定义路径别名： 12345678910111213141516171819// vite.config.jsimport { defineConfig } from 'vite&# ...

前言先来聊聊单线程的Javascript 众所周知，js最初设计是运行在浏览器中的，为了防止多个线程同时操作DOM，带来渲染冲突问题，所以js执行器被设计成单线程。但随着前端技术的发展，js能力远不止如此，当我们遇到需要大量计算的场景时（比如图像处理、视频解码等），js线程往往会被长时间阻塞，甚至造成页面卡顿，影响用户体验。为了解决单线程带来的这一弊端，Web Worker 应运而生。 Web WorkerWeb Worker 是什么Web Worker 是 HTML5 标准的一部分，这一规范定义了一套 API，允许我们在 js 主线程之外开辟新的 Worker 线程，并将一段 js 脚本运行其中，它赋予了开发者利用 js 操作多线程的能力。因为是独立的线程，Worker 线程与 js 主线程能够同时运行，互不阻塞。所以，在我们有大量运算任务时，可以把运算任务交给 Worker 线程去处理，当 Worker 线程计算完成，再把结果返回给 js 主线程。这样，js 主线程只用专注处理业务逻辑，不用耗费过多时间去处理大量复杂计算，从而减少了阻塞时间，也提高了运行效率，页面流畅度和用户体验自 ...

vue2vue3Vue3内置的构建工具是Vite,vite的优势： 冷服务 默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入 HMR 速度快到惊人的 模块热更新（HMR） Rollup打包 它使用 Rollup 打包你的代码，并且它是预配置的 并且支持大部分rollup插件 vite构建1234# npmnpm init vite@latest# yarnyarn create vite vue直接构建这个配置比yarn配置会更详细一点 1npm init vue@latest vite.config.js基本配置123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384import { defineConfig } from "vite& ...

前言对于前端来说，event loop 是一个非常重要的知识点，因为这涉及到代码的执行顺序，如果不了解或者了解的不够，那么逻辑就可能出现纰漏。 event loop 的由来js是单线程的，如果某段程序需要等待一会再执行，后面的程序都会被阻塞，这样也就带来了一些问题。为了解决这个问题，js出现了同步和异步两种任务，两种任务的差异就在于执行的优先级不同。event loop就是对任务的执行顺序做了详细的规范 堆、栈、队列在真正了解event loop 之前我们需要了解堆、栈、队列： 堆（Heap）堆是一种数据结构，是利用完全二叉树维护的一组数据，堆分为两种，一种为最大堆，一种为最小堆节点最大的堆叫做最大堆或大根堆，根节点最小的堆叫做最小堆或小根堆。堆是线性数据结构，相当于一维数组，有唯一后继。 栈（Stack）栈在计算机科学中是限定仅在表尾进行插入或删除操作的线性表。 栈是一种数据结构，它按照**后进先出(LIFO)**的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据。栈是只能在某一端插入和删除的特殊线性表。 队列（Queue）特殊之处在于它只允 ...

虚拟DOM虚拟DOM就是通过JS去生成一个AST抽象语法节点树。AST是使用非常广泛，比如TS转测成JS的时候他也会进行AST转换，还有我们常用的babel插件，用于es6转换es5，也是通过AST进行转换，甚至我们的js通过v8引擎去转换字解码的时候也用到了AST 为什么要使用虚拟DOM在和原生DOM选择中，这在之前的学习尤大的知乎回答的时候就已经有过回答，这是一个性能 VS 可维护性的取舍。首先没有任何框架可以比纯手动的优化 DOM 操作更快,因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作，它的实现必须是普适的。首先，看下面的例子 123456789let div = document.createElement('div')let str = ''for (const key in div) { str += key + ''}console.log(str)//aligntitlelangtranslatedirhiddenaccessKeydraggablespellchec ...

前言为了更方便理解最长递增子序列。所以学习并总结的博客 最长递增子序列原博客地址 一下是个人总结和觉得重要的知识点 子序列：不一定是连续的 字串：一定是连续的 假设一个数组 nums，dp[i] 表示以 nums[i] 这个数结尾的最长递增子序列的长度。 12let nums=[1,4,3,4,2]//db[3]=3;db[4]=2 这个 GIF 展示了算法演进的过程： 根据这个定义，我们的最终结果（子序列的最大长度）应该是 dp 数组中的最大值。 12345int res = 0;for (int i = 0; i < dp.length; i++) { res = Math.max(res, dp[i]);}return res; 那么如何归纳呢 假设我们已经知道了 dp[0..4] 的所有结果，我们如何通过这些已知结果推出 dp[5] 呢? 123let nums=[1,4,3,4,2,3]//db=[1,2,2,3,2] 已知//db[5]=3? nums[5] = 3，既然是递增子序列，我们只要找到前面那些结尾比 3 小的子序列， ...

前言在我日常开发过程总，会编写诸如排序、搜索、查找唯一值、传递参数、交换值等等功能，一些实用和便捷的方法做一个记录 1.找出数组总和、最小值和最大值利用reduce方法实现 1234const array = [5,4,7,8,9,2];array.reduce((a,b) => a+b);//和 35array.reduce((a,b) => a>b?a:b);//最大 9array.reduce((a,b) => a<b?a:b);//最小 2 2.从数组中过滤出虚假值Falsy值喜欢0，undefined，null，false，””，’’可以很容易地通过以下方法省略 123const array = [3, 0, 6, 7, '', false];array.filter(Boolean);// 输出(3) [3, 6, 7] 3.删除重复值1234const array = [5,4,7,8,9,2,7,5];const nonUnique =[... new Set(array)]// orarray.filter(( ...