三月的一天-CSDN博客

原创 vue源码解析——diff算法/双端比对/patchFlag/最长递增子序列

虚拟dom——virtual dom，提供一种简单js对象去代替复杂的 dom 对象，从而优化 dom 操作。virtual dom 是“解决过多的操作 dom 影响性能”的一种解决方案。virtual dom 很多时候都不是最优的操作，但它具有普适性，在效率、可维护性之间达到平衡。diff 算法是一种优化手段，将前后两个模块进行差异化比较，修补(更新)差异的过程叫做 patch，也叫打补丁。只有当新旧子节点的类型都是多个子节点时，核心 Diff 算法才派得上用场。diff的目的是时间换空间：尽可能通

2024-04-14 21:39:10 955

原创 vue源码解析——v-if和v-for哪个优先级高，如何避免两者同时使用

官方不推荐v-if和v-for在同一个元素上使用。其次，如果两者同时使用，v-if和v-for的优先级怎么确定？在vue2和vue3中这两者的优先级顺序不一样。vue2是v-for优先，条件不存在时也会渲染多个注释节点。在vue3中进行了改进，v-if优先级高。在vue3中，v-if在编译阶段进行了静态节点提升，所以在v-for遍历每个节点，v-if对单个节点判断，这种情况会报错。不管是vue2还是vue3，都推荐，将v-for遍历的数组用计算属性改写，根据v-if依赖的条件返回过滤后的数组。

2024-04-10 12:33:45 882

原创 javaScript手写专题——实现instanceof/call/apply/bind/new的过程/继承方式

手写实现函数的三种调用方式：call、apply 和 bind；手写new的过程；手写类的继承包括原型链继承、构造函数继承和组合继承

2024-04-08 21:10:03 1449

原创 javaScript手写专题——防抖/节流/闭包/Promise/深浅拷贝

本文介绍了面试中常见的手写JS场景题目：如手写防抖、节流；手写Promise封装、手写深拷贝浅拷。手写深拷贝需要考虑很多细节，需要根据具体情况来进行处理。在前面的实现中，我们已经考虑了一些常见的情况，但是还有很多其他的情况需要考虑。在手写深拷贝时，需要考虑以下几种场景：特殊的对象：正则表达式、日期对象、Error 对象，使用构造函数创建新的对象Fuction对象：对象可能会有函数属性，例如构造函数或方法，这种情况下需要将函数原样复制过来，而不是执行函数。特殊类型：symbol迭代复制：Map

2024-04-07 15:57:31 933

原创 vue2/vue3手写专题——实现双向绑定/响应式拦截/虚拟DOM/依赖收集

手写双向绑定，真实DOM转虚拟DOM，虚拟DOM渲染为真实DOM，vue2响应式和vue3响应式简单实现，vue2的依赖收集实现。

2024-04-06 20:51:26 1011

原创 vue2/vue3手写专题——实现父子组件通信、祖先通信的方法

Vue 组件通信可以使用以下几种方法：父组件向子组件传递数据：使用 props 将数据从父组件传递给子组件，子组件可以通过 props 接收和使用数据。子组件向父组件传递数据：使用 $emit 触发自定义事件，父组件可以通过事件监听器来接收数据。非父子组件之间的通信：使用一个中央事件总线或 Vuex 状态管理库来管理和共享数据。通过 provide 和 inject 传递数据：在父组件中使用 provide 提供数据，在子组件中使用 inject 注入数据，可以实现

2024-04-06 18:42:47 610 1

原创 vue2源码解析——vue中如何进行依赖收集、响应式原理

vue每个组件实例vm都有一个渲染watcher。每个响应式对象的属性key都有一个dep对象。所谓的依赖收集，就是让每个属性记住它依赖的watcher。但是属性可能用在多个模板里，所以，一个属性可能对应多个watcher。因此，在vue2中，属性要通过dep对象管理属性依赖的watcher。在初始化时编译器生成render函数，此时触发属性的依赖收集dep.depend。组件挂载完成后，操作页面，当数据变化后，对应的响应时对象会调用dep.notify方法通知自己对应的watcher更新。

2024-04-03 22:22:22 1007

原创 vue2源码解析——new Vue()这个过程究竟做了什么？

new Vue() 是 Vue.js 框架中用于创建根 Vue 实例的语法。当我们使用 Vue.js 构建一个单页面应用时，通常会先创建一个根 Vue 实例，然后在该实例中定义应用的数据、方法、计算属性等，以及挂载根组件。具体来说，new Vue() 的作用是：创建一个 Vue 实例，该实例代表整个 Vue 应用的根实例。通过传入的选项对象来配置该 Vue 实例，包括数据、计算属性、方法、生命周期钩子函数等。将该 Vue 实例挂载到一个真实的 DOM 元素上，使得应用

2024-04-02 21:13:11 740 1

原创 vue源码解析——vue如何将template转换为render函数

Vue 将模板（template）转换为渲染函数（render function）是 Vue 编译器的核心功能，它是 Vue 实现响应式和虚拟 DOM 的关键步骤。在 Vue 中，模板（template）是开发者编写的类似 HTML 的代码，用于描述页面的结构和交互逻辑。渲染函数（render function）是 Vue 编译器将模板转换为JavaScript 函数，用于生成虚拟 DOM，并最终渲染到页面上。vue模板渲染是个很复杂的过程，牵扯vue的响应式和虚拟dom。

2024-04-02 14:13:43 1104

原创 vue3源码解析——watch和watchEffect区别

在这部分源码分析中，用了很长的篇幅取介绍doWatch的实现，因为watch和watchEffect都调用了doWatch，只是第二个参数不同，watchEffect传入的是null，watch传入的是cb。doWatch干了什么事情呢？首先由要收集数据依赖，收集的是哪写属性呢？source传入的可能是ref\reactive属性、数组或者函数，这个时候需要对source进行计算，看最终依赖的是什么东西？通过定义一个getter函数，根据source类型不同，得到监听数据最后的执行结果。怎么收集数据依赖呢。

2024-03-31 14:02:06 768

原创 vue3源码解析——ref和reactive定义响应式的区别

ref 和 reactive 是 Vue 3.0 中用于定义响应式数据的两个新 API。它们有以下区别：ref 定义单个响应式数据数据类型可以是任意类型。它通常用于定义原始数据类型为响应式数据。返回一个响应式对象，该对象包含一个 .value 属性，可用于获取和设置数据。底层采用Object.defineProperty()实现reactive 定义多个响应式数据数据类型必须是对象返回一个响应式对象，必须使用响应式对象来获取属性和设置数据

2024-03-29 23:39:09 1141

原创 vue源码解析—— watch/computed的实现逻辑和区别

watch和computed是 Vue 中的两个重要的响应式属性，它们在实现机制和使用上存在一些区别。watchdeepimmediatecomputedgetsetVue 2 中，使用来实现数据响应式，并且在数据变化时通过getter函数来依赖收集和发布订阅。在 Vue 3 中，使用Proxy来实现数据响应式，并且在数据变化时通过get函数来依赖收集和发布订阅。这也导致了在源码实现上vue2和vue3的不同。

2024-03-29 15:43:35 1032

原创 vue源码解析——v-if和v-show各自是如何实现的元素的隐藏

在Vue.js中，v-if和v-show是常用的指令，用于控制元素的显示和隐藏。虽然它们都可以隐藏元素，但实现的方式略有不同。在这篇博客中，我们将深入探讨v-if和v-show各自是如何实现元素的隐藏的。

2024-03-29 10:51:24 602

原创 vue2源码解析——Vue.set/$set方法如何给响应式对象添加属性

在Vue 2中需要向响应式对象添加新属性时，可以使用Vue.set或$set方法来实现。这两个方法的作用是向响应式对象添加属性并确保这个新属性也是响应式的。vue.set方法首先会区分是对数组还是对象进行新增属性。，利用vue2改写后的splice方法进行元素插入（此时$set是向数组里新增一个元素）。对象本身没有这个key。考虑对象是否为响应式对象。如果是响应式对象，调用defineReactive给当前对象的key增加响应式依赖。对象不是响应式的，直接给对象加属性，不用考虑响应式问题。

2024-03-28 19:04:41 497

原创 leetcode刷题（javaScript）——回溯、递归、dfs相关场景题总结

递归通常用于解决可以被分解为相同问题的子问题的情况，通过不断调用自身来解决问题。当涉及到回溯、递归、深度优先搜索（DFS）相关的场景题时，通常可以将它们放在一起综合考虑，因为它们之间有一定的联系和相互影响。以下是一些相关的LeetCode场景题以及解题技

2024-03-24 10:24:29 560

原创 leetcode刷题（javaScript）——BFS广度优先遍历相关场景题总结

广度优先搜索（BFS）在JavaScript编程中有许多实际应用场景，特别是在解决图、树等数据结构相关问题时非常常见。在JavaScript中，可以使用队列来实现广度优先搜索算法。通过将起始节点加入队列，然后迭代地将节点的邻居节点加入队列，直到队列为空为止。这样可以逐层地遍历图或树结构，找到目标节点或满足条件的节点。在实际编程中，需要注意避免重复访问节点、处理环路等问题，确保算法的正确性和效率。上题：可以按照博主的列的题目顺序依次练习，二叉树的简单，图论的难，但是做题技巧比较固定。

2024-03-21 18:26:50 620

原创 javaScript——BFS结合队列求迷宫最短路径

思路：采用广度优先搜索的方式，尝试让某个点朝四个方向各走一步，如果都能走通，将这些路径和步长入队。假设由两个点分别向下、向右走一步都到了终点，并且两者的step相等，那么，先遍历的也就是向下的这个路径作为目标输出。问题描述：由m*n的矩阵构成了一个迷宫，矩阵中为1的元素表示障碍物，不能走，为0表示可以走。从第一个点开始，将它shift出去，然后尝试向四周走一步，如果走的通，将那个节点和路径信息入队，依次遍历所有方向。数组中每项存储的是当前遍历的节点座标，走到该节点的步长，节点携带的路径数组。

2024-03-20 16:16:00 339

原创 fixed定位既然相对于屏幕视口定位，为什么在滚动时不生效

当你设置一个元素为fixed定位时，它的位置会相对于浏览器窗口的可视区域进行计算。因此，无论页面如何滚动，该元素都会保持在固定的位置上，不会随滚动而移动。fixed定位是一种CSS属性，用于将元素相对于浏览器窗口进行定位，而不是相对于其父元素。它会使元素固定在屏幕上的某个位置，不会随页面滚动而改变位置。示例，给搜索框固定在网页上方，但是在鼠标向下滚动时，搜索框会消失。这是内容区域的z-index比搜索框默认的z-index大。给搜索框坐在样式加上较大的z-index即可。

2024-03-19 17:28:23 276

原创 leetcode刷题（javaScript）——动态规划相关场景题总结

动态规划在 JavaScript 刷题中有一定的难度，但也是非常常见和重要的算法思想。动态规划通常适用于需要求解最优解、最大值、最小值等问题的场景，可以将复杂问题拆分成子问题，通过存储子问题的解来避免重复计算，从而提高效率。理解问题的状态转移方程：动态规划的核心是找到问题的状态转移方程，即如何从子问题的解推导出更大规模问题的解。理解问题的状态转移方程是解决动态规划问题的关键。定义合适的状态数组：在解决动态规划问题时，通常需要定义一个状态数组来存储子问题的解。确保状态数组的定义清晰

2024-03-18 17:52:31 1002

原创 leetcode刷题（javaScript）——分治思想（二分查找、快速排序）相关场景题总结

分治思想是一种将问题分解成更小的子问题，然后解决子问题并将结果合并的算法设计策略。二分查找、快速排序和折半查找都属于分治思想的经典算法。在leetcode里，分治思想一般结合其他场景出现，构成复合型题目。但是在看题时一定要了解能否用分治思想去解决题目，避免使用复杂度过高的暴力解决方式；尤其是看到强调时间复杂度为O(logn)实现，那很可能是二分法了。在实现这些分治算法时，通常会遵循以下逻辑：分解（Divide）：将原始问题分解成更小的子问题。

2024-03-13 23:00:16 1026

原创 leetcode刷题（javaScript）——堆相关场景题总结

堆是什么？堆都能用树表示，并且一般树的实现都是利用链表。平时使用的最多的是二叉堆，它可以用完全二叉树表示，二叉堆易于存储，并且便于索引。在堆的实现时注意：因为是数组，所以父子节点的关系就不需要特殊的结构去维护了，索引之前通过计算就可以得到，省掉了很多麻烦，如果是链表结构，就会复杂很多。在JavaScript刷题中，堆（Heap）通常用于解决一些需要高效处理优先级的问题，例如找出最大或最小的K个元素、实现优先队列等。：通过维护一个大小为K的最大堆或最小堆，可以快速找出数组中最大或最小的K个元素。

2024-03-13 14:58:47 913

原创图解js原型、原型链、构造函数直接的关系（简单易懂）

对象的原型：对象通过.__proto__找到对象的原型构造函数的原型：构造函数.prototype每个原型都有自己的原型：如Person.prototype.__proto__指向Object的原型js中所有的对象都继承自Object；Object的原型指向为null到此，一个由__proto__指针串起来的原型链就产生了。这里你可以将__proto__理解为链表中的next指针，通过__proto__向上找到对象或构造函数的原型，链表的最后节点是Object，它的__proto__是null。

2024-03-12 15:45:03 932

原创深入理解 CSS——CSS进阶与实践（5w字高频面试题整理）

本文总结了CSS高频面试题，并搭配了演示动画进行CSS样式演示。介绍了关于如何理解盒模型，如何实现块级元素水平居中，如何实现两侧固定中间自适应的三栏布局、如何实现两栏布局，如何进行响应式设计，对BFC的理解，flex布局和grid布局的适配场景，如何获取奇数节点/偶数节点，单行及多行文本溢出解决，如何绘制三角形，常见表示单位长度的em/px/rem/vh/vw的区别，隐藏页面元素的方式及区别，如何清除浮动，如何解决margin塌陷，设备像素/物理像素/CSS像素的区别，选择器类型优先级和权重，如何让chr

2024-03-11 22:20:57 218

原创 leetcode刷题（javaScript）——二叉树、二叉搜索树、平衡二叉树相关场景题总结

掌握二叉树的前序、中序、后序遍历算法，以及它们的递归和迭代实现方式。学习常见的二叉树算法题目：包括但不限于二叉树的最大深度、判断平衡二叉树、路径总和、对称二叉树等常见题目。练习二叉树的递归和迭代实现：练习使用递归和迭代方式解决二叉树相关问题，加深对算法的理解和应用。

2024-03-05 19:30:45 911

原创 leetcode刷题（javaScript）——字典哈希表相关场景题总结

在 JavaScript 刷题中，字典（Dictionary）和哈希表（Hash Table）通常用来存储键值对，提供快速的查找、插入和删除操作。它们在很多算法题目中都有广泛的应用，特别是在需要快速查找元素或统计元素出现次数的情况下。

2024-03-04 17:59:37 932

原创 leetcode刷题（javaScript）——链表相关场景题总结

1. 熟悉链表的基本操作：了解链表的基本结构和操作，包括节点的定义、指针操作等。：在处理链表时，要考虑边界情况，如空链表、只有一个节点的链表等。2. 反转链表：将链表的指针方向反转，使链表的尾部变为头部。1. 遍历链表：从头到尾遍历链表，处理每个节点的值或指针。3. 合并两个有序链表：将两个有序链表合并成一个有序链表。4. 删除链表中的指定节点：删除链表中特定值或位置的节点。5. 检测链表中是否有环：判断链表中是否存在环形结构。：递归是解决链表问题的常见方法，可以简化问题的复杂度。

2024-03-02 00:00:38 1012 1

原创 leetcode刷题（javaScript）——栈、单调栈相关场景题总结

栈的主要思想是“后进先出”（Last In First Out，LIFO），即最后进入栈的元素最先出栈。栈通常用于解决需要“回溯”或“撤销”操作的问题，以及需要维护“”的问题。给定一个只包括'('')''{''}''['']'的字符串s，判断字符串是否有效。主要思路是遇到左括号推入栈遇到右括号，将栈顶左括号移除，并和它进行对比。不相等return false否则继续比较，直到最后，判断是否还有没匹配上的左括号。

2024-02-29 18:59:39 839

原创浏览器同时可以处理多少个并发请求，如何中断已发送的请求

浏览器的并发请求数量是指浏览器同时能够发送的 HTTP 请求的数量。浏览器对并发请求数量有一定的限制，这是为了避免对服务器造成过大的负载。当传输量很大，用户想中断传输，如何取消已发送的请求呢。

2024-02-28 15:16:15 1316

原创 vue导致页面加载白屏时间长的原因有哪些，怎么优化

白屏时间是指用户输入内容回车到浏览器开始出现第一个字符,也就是说(页面)开始显示内容的时间。当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时，就开始等待页面的展示。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的提升用户的体验，减少用户的跳出，提升页面的留存率。

2024-02-25 21:27:49 1448

原创 leetcode刷题（javaScript）——字符串相关场景题总结

素数：只能被1和它本身整除。

2024-02-25 20:08:22 418

原创 javaScript数组去重的几种实现方式——适用非引用数据去重

比较当前元素数组下标和根据indexOf查找的数组下标是否一致，一致则保留。利用indexOf获取的是多个相同元素只获取首次出现的下标，这样保留了首次出现的数据项。利用reduce每次循环返回上一步的执行结果，设置每步获取的数组是非重复的。即判断当前循环项是否包含在上一步的数组中，如果不包含，将当前元素追加到上一步执行结果中。利用对象的key值具有唯一性将数组中元素作为对象的key，之后用Object.keys获取。将不重复的数据项添加到newArr中。

2024-02-25 19:11:45 361

原创 vue项目的前端工程化思路webpack（持续更新中）

现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决Scss，Less……新增样式的扩展写法的编译工作。前端工程化，如WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化

2024-02-25 13:45:04 997

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

复杂网络——无标度网络BA的C++代码实现及python可视化操作，度分布实现.docx

软件工程实验报告.docx

计算机组成原理实验指导书.pdf

综合实验报告.docx

空空如也