- 博客(94)
- 收藏
- 关注
RSS订阅原创 【面试题系列Vue06】Vue 单页应用与多页应用的区别
vue中单页应用（SinglePage Web Application，SPA）和多页应用（MultiPage Application，MPA）的区别
2024-08-30 19:56:26
609
原创 antd vue switch组件怎么把值true、false改为uint32类型的1和0
antd vue switch组件怎么把值true、false改为uint32类型的1和0?已知switch组件的checked属性默认是传入true 和 false的，但是有这样的业务情景，既需要使用的是开关，又需要传入的是整数，那么我们应该如何修改呢？这个方法确保 Vue 能够检测到这个属性的变化并触发视图更新。: 这行代码使用三元运算符，根据。: 这行代码使用 Vue 的。: 这个参数表示开关的状态，
2024-08-30 11:58:16
690
原创 【面试题系列Vue05】跟其他人不太一样的 Vue生命周期总结
1). 解析语法生成 AST。 2). 根据 AST 结果，完成 data 数据初始化。 3). 根据 AST 结果和 data 数据绑定情况，生成虚拟 DOM。 4). 将虚拟 DOM 生成真正的 DOM 插入到页面中，此时页面会被渲染。当我们绑定的数据进行更新的时候，又会产生以下这些过程： 5). 框架接收到数据变更的事件，根据数据生成新的虚拟 DOM 树。 6). 比较新旧两棵虚拟 DOM 树，得到差异。7). 把差异应用到真正的 DOM 树上，即根据差异来更新页面内容。 8). 注销实例，清空
2024-08-28 19:56:17
492
原创 【面试题系列Vue04】Vue.js中 $nextTick 原理及作用
nextTick 是典型的将底层 JavaScript 执行原理应用到具体案例中的示例，引入异步更新队列机制的原因∶如果是同步更新，则多次对一个或多个属性赋值，会频繁触发 UI/DOM的渲染，可以减少一些无用渲染。
2024-08-23 19:59:22
398
原创 【面试题系列Vue03】Vue Router 的 $route 和 $router 对象有什么区别？
router 对象是用于控制当前路由状态的方式。$route 对象是获取当前路由信息的方式。理解这些差异有助于在Vue应用中更加精确地控制路由行为，以及更好地管理组件的渲染和数据更新~
2024-08-22 19:48:21
258
原创 【面试题系列Vue02】Vue Router 路由都有哪些模式？各模式之间有什么区别？
Vue Router 路由有三种模式：hash 模式、history 模式和 abstract 模式。⼀般情况下，我们建议使用 history 模式，因为它对 SEO 更加友好、URL 更加规范，并且随着 HTML5 技术的普及，浏览器兼容性也不再是问题。但是在特定场景下，如需要⽀持 IE9 及以下浏览器，或者不方便进行服务端配置时，可以选择使用 hash 模式。而 abstract 模式则适⽤于⼀些特殊的场景，如⾮浏览器环境下的应⽤程序或者只需要使⽤编程式导航的情况。忙里抽空更新一下~
2024-08-19 20:36:47
326
原创 【面试题系列Vue01】Vue 中 computed 和 watch 的区别？分别适⽤于什么场景？
Vue 中 computed 和 watch 区别？分别适⽤于什么场景
2024-08-13 19:51:27
462
原创 vue3 ts vite开发bug记录（类型转换）
报错提示：Uncaught (in promise) TypeError: Invalid attempt to spread non-iterable instance.TableData.value 可能期望的是一个数组或其他可迭代对象，而 moduleInfo 可能不是。如果 moduleInfo 不是一个数组，而 TableData.value 期望的是一个数组，那么将 moduleInfo 转换为数组即可解决。哈哈哈哈哈我又来刷ts基础了 苦笑:(
2024-08-13 19:09:48
439
原创 ts类型定义错误
Type '{ position: string;top:string;left: string;}'is not assignable to typeStyleValue'.ts(2322)runtime-dom.d.ts(334,5):The expected type comes from property 'style' which isdeclared here on type 'HTMLAttributes & ReservedProps & Record
2024-07-23 15:19:01
276
原创 vue3+vite+antv/x6 渲染自定义的节点与节点间连线失败
数据源节点和目标节点都拿到了，创建的边也有实例，也确认了节点位置是在视图范围内的，节点也是可以正常渲染出来。我就在想说不然干脆把画布这块单独抽离出来变成一个组件，再使用render的方式渲染，看看能不能有连线，然鹅不出意料地依然失败了。效果图我就不放了，其实就是两排自定义的节点以及节点和节点之间如果有关联，就要连上线，并且线上有具体数值的内容。这个时候我尝试改了渲染的方式，看起来好像是因为用了render，而不是用template。我改了边数据的遍历方式，终于可以了！尝试了各种办法，终于搞出来了箭头。
2024-07-11 14:56:36
393
原创 vscode提交代码到git操作总是需要输入账号密码
之前每次提交都让我输入个3、4、5、6、7、8遍(╯▔皿▔)╯。ps：可能还会让输入一次用户名和密码也可能不用。我运行以后再也不用输入密码了！执行完之后重启vscode，问题解决。打开终端，cd到项目目录，执行命令。
2024-07-02 16:43:57
393
原创 vue-tsc --noEmit导致打包报TS类型错误
vue-tsc：Vue 官方提供的命令，用于执行 TS 的类型检查。–noEmit：TS 编译器的选项，使用 --noEmit 选项后，编译器仅执行类型检查，而不会生成任何实际的编译输出。所以可以看出了，在打包的时候编译器执行了TS类型检查，所以才报了一堆错，但类型错误最终不会影响项目的正常运行。可以发现在build时，执行了vue-tsc --noEmit && vite build，其中。设置后编译器不会检查库文件中的类型定义是否正确，也不会对库文件的使用进行类型检查。再次打包就非常顺利～
2024-06-26 15:07:02
578
原创 【前端思考】字符串类型的数据，应该存栈内存还是堆内存当中？（可能出乎你的意料）
当我们在JavaScript代码中创建一个字符串时，V8引擎会在堆中为该字符串分配内存空间，并将字符串的内容存储在这个空间中。虽然字符串本身存储在堆中，但是字符串对象的引用（指针）通常存储在栈中。当我们在JavaScript代码中使用字符串的时候，实际上是操作字符串对象的引用。由于内部化的字符串是唯一的，因此比较两个内部化的字符串只需要比较它们的引用，而不需要逐个字符地比较。我们知道，字符串属于基本类型，那按照上面的说法，字符串一定是存储在栈内存当中。中，然后，每当需要相同的字符串时，V8可以直接从。
2024-06-12 10:45:06
224
1
原创 跨域中的OPTIONS请求详解
在正式跨域的请求前，浏览器会根据需要，发起一个“PreFlight”（也就是OPTIONS请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源，或者域），还有是否需要Credentials(认证信息）
2024-05-11 16:52:38
1058
转载 关于a标签【target=‘_blank‘】属性的安全漏洞
关于a标签【target=’_blank’】属性的安全漏洞哈哈哈，看到这个标题一定很奇怪吧？应该不止我一个人不理解为什么有些大型网站的浏览器的a标签不设置调整到空白页面打开吧？好奇心作祟，不死心的去百度了一下。原来：这个属性是有安全缺陷的！！！其实国外的网页操作“心智模型”是没有打开个新的页面的，Jackon Nielsen有篇文章《Avoid Within-Page Links》，里面讲到用户对链接的心智模型应该是这样的：1、点击一个链接应该跳转到一个新的页面；2、点击了一个链接，老的页面不应该
2022-04-02 16:36:00
562
翻译 JavaScript——leetcode算法入门136. 只出现一次的数字【位运算专题】
题目描述给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。说明：你的算法应该具有线性时间复杂度。 你可以不使用额外空间来实现吗？示例 1:输入: [2,2,1]输出: 1示例 2:输入: [4,1,2,1,2]输出: 4代码片/* * @lc app=leetcode.cn id=136 lang=javascript * * [136] 只出现一次的数字 */// @lc code=start/** * @param
2022-04-02 09:17:59
223
翻译 JavaScript——leetcode算法入门190. 颠倒二进制位【位运算专题】
题目描述颠倒给定的 32 位无符号整数的二进制位。提示：请注意，在某些语言（如 Java）中，没有无符号整数类型。在这种情况下，输入和输出都将被指定为有符号整数类型，并且不应影响您的实现，因为无论整数是有符号的还是无符号的，其内部的二进制表示形式都是相同的。在 Java 中，编译器使用二进制补码记法来表示有符号整数。因此，在 示例 2 中，输入表示有符号整数 -3，输出表示有符号整数 -1073741825。示例 1：输入：n = 00000010100101000001111010011100
2022-04-02 09:13:40
199
翻译 JavaScript——leetcode算法入门191. 位1的个数【位运算专题】
题目描述编写一个函数，输入是一个无符号整数（以二进制串的形式），返回其二进制表达式中数字位数为 ‘1’ 的个数（也被称为汉明重量）。提示：请注意，在某些语言（如 Java）中，没有无符号整数类型。在这种情况下，输入和输出都将被指定为有符号整数类型，并且不应影响您的实现，因为无论整数是有符号的还是无符号的，其内部的二进制表示形式都是相同的。在 Java 中，编译器使用二进制补码记法来表示有符号整数。因此，在上面的 示例 3 中，输入表示有符号整数 -3。示例 1：输入：00000000000000
2022-04-02 09:07:56
177
翻译 JavaScript——leetcode算法入门231. 2 的幂【位运算专题】
题目描述给你一个整数 n，请你判断该整数是否是 2 的幂次方。如果是，返回 true ；否则，返回 false 。如果存在一个整数 x 使得 n == 2x ，则认为 n 是 2 的幂次方。示例 1：输入：n = 1输出：true解释：20 = 1示例 2：输入：n = 16输出：true解释：24 = 16示例 3：输入：n = 3输出：false示例 4：输入：n = 4输出：true示例 5：输入：n = 5输出：false代码片//方法一var isPow
2022-04-02 09:01:22
172
翻译 JavaScript——leetcode算法入门19. 删除链表的倒数第 N 个结点【双指针专题】
题目描述给你一个链表，删除链表的倒数第 n 个结点，并且返回链表的头结点。示例 1：输入：head = [1,2,3,4,5], n = 2输出：[1,2,3,5]示例 2：输入：head = [1], n = 1输出：[]示例 3：输入：head = [1,2], n = 1输出：[1]代码片/* * @lc app=leetcode.cn id=19 lang=javascript * * [19] 删除链表的倒数第 N 个结点 */// @lc code=start
2022-03-25 16:32:59
92
翻译 JavaScript——leetcode算法入门876. 链表的中间结点【双指针专题】
题目描述给定一个头结点为 head 的非空单链表，返回链表的中间结点。如果有两个中间结点，则返回第二个中间结点。示例 1：输入：[1,2,3,4,5]输出：此列表中的结点 3 (序列化形式：[3,4,5])返回的结点值为 3 。 (测评系统对该结点序列化表述是 [3,4,5])。注意，我们返回了一个 ListNode 类型的对象 ans，这样：ans.val = 3, ans.next.val = 4, ans.next.next.val = 5, 以及 ans.next.next.next
2022-03-25 16:31:40
218
翻译 JavaScript——leetcode算法入门557. 反转字符串中的单词 III【双指针专题】
题目描述给定一个字符串 s ，你需要反转字符串中每个单词的字符顺序，同时仍保留空格和单词的初始顺序。示例 1：输入：s = “Let’s take LeetCode contest”输出：“s’teL ekat edoCteeL tsetnoc”示例 2:输入： s = “God Ding”输出：“doG gniD”代码片/* * @lc app=leetcode.cn id=557 lang=javascript * * [557] 反转字符串中的单词 III * 解题思路：
2022-03-25 16:29:30
178
翻译 JavaScript——leetcode算法入门344. 反转字符串【双指针专题】
题目描述编写一个函数，其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。不要给另外的数组分配额外的空间，你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。示例 1：输入：s = [“h”,“e”,“l”,“l”,“o”]输出：[“o”,“l”,“l”,“e”,“h”]示例 2：输入：s = [“H”,“a”,“n”,“n”,“a”,“h”]输出：[“h”,“a”,“n”,“n”,“a”,“H”]代码片/* * @lc app=leetcode.cn i
2022-03-25 16:28:25
175
翻译 JavaScript——leetcode算法入门167. 两数之和 II - 输入有序数组【双指针专题】
题目描述给你一个下标从 1 开始的整数数组 numbers ，该数组已按 非递减顺序排列 ，请你从数组中找出满足相加之和等于目标数 target 的两个数。如果设这两个数分别是 numbers[index1] 和 numbers[index2] ，则 1 <= index1 < index2 <= numbers.length 。以长度为 2 的整数数组 [index1, index2] 的形式返回这两个整数的下标 index1 和 index2。你可以假设每个输入 只对应唯一的答
2022-03-25 16:26:26
239
翻译 JavaScript——leetcode算法入门283. 移动零【双指针专题】
题目描述给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序。请注意 ，必须在不复制数组的情况下原地对数组进行操作。示例 1:输入: nums = [0,1,0,3,12]输出: [1,3,12,0,0]示例 2:输入: nums = [0]输出: [0]代码片/* * @lc app=leetcode.cn id=283 lang=javascript * * [283] 移动零 */// @lc code=start/** *
2022-03-25 16:24:03
164
翻译 JavaScript——leetcode算法入门189. 轮转数组【双指针专题】
题目描述给你一个数组，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。示例 1:输入: nums = [1,2,3,4,5,6,7], k = 3输出: [5,6,7,1,2,3,4]解释:向右轮转 1 步: [7,1,2,3,4,5,6]向右轮转 2 步: [6,7,1,2,3,4,5]向右轮转 3 步: [5,6,7,1,2,3,4]示例 2:输入：nums = [-1,-100,3,99], k = 2输出：[3,99,-1,-100]解释:向右轮转 1 步: [99
2022-03-25 16:22:00
313
翻译 JavaScript——leetcode算法入门977. 有序数组的平方【双指针专题】
题目描述给你一个按 非递减顺序 排序的整数数组 nums，返回 每个数字的平方 组成的新数组，要求也按 非递减顺序 排序。示例 1：输入：nums = [-4,-1,0,3,10]输出：[0,1,9,16,100]解释：平方后，数组变为 [16,1,0,9,100]排序后，数组变为 [0,1,9,16,100]示例 2：输入：nums = [-7,-3,2,3,11]输出：[4,9,9,49,121]代码片/* * @lc app=leetcode.cn id=977 lang=ja
2022-03-25 16:09:24
102
原创 关于原创这件事
关于原创大家好，之前我的很多算法文章都是翻译LC大神的解题思路，我本意不是为了获取什么利益和关注，只是希望有一个平台可以把我所掌握的js算法进行一个整理整合，方便我之后的学习和巩固。不过从这本章开始，如果是翻译转载的内容，我都会标注出来，在争取到原创作者同意后发表出来，并附上原创作者的链接。只有那些明确是我自己写的内容，我才会标注原创。至于为什么这么做，想必大家都有了解到，我们这个平台已经被很多人吐槽说是搬运平台。为了大家都有一个比较好的学习环境，我们每个人都要学会保障原创著作权，打击侵权行为
2022-03-21 15:08:34
88
翻译 JavaScript——leetcode算法入门35. 搜索插入位置【二分查找专题】
题目描述给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。示例 1:输入: nums = [1,3,5,6], target = 5输出: 2示例 2:输入: nums = [1,3,5,6], target = 2输出: 1示例 3:输入: nums = [1,3,5,6], target = 7输出: 4示例 4:输入: nums = [1,3,5,6], t
2022-03-21 14:58:51
231
1
翻译 JavaScript——leetcode算法入门278. 第一个错误的版本【二分查找专题】
题目描述你是产品经理，目前正在带领一个团队开发新的产品。不幸的是，你的产品的最新版本没有通过质量检测。由于每个版本都是基于之前的版本开发的，所以错误的版本之后的所有版本都是错的。假设你有 n 个版本 [1, 2, …, n]，你想找出导致之后所有版本出错的第一个错误的版本。你可以通过调用 bool isBadVersion(version) 接口来判断版本号 version 是否在单元测试中出错。实现一个函数来查找第一个错误的版本。你应该尽量减少对调用 API 的次数。示例 1：输入：n = 5,
2022-03-21 14:55:07
110
翻译 JavaScript——leetcode算法入门704. 二分查找【二分查找专题】
题目描述给定一个 n 个元素有序的（升序）整型数组 nums 和一个目标值 target ，写一个函数搜索 nums 中的 target，如果目标值存在返回下标，否则返回 -1。示例 1:输入: nums = [-1,0,3,5,9,12], target = 9输出: 4解释: 9 出现在 nums 中并且下标为 4示例 2:输入: nums = [-1,0,3,5,9,12], target = 2输出: -1解释: 2 不存在 nums 中因此返回 -1代码片/* * @lc
2022-03-21 14:52:49
121
原创 web项目开发【开发中遇到的坑】
web项目开发关于开发一个项目，除了使用的技术以及是否能够实现功能，比这更重要的是在此之前：其实真正到了实际开发中，你就会发现，真正耗时费力的不是需求有多么难，也不是功能无法实现，而是一遍又一遍的因为统一规范的问题改版代码。与团队伙伴复盘的时候发现了这个问题，做了一个小的总结。——————————————————————————————————————1.首先要进行需求分析和技术评审有难度的地方要说明并提前调研，然后输出技术评审文档。2.前后端沟通定义接口和命名规范（需要传递的数据格式以及名称
2022-03-10 16:40:26
396
原创 swiper插件轮播图图片抖动【开发中的bug】
swiper插件轮播图图片抖动家人们，这个真的困扰我好久了。应该是插件的坑。在本地就不会出现这样的bug，一挪到测试环境，好家伙，图片像得了帕金森，恨不得溢出屏幕一样疯狂的抖动。原因：1、轮播图的图片宽高不一致2、调试时浏览器页面缩小解决办法：1、给图片的父元素添加如下代码：.style{ transform: translateZ(0); overflow: hidden; padding-bottom:（图片高/宽）百分比; width:100%; height:0; }
2022-03-04 16:58:35
1367
1
原创 JavaScript——leetcode剑指 Offer 56 - Ⅱ. 数组中数字出现的次数【位运算专题】
题目描述在一个数组 nums 中除一个数字只出现一次之外，其他数字都出现了三次。请找出那个只出现一次的数字。示例 1：输入：nums = [3,4,3,3]输出：4示例 2：输入：nums = [9,1,7,9,7,9,7]输出：1代码片/** * @param {number[]} nums * @return {number} *//** * * 解题思路如下：一个整数是由32个0或者1组成的，我们可以将数组中所有数字的同一个位置的数位相加，如果将出现3次的数字单独拿
2022-03-02 14:48:06
864
原创 JavaScript——leetcode剑指 Offer 56 - I. 数组中数字出现的次数【位运算专题】
题目描述一个整型数组 nums 里除两个数字之外，其他数字都出现了两次。请写程序找出这两个只出现一次的数字。要求时间复杂度是O(n)，空间复杂度是O(1)。示例 1：输入：nums = [4,1,4,6]输出：[1,6] 或 [6,1]示例 2：输入：nums = [1,2,10,4,1,4,3,3]输出：[2,10] 或 [10,2]代码片/** * @param {number[]} nums * @return {number[]} */ var singleNumbers
2022-03-02 14:46:36
450
原创 JavaScript——leetcode剑指 Offer 65. 不用加减乘除做加法【位运算专题】
题目描述写一个函数，求两个整数之和，要求在函数体内不得使用 “+”、“-”、“*”、“/” 四则运算符号。示例:输入: a = 1, b = 1输出: 2代码片/** * @param {number} a * @param {number} b * @return {number} */ var add = function(a, b) { let sum, carry; do { //相加 不考虑进位 sum = a ^ b;
2022-03-02 14:45:38
403
原创 JavaScript——leetcode剑指 Offer 15. 二进制中1的个数【位运算专题】
题目描述编写一个函数，输入是一个无符号整数（以二进制串的形式），返回其二进制表达式中数字位数为 ‘1’ 的个数（也被称为 汉明重量).）。提示：请注意，在某些语言（如 Java）中，没有无符号整数类型。在这种情况下，输入和输出都将被指定为有符号整数类型，并且不应影响您的实现，因为无论整数是有符号的还是无符号的，其内部的二进制表示形式都是相同的。在 Java 中，编译器使用 二进制补码 记法来表示有符号整数。因此，在上面的 示例 3 中，输入表示有符号整数 -3。示例 1：输入：n = 11 (控
2022-03-02 14:44:05
116
原创 JavaScript——leetcode537. 复数乘法
题目描述复数 可以用字符串表示，遵循 “实部+虚部i” 的形式，并满足下述条件：实部 是一个整数，取值范围是 [-100, 100]虚部 也是一个整数，取值范围是 [-100, 100]i2 == -1给你两个字符串表示的复数 num1 和 num2 ，请你遵循复数表示形式，返回表示它们乘积的字符串。示例 1：输入：num1 = “1+1i”, num2 = “1+1i”输出：“0+2i”解释：(1 + i) * (1 + i) = 1 + i2 + 2 * i = 2i ，你需要将它转
2022-02-25 16:24:36
123
原创 JavaScript——leetcode剑指 Offer 55 - II. 平衡二叉树【搜索与回溯算法专题】
题目描述输入一棵二叉树的根节点，判断该树是不是平衡二叉树。如果某二叉树中任意节点的左右子树的深度相差不超过1，那么它就是一棵平衡二叉树。示例 1:给定二叉树 [3,9,20,null,null,15,7]3/ \9 20/ \15 7返回 true 。示例 2:给定二叉树 [1,2,2,3,3,null,null,4,4]1/ \2 2/ \3 3/ \4 4返回 false 。代码片/* * @lc app=leetcode.cn id=
2022-02-25 16:22:43
105
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人