摘要：
壹 ❀ 引 在 JS 开发工作中，遍历数组的操作可谓十分常见了，那么像 for 循环，forEach 此类方法自然也不会陌生，直到遇到了一个有趣的问题，来看一段代码： let arr = [1, 2]; arr.forEach((item, index) => { arr.splice(index, 阅读全文
posted @ 2023-11-17 17:29
柯基与佩奇
阅读(1423)
评论(0)
推荐(0)
摘要：
为什么有人说 vite 快，有人却说 vite 慢 谈到 Vite，给人的第一印象就是 dev server 启动速度快。同样规模的项目，相比 Webpack 动辄十几秒甚至几十秒的的启动速度，Vite 简直是快到没朋友，往往数秒之内即可完成启动 最近在做一些关于开发体验的性能优化，就想着把手上一些 阅读全文
posted @ 2023-11-17 17:27
柯基与佩奇
阅读(100)
评论(0)
推荐(0)
摘要：
什么是环境变量 根据当前的代码环境变化的变量就叫做环境变量。比如，在生产环境和开发环境将 BASE_URL 设置成不同的值，用来请求不同的环境的接口。 环境变量一般可以在全局访问到。在 webapck 中，也许看到过这样的代码 // webpack.config.js module.exports 阅读全文
posted @ 2023-11-17 17:27
柯基与佩奇
阅读(442)
评论(0)
推荐(0)
摘要：
准备 为了方便插件开发，这里就先做简单点，在项目根目录建立build文件夹，里面存放一些自定义的插件。 // # build/test.js export function testPlugin() { return { //插件名字 name: "vite-plugin-test", option 阅读全文
posted @ 2023-11-17 17:26
柯基与佩奇
阅读(131)
评论(0)
推荐(0)
摘要：
前言 最近使用 vite 在写项目时，遇到vue3中给setup添加name的问题，本来是打算直接使用插件进行实现的，但是评论说是会有各种各样的问题，看了下vite插件介绍后，下面来讲解 Vite 插件的基本概念。 Vite 和 Rollup 有了解过 Vite 的都知道，Vite 开发用的 ESB 阅读全文
posted @ 2023-11-17 17:26
柯基与佩奇
阅读(558)
评论(0)
推荐(0)
摘要：
Vite 构建环境分为开发环境和生产环境，不同环境会有不同的构建策略，但不管是哪种环境，Vite 都会首先解析用户配置。那接下来，就与你分析配置解析过程中 Vite 到底做了什么？即 Vite 是如何加载配置文件的。 流程梳理 先来梳理整体的流程，Vite 中的配置解析由 resolveConfig 阅读全文
posted @ 2023-11-17 17:26
柯基与佩奇
阅读(200)
评论(0)
推荐(0)
摘要：
webpack5 已经发布，将主要涉及的新特性及这些特性的使用方法总结了一下。 英文文档地址：webpack 中文文档地址：webpack.docschina github 地址：github 1、内置静态资源构建能力 —— Asset Modules 在 webpack 5 之前，通常使用： ra 阅读全文
posted @ 2023-11-17 17:25
柯基与佩奇
阅读(120)
评论(0)
推荐(0)
摘要：
用过 webpack 的都知道，webpack 的 sourcemap 配置是比较麻烦的，比如这两个配置的区别： eval-nosources-cheap-module-source-map hidden-module-source-map 是不是分不清楚？ 其实它是有规律的。 把配置写错的时候，w 阅读全文
posted @ 2023-11-17 17:25
柯基与佩奇
阅读(118)
评论(0)
推荐(0)
摘要：
Babel 的包构成 核心包 babel-core：babel 转译器本身，提供了 babel 的转译 API，如 babel.transform 等，用于对代码进行转译。像 webpack 的 babel-loader 就是调用这些 API 来完成转译过程的。 babylon：js 的词法解析器 阅读全文
posted @ 2023-11-17 17:25
柯基与佩奇
阅读(110)
评论(0)
推荐(0)
摘要：
一次完整的 webpack 打包大致是这样的过程： 将命令行参数与 webpack 配置文件 合并、解析得到参数对象。 参数对象传给 webpack 执行得到 Compiler 对象。 执行 Compiler 的 run 方法开始编译。每次执行 run 编译都会生成一个 Compilation 对象 阅读全文
posted @ 2023-11-17 17:24
柯基与佩奇
阅读(49)
评论(0)
推荐(0)
摘要：
Webpack 中的静态资源文件指纹 在 webpack 中如何给静态资源加 hash 值：每次构建过程都会生成一个新的 hash，所以一般用于做版本控制；chunkhash 是基于内容生成的，但是 webpack 把所有类型的文件都以 js 为汇聚点打成一个 bundle，改了 css 也会导致整 阅读全文
posted @ 2023-11-17 17:24
柯基与佩奇
阅读(426)
评论(0)
推荐(0)
摘要：
(面试)说一下 webpack 的热更新原理？ webpack 通过 watch 可以监测代码的变化；webpack-dev-middleware 可以调用 webpack 暴露的 API 检测代码变化，并且告诉 webpack 将代码保存到内存中；webpack-dev-middleware 通过 阅读全文
posted @ 2023-11-17 17:24
柯基与佩奇
阅读(56)
评论(0)
推荐(0)
摘要：
All in One 的弊端 通过 Webpack 实现前端项目整体模块化的优势固然明显，但是它也会存在一些弊端：它最终会将所有的代码打包到一起。试想一下，如果应用非常复杂，模块非常多，那么这种 All in One 的方式就会导致打包的结果过大，甚至超过 4 ～ 5M。 在绝大多数的情况下，应用刚 阅读全文
posted @ 2023-11-17 17:23
柯基与佩奇
阅读(310)
评论(0)
推荐(0)
摘要：
前言 前端在做性能优化的时候，其中一种有效的方式就是减少包体积的大小。而减少包体积大小的其中一种有效的方式就是 tree-shaking，翻译成中文就是摇树。这个词非常形象，当果树结果后，如果用力摇树，那些成熟了但是还挂在树上的果子就会掉下来，减轻树的负担，因为果子已经成熟了，没有必要在呆在树上了。 阅读全文
posted @ 2023-11-17 17:23
柯基与佩奇
阅读(147)
评论(0)
推荐(0)
摘要：
动态的引入图片为什么要使用 require 因为动态添加 src 被当做静态资源处理了，没有进行编译，所以要加上 require 乍一看好像说的很有道理啊，但是仔细一看，这句话说的到底是个啥？针对上面的回答，不禁有如下几个疑问： 什么是静态资源？ 为什么动态添加的 src 会被当做的静态的资源？ 没 阅读全文
posted @ 2023-11-17 17:23
柯基与佩奇
阅读(67)
评论(0)
推荐(0)
摘要：
webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 前 阅读全文
posted @ 2023-11-17 17:23
柯基与佩奇
阅读(116)
评论(0)
推荐(0)
摘要：
编写一个loader 在平时自己由零搭建项目时，虽然基础配置都比较熟悉，比如配置 file-loader, url-loader, css-loader 等，配置不难，但究竟是怎么起作用的呢，如何编写一个 Webpack Loader。 loader 通常指打包的方案，即按什么方式来处理打包，打包的 阅读全文
posted @ 2023-11-17 17:22
柯基与佩奇
阅读(44)
评论(0)
推荐(0)
摘要：
vue打包的时候将git提交信息打包进去 在项目根目录下新建一个名为 preBuild.js 的脚本文件，内容如下： const child_process = require("child_process"); const fs = require("fs"); let commitId = ch 阅读全文
posted @ 2023-11-17 17:18
柯基与佩奇
阅读(47)
评论(0)
推荐(0)
摘要：
今天用户反馈使用页面的时候，有时候点击没反应，排查下来，是因为发布版本的时候，用户那边没有加载最新的文导致的，然后根据思路，做了这个自动更新的功能 效果预览 http://demo.webwlx.cn/#/update 实现思路 1. 把当前版本的编译时间，通过环境变量的方式保存起来 打开 vite 阅读全文
posted @ 2023-11-17 17:17
柯基与佩奇
阅读(422)
评论(0)
推荐(0)
摘要：
前言 在公司里我们有很多需要公共组件或者是工具函数工具类，和一些封装的sdk,这样的代码有的核心的不方便发布到外网中，所以这就是我们为什么需要搭建 npm 私有仓库。 verdaccio 是一个非常方便使用和管理的 npm 私有仓库搭建工具，搭建好后设置 npm 源为 verdaccio 服务就可以 阅读全文
posted @ 2023-11-17 17:17
柯基与佩奇
阅读(490)
评论(0)
推荐(0)
摘要：
大致内容如下 通过部署一个简单的项目到 gitlab pages 初步了解 gitlab CI/CD 了解 gitlab CI/CD 基础概念、运行机制等 使用 gitlab 自带 runner 进行自动化部署、使用 ssh 命令操作部署远程服务器 在自己服务器安装 gitlab runner 进行 阅读全文
posted @ 2023-11-17 17:17
柯基与佩奇
阅读(87)
评论(0)
推荐(0)
摘要：
假设你入职了一家小公司，既没有内部自研的 DevOps 平台，也没有专业的运维。需要你自己去搭建多环境 CI/CD 自动化部署，你会怎么做？ 你可能需要综合考虑成本、服务器选择、CI/CD 易用度、可扩展等方面，对于不怎么熟悉 CI/CD 相关的小伙伴来说有点难以选择。 这里先给大家介绍两个可以免费 阅读全文
posted @ 2023-11-17 17:16
柯基与佩奇
阅读(391)
评论(0)
推荐(0)
摘要：
1. 基于【Event Loop】的长列表渲染优化 背景 日志查看、指令展示 等 列表很长，且不能使用分页、触底懒加载的场景 使用 vue+element-ui 表格展示接口返回数据，数据量为万级。 页面内容白屏二十秒左右后显示出数据，期间页面其他功能/按钮无法正常的交互，之后页面滚动、点击等事件也 阅读全文
posted @ 2023-11-17 17:15
柯基与佩奇
阅读(330)
评论(0)
推荐(0)
摘要：
前言 懒加载也就是延迟加载。当访问一个页面的时候，先把 img 元素或是其他元素的背景图片路径替换成一张大小为 1*1px 图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，从而减轻服务器压力，避免用户等待时间过长（一般在网站图片很多的时候使用 阅读全文
posted @ 2023-11-17 17:14
柯基与佩奇
阅读(68)
评论(0)
推荐(0)
摘要：
1. 减少 HTTP 请求 一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。接下来看一个具体的例子帮助理解 HTTP ： 自己找了一个 HTTP 请求，请求的文件大小为 28.4KB。 名词解 阅读全文
posted @ 2023-11-17 17:13
柯基与佩奇
阅读(65)
评论(0)
推荐(0)
摘要：
通过设计模式可以帮助增强代码的可重用性、可扩充性、 可维护性、灵活性好。使用设计模式最终的目的是实现代码的 高内聚 和 低耦合 工厂模式(创建型模式) 先来理解一个概念 —— 构造器模式 开了家动物园，只有两只动物，可能会这样录入系统： const monkey = { name: '悟空'， ag 阅读全文
posted @ 2023-11-17 17:12
柯基与佩奇
阅读(39)
评论(0)
推荐(0)
摘要：
主要介绍面向对象六大原则中的单一职责原则（SRP）、开放封闭原则（OCP）、最少知识原则（LKP）。 设计原则是指导思想，从思想上给指明程序设计的正确方向，是在开发设计过程中应该尽力遵守的准则。而设计模式是实现手段，因此设计模式也应该遵守这些原则，或者说，设计模式就是这些设计原则的一些具体体现。要达 阅读全文
posted @ 2023-11-17 17:12
柯基与佩奇
阅读(55)
评论(0)
推荐(0)
摘要：
微前端qiankun 沙箱与样式隔离的实现原理 js 沙箱 js/css 污染是无法避免的，并且是一个可大可小的问题。就像一颗定时炸弹，不知道什么时候会出问题，排查也麻烦。作为一个基础框架，解决这两个污染非常重要，不能仅凭“规范”开发。 js 沙箱的原理是子项目加载之前，对 window 对象做一个 阅读全文
posted @ 2023-11-17 17:08
柯基与佩奇
阅读(222)
评论(0)
推荐(0)
摘要：
无界微前端方案 微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题，或无法提供支持。本文提供一种基于 iframe 的全新微前端方案，完善的解决了这些核心 阅读全文
posted @ 2023-11-17 17:07
柯基与佩奇
阅读(430)
评论(0)
推荐(0)
摘要：
优缺点分析 iframe 适合的场景 由于 iframe 的一些限制，部分场景并不适合用 iframe，比如像下面这种 iframe 只占据页面中间部分区域，由于父页面已经有一个滚动条了，为了避免出现双滚动条，只能动态计算 iframe 的内容高度赋值给 iframe，使得 iframe 高度完全撑 阅读全文
posted @ 2023-11-17 17:06
柯基与佩奇
阅读(66)
评论(0)
推荐(0)
摘要：
方案设计 在实际业务中，权限系统的设计其实可以做到很复杂，但是为了简单起见只保留一些最基本且核心的模块： 登录模块：权限平台一般需要靠登录获取用户身份，并通过凭证去请求接口，包括注册功能。 系统管理模块：包括用户管理、角色管理、菜单管理（如果菜单是前端控制则可以省略）等功能，是权限系统中的核心部分。 阅读全文
posted @ 2023-11-17 17:05
柯基与佩奇
阅读(152)
评论(0)
推荐(0)
摘要：
从这个有16.2k星星的后台管理系统项目Vue vben admin中看看它是如何做的。 获取权限码 要做权限控制，肯定需要一个code，无论是权限码还是角色码都可以，一般后端会一次性返回，然后全局存储起来就可以了，Vue vben admin是在登录成功以后获取并保存到全局的store中： imp 阅读全文
posted @ 2023-11-17 17:04
柯基与佩奇
阅读(158)
评论(0)
推荐(0)
摘要：
基础概念 在介绍鉴权方法之前，先要了解的是：什么是认证、授权、鉴权、权限控制以及他们之间的关系，有了他们做铺垫，那么才能做到从始至终的了解透彻 ~ 什么是认证？ 认证(Identification) 是指根据声明者所特有的识别信息，确认声明者的身份。 白话文的意思就是：需要用身份证证明自己是自己。 阅读全文
posted @ 2023-11-17 16:29
柯基与佩奇
阅读(503)
评论(0)
推荐(0)
摘要：
前言 如何快速定位线上 bug，是多数开发者都会遇到的难题 web-see 前端监控方案，提供了 前端录屏+定位源码 方式，让 bug 无处藏身 最终效果 在监控后台，通过报错信息列表，可以查看具体报错的源码，以及报错时的录屏回放 效果演示： 录屏记录了用户的所有操作，红色的线代表了鼠标的移动轨迹 阅读全文
posted @ 2023-11-17 16:20
柯基与佩奇
阅读(206)
评论(0)
推荐(0)
摘要：
前言 前端监控是一个很有亮点的项目，各个大厂都有自己的内部实现，没有监控的项目好比是在裸奔 文章分成以下六部分来介绍： 自研监控平台解决了哪些痛点，实现了什么亮点功能？ 相比 sentry 等监控方案，自研监控的优势有哪些？ 前端监控的设计方案、监控的目的 数据的采集方式：错误信息、性能数据、用户行 阅读全文
posted @ 2023-11-17 16:20
柯基与佩奇
阅读(277)
评论(0)
推荐(0)
摘要：
一、Sentry 简介 Sentry 是一套开源的实时异常收集、追踪、监控系统，支持几乎所有的语音和平台。 这套系统由对应各种语言的 SDK 和一套庞大的数据后台服务组成，通过 Sentry SDK 的配置，可以上报错误关联的版本信息、发布环境。同时 Sentry SDK 会自动捕捉异常发生前的相关 阅读全文
posted @ 2023-11-17 16:19
柯基与佩奇
阅读(972)
评论(1)
推荐(0)
摘要：
大致是如下步骤: 根据地址栏输入的地址向 DNS(Domain Name System)查询 IP 通过 IP 向服务器发起 TCP 连接 向服务器发起请求 服务器返回请求内容 浏览器开始解析渲染页面并显示 关闭连接 一.DNS 域名解析的过程是逐级查询的 浏览器缓存: 首先会向浏览器的缓存中读取上 阅读全文
posted @ 2023-11-17 16:18
柯基与佩奇
阅读(89)
评论(0)
推荐(0)
摘要：
浏览器存储 一、Cookieb 什么是 Cookie 及应用场景 Cookie 指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie 是服务端生成，客户端进行维护和存储。通过 cookie,可以让服务器知道请求是来源哪个客户端，就可以进行客户端状态的维护，比如登陆后 阅读全文
posted @ 2023-11-17 16:18
柯基与佩奇
阅读(54)
评论(0)
推荐(0)
摘要：
跨域请求如何携带cookie 学习withCredentials属性； 学习axios配置withCredentials； 学习设置Access-Control-Allow-Origin属性； 学习设置Access-Control-Allow-Credentials属性； 学习解决跨域请求携带源站 阅读全文
posted @ 2023-11-17 16:17
柯基与佩奇
阅读(71)
评论(0)
推荐(0)
摘要：
普通理解 垃圾回收机制有两种方式，一种是引用法，一种是标记法 引用法 就是判断一个对象的引用数，引用数为 0 就回收，引用数大于 0 就不回收。请看以下代码 let obj1 = { name: "柯基", age: 22 }; let obj2 = obj1; let obj3 = obj1; o 阅读全文
posted @ 2023-11-17 16:15
柯基与佩奇
阅读(45)
评论(0)
推荐(0)
摘要：
一：堆和栈 1. 数据的存储方式 栈内存：线性有序存储，容量小，系统分配效率高。（存放原始类型） 堆内存：首先要在堆内存新分配存储区域，之后又要把指针存储到栈内存中，效率相对就要低一些了。 （存放引用类型的值） 2. 为什么一定要分“堆”和“栈”两个存储空间呢？所有数据直接存放在“栈”中不就可以了吗 阅读全文
posted @ 2023-11-17 16:15
柯基与佩奇
阅读(53)
评论(0)
推荐(0)
摘要：
技术关键词 前端：@vue/cli-service+element-ui+axios 后端：node.js+koa 思路分析 拖拽上传 拖拽上传是利用 HTML5 新特性实现拖拽上传，详细用法可阅读 MDN-drag 利用 dragover 事件（当某物被拖动的对象在另一对象容器范围内拖动时触发此事 阅读全文
posted @ 2023-11-17 16:13
柯基与佩奇
阅读(86)
评论(0)
推荐(0)
摘要：
一、 axios 重新发送请求基础版（所有的请求错误，不论是请求超时还是接口请求出错都会进行重试） 以下是一个完整的文件，看懂了的话 axios 重试请求也就基本会了，不会的话直接复制到项目里，也可以直接调用使用。 创建一个 axios 实例，并在实例中设置请求超时时间 timeout、重试请求次数 阅读全文
posted @ 2023-11-17 16:12
柯基与佩奇
阅读(666)
评论(0)
推荐(0)
摘要：
队列有x个之后执行 正文 在网上看到这么一道题： 首先来实现一个分割数组的函数~ const group = (list = [], max = 0) => { if (!list.length) { return list; } let results = []; for (let i = 0, 阅读全文
posted @ 2023-11-17 16:12
柯基与佩奇
阅读(233)
评论(0)
推荐(0)
摘要：
1.ajax:是指一种创建交互式网页应用的网页开发技术，并且可以做到无需重新加载整个网页的情况下，能够更新部分网页，也叫作局部更新 优缺点： 1）局部更新 2）原生支持，不需要任何插件 3）原生支持，不需要任何插件 4）可能破坏浏览器后退功能 5）嵌套回调，难以处理 2.axios:是一个基于 pr 阅读全文
posted @ 2023-11-17 16:10
柯基与佩奇
阅读(38)
评论(0)
推荐(0)
摘要：
目录需求实现问题解决注意事项： 需求 当 token 过期的时候，刷新 token,前端需要做到无感刷新 token,即刷 token 时要做到用户无感知，避免频繁登录。实现思路 方法一 后端返回过期时间，前端判断 token 过期时间,去调用刷新 token 接口 缺点：需要后端额外提供一个 to 阅读全文
posted @ 2023-11-17 16:10
柯基与佩奇
阅读(115)
评论(0)
推荐(0)
摘要：
我看了很多 axios 的封装，但是我感觉他们的封装。也不够自由，主要是写完之后，如果以后有东西需要修改的时候，还要回去拦截器进行修改。但是有一些东西拦截器可能是你以后的业务需求才需要添加的。 我就在想我能不能拦截器做成插件式的模式进行动态配置呢？例如下面的效果，点击添加一个请求缓存器，请求的时候就 阅读全文
posted @ 2023-11-17 16:10
柯基与佩奇
阅读(101)
评论(0)
推荐(0)
摘要：
从源码解析axios拦截器是如何工作的 axios 拦截器的配置方式 axios 中有两种拦截器： axios.interceptors.request.use(onFulfilled, onRejected, options)：配置请求拦截器。 onFulfilled 方法在发送请求前执行，接收 阅读全文
posted @ 2023-11-17 16:09
柯基与佩奇
阅读(220)
评论(0)
推荐(0)
摘要：
实现原理（简单文字） slot 又名插槽，是 Vue 的内容分发机制，组件内部的模板引擎使用 slot 元素作为承载分发内容的出口。插槽 slot 是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot 又分三类，默认插槽，具名插槽和作用域插槽 实现原理：当子组 阅读全文
posted @ 2023-11-17 16:07
柯基与佩奇
阅读(256)
评论(0)
推荐(0)
摘要：
Vue3 的 Provide / Inject 的实现原理其实就是巧妙利用了原型和原型链来实现的，所以在了解 Vue3 的 Provide / Inject 的实现原理之前，先复习一下原型和原型链的知识。 原型和原型链的知识回顾 prototype 与 __proto__ prototype 一般称 阅读全文
posted @ 2023-11-17 16:06
柯基与佩奇
阅读(134)
评论(0)
推荐(0)
摘要：
什么是模板引用 ref ？ 有时候可以使用 ref attribute 为子组件或 HTML 元素指定引用 ID。 <template> <input ref="input" /> </template> <script> import { defineComponent, ref } from " 阅读全文
posted @ 2023-11-17 16:06
柯基与佩奇
阅读(213)
评论(0)
推荐(0)
摘要：
所谓 watch，就是观测一个响应式数据或者监测一个副作用函数里面的响应式数据，当数据发生变化的时候通知并执行相应的回调函数。 Vue3 最新的 watch 实现是通过最底层的响应式类 ReactiveEffect 的实例化一个 reactive effect 对象来实现的。它的创建过程跟 effe 阅读全文
posted @ 2023-11-17 16:06
柯基与佩奇
阅读(321)
评论(0)
推荐(0)
摘要：
前言 技术栈是 Vue 的人，在面试中难免会被问到 Vue2 和 Vue3 的相关知识点的实现原理和比较，面试官是步步紧逼，一环扣一环。 Vue2 的响应式原理是怎么样的？ Vue3 的响应式原理又是怎么样的？ Vue2 中是怎么监测数组的变化的？ Vue3 中又是怎么监测数组的变化的？ 在问完 V 阅读全文
posted @ 2023-11-17 16:05
柯基与佩奇
阅读(153)
评论(0)
推荐(0)
摘要：
Vue.js 内部将 DOM 节点抽象成了一个个的 VNode 节点，keep-alive 组件的缓存也是基于 VNode 节点的而不是直接存储 DOM 结构。它将满足条件（pruneCache 与 pruneCache）的组件在 cache 对象中缓存起来，在需要重新渲染的时候再将 vnode 节 阅读全文
posted @ 2023-11-17 16:05
柯基与佩奇
阅读(217)
评论(0)
推荐(0)
摘要：
作用：vue 更新 DOM 是异步更新的，数据变化，DOM 的更新不会马上完成，nextTick 的回调是在下次 DOM 更新循环结束之后执行的延迟回调。 实现原理：nextTick 主要使用了宏任务和微任务。根据执行环境分别尝试采用 Promise：可以将函数延迟到当前函数调用栈最末端 Mutat 阅读全文
posted @ 2023-11-17 16:04
柯基与佩奇
阅读(306)
评论(0)
推荐(0)
摘要：
给对应和数组本身都增加了 dep 属性 当给对象新增不存在的属性则触发对象依赖的 watcher 去更新 当修改数组索引时，调用数组本身的 splice 去更新数组（数组的响应式原理就是重新了 splice 等方法，调用 splice 就会触发视图更新） splice(); push(); pop( 阅读全文
posted @ 2023-11-17 16:04
柯基与佩奇
阅读(97)
评论(0)
推荐(0)
摘要：
何为 scoped 在 vue 文件中的 style 标签上，有一个特殊的属性：scoped。当一个 style 标签拥有 scoped 属性时，它的 CSS 样式就只能做用于当前的组件，也就是说，该样式只能适用于当前组件元素。经过该属性，可使得组件之间的样式不互相污染。若是一个项目中的全部 sty 阅读全文
posted @ 2023-11-17 16:04
柯基与佩奇
阅读(156)
评论(0)
推荐(0)
摘要：
方式一：布尔模式 方法一：直接传参 路由配置： { path: '/user/:id/:price', name: 'User', component: User, props: true } 页面 A <template> <div> <router-link :to="{ name: 'User 阅读全文
posted @ 2023-11-17 16:01
柯基与佩奇
阅读(71)
评论(0)
推荐(0)
摘要：
实现一个插件:声明 Store 类，挂载$store Store 具体实现: 创建响应式的 state，保存 mutations、actions 和 getters 实现 commit 根据用户传入 type 执行对应 mutation 实现 dispatch 根据用户传入 type 执行对应 ac 阅读全文
posted @ 2023-11-17 15:59
柯基与佩奇
阅读(20)
评论(0)
推荐(0)
摘要：
Pinia 优势 Pinia.js 是新一代的状态管理器，由 Vue.js 团队中成员所开发的，因此也被认为是下一代的 Vuex，即 Vuex5.x，在 Vue3.0 的项目中使用也是备受推崇。 Pinia.js 有如下特点： 完整的 typescript 的支持； 足够轻量，压缩后的体积只有 1. 阅读全文
posted @ 2023-11-17 15:58
柯基与佩奇
阅读(53)
评论(0)
推荐(0)
摘要：
相同点 state 共享数据 流程一致：定义全局 state，触发，修改 state 原理相似，通过全局注入 store。 不同点 vuex 定义了 state、getter、mutation、action 四个对象；redux 定义了 state、reducer、action。 vuex 触发方式 阅读全文
posted @ 2023-11-17 15:58
柯基与佩奇
阅读(61)
评论(0)
推荐(0)
摘要：
什么是 Vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件.它采用集中式存储管理应用的所有组件的状态,而更改状态的唯一方法是提交 mutation.例 , this.$store.commit('SET_VIDEO_PAUSE', video_pause); SET_VIDE 阅读全文
posted @ 2023-11-17 15:58
柯基与佩奇
阅读(74)
评论(0)
推荐(0)
摘要：
ref 和 reactive 是 Vue3 中用来实现数据响应式的 API 一般情况下，ref 定义基本数据类型，reactive 定义引用数据类型（喜欢用它来定义对象，不用它定义数组，原因后面讲） 理解的 ref 本质上是 reactive 的再封装 ref： 通过 Object.definePr 阅读全文
posted @ 2023-11-17 15:56
柯基与佩奇
阅读(211)
评论(0)
推荐(0)
摘要：
VUE3+VITE+TS 项目中的要点 使用 vue3+vite+ts 构建项目基础框架，配置代码运行环境,对项目进行模块化划分,并集成 element 组件库、axios 请求库； 利用 axios 拦截器实现了权限校验,对系统的登入权限进行控制,避免了无效请求； 利用 vue-router 路由 阅读全文
posted @ 2023-11-17 15:55
柯基与佩奇
阅读(229)
评论(0)
推荐(0)
摘要：
什么是插槽 简单来说就是子组件中的提供给父组件使用的一个坑位，用 表示，父组件可以在这个坑位中填充任何模板代码然后子组件中就会被替换成这些内容。比如一个最简单插槽例子 <!-- 父组件 --> <template> <div> <Child>Hello Juejin</Child> </div> < 阅读全文
posted @ 2023-11-17 15:54
柯基与佩奇
阅读(71)
评论(0)
推荐(0)
摘要：
这样的场景：渲染列表数据的时候，列表的子项还是列表。如果层级少尚且可以用几个 for 循环搞定，但是层级多或者层级不确定就有点无从下手了。 其实这就是树形结构数据，像常见的组织架构图，文件夹目录，导航菜单等都属于这种结构。很多组件库都带有树形组件，但往往样式不是想要的，改起来也非常的费劲。那么，如何 阅读全文
posted @ 2023-11-17 15:54
柯基与佩奇
阅读(79)
评论(0)
推荐(0)
摘要：
面试题：created 生命周期中两次修改数据，会触发几次页面更新？ 一、同步的 先举个简单的同步的例子： new Vue({ el: "#app", template: `<div> <div>{{count}}</div> </div>`, data() { return { count: 1, 阅读全文
posted @ 2023-11-17 15:53
柯基与佩奇
阅读(37)
评论(0)
推荐(0)
摘要：
总结 Vue 的初始化过程（new Vue(options)）都做了什么？ 处理组件配置项 初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上 初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率 初始化组件 阅读全文
posted @ 2023-11-17 15:52
柯基与佩奇
阅读(96)
评论(0)
推荐(0)
摘要：
首先看源码 //即将要被劫持的数组 let arr = [1, 2, 3]; //先把要劫持的方法列出来 let methods = ["push", "pop", "shift", "unshift", "reverse", "sort", "splice"]; //既然要劫持原型，就要先把原型拿 阅读全文
posted @ 2023-11-17 15:52
柯基与佩奇
阅读(71)
评论(0)
推荐(0)
摘要：
总结 关于 vue 中 created 和 watch 的执行顺序相对比较简单，而其中 computed 是通过 Object.defineProperty 为当前 vm 进行定义，再到后续创建 vNode 阶段才去触发执行其 get 函数，最终执行到计算属性 computed 对应的逻辑。 官网的 阅读全文
posted @ 2023-11-17 15:49
柯基与佩奇
阅读(161)
评论(0)
推荐(0)
摘要：
7.1 Vuex 初始化 这一节主要来分析 Vuex 的初始化过程，它包括安装、Store 实例化过程 2 个方面。 安装 当在代码中通过 import Vuex from 'vuex' 的时候，实际上引用的是一个对象，它的定义在 src/index.js 中： export default { S 阅读全文
posted @ 2023-11-17 15:45
柯基与佩奇
阅读(49)
评论(0)
推荐(0)
摘要：
6.1 路由注册 Vue 从它的设计上就是一个渐进式 JavaScript 框架，它本身的核心是解决视图渲染的问题，其它的能力就通过插件的方式来解决。Vue-Router 就是官方维护的路由插件，在介绍它的注册实现之前，先来分析一下 Vue 通用的插件注册原理。 Vue.use Vue 提供了 Vu 阅读全文
posted @ 2023-11-17 15:44
柯基与佩奇
阅读(43)
评论(0)
推荐(0)
摘要：
5.1 event 平时开发工作中，处理组件间的通讯，原生的交互，都离不开事件。对于一个组件元素，不仅仅可以绑定原生的 DOM 事件，还可以绑定自定义事件，非常灵活和方便。那么接下来从源码角度来看看它的实现原理。 为了更加直观，通过一个例子来分析它的实现： let Child = { templat 阅读全文
posted @ 2023-11-17 15:42
柯基与佩奇
阅读(28)
评论(0)
推荐(0)
摘要：
4.1 响应式对象 Object.defineProperty Object.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象，先来看一下它的语法： Object.defineProperty(obj, prop, descriptor 阅读全文
posted @ 2023-11-17 15:40
柯基与佩奇
阅读(108)
评论(0)
推荐(0)
摘要：
3.1 createComponent 在分析 createElement 的实现的时候，它最终会调用 _createElement 方法，其中有一段逻辑是对参数 tag 的判断，如果是一个普通的 html 标签，上一章的例子那样是一个普通的 div，则会实例化一个普通 VNode 节点，否则通过 阅读全文
posted @ 2023-11-17 15:37
柯基与佩奇
阅读(47)
评论(0)
推荐(0)
摘要：
2.1 new Vue 发生了什么 从入口代码开始分析，先来分析 new Vue 背后发生了哪些事情。new 关键字在 Javascript 语言中代表实例化是一个对象，而 Vue 实际上是一个类，类在 Javascript 中是用 Function 来实现的，来看一下源码，在 src/core/i 阅读全文
posted @ 2023-11-17 15:34
柯基与佩奇
阅读(32)
评论(0)
推荐(0)
摘要：
1.1 认识 Flow Flow 是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查，所以了解 Flow 有助于阅读源码。 为什么用 Flow JavaScript 是动态类型语言，它的灵活性有目共睹，但是过于灵活的副作用是很 阅读全文
posted @ 2023-11-17 15:30
柯基与佩奇
阅读(47)
评论(0)
推荐(0)
浙公网安备 33010602011771号