- 博客(13)
- 收藏
- 关注
RSS订阅原创 vue响应系统的作用和实现三
如果obj.ok是true，那么在代理的数据中就会涉及到obj.ok 和 obj.text两个属性的读取操作，就会有两个deps收集到fn这个副作用函数。如果是false，由于'not'是固定的值，不会影响其他变量，所以应该是在proxy代理中只有obj.ok这个属性涉及到读取操作，就只有一个deps收集到fn这个副作用函数。的代理中，即使是obj.ok的值为false，修改obj.text还是会执行副作用函数fn。以上参考霍春阳老师的《Vue.js设计与实现》，有兴趣的朋友可以看一下原书，更加详细·-·
2024-08-04 01:48:49
491
原创 vue响应系统的作用和实现二
并不是所有的副作用函数都叫做effect，甚至匿名函数的副作用函数需要储存近桶里面，那么我们就需要有一个用来注册副作用函数的机制。在组件或应用的生命周期中，我们经常需要在某些阶段执行这些副作用操作，但又不想将这些操作直接嵌入到组件的渲染逻辑中，因为这可能会导致性能问题（如无限渲染循环）或使组件的逻辑变得复杂且难以维护。如果设置一个不存在的属性时，这个effect副作用函数还是会执行。理论上，effect中的副作用函数并没有读取obj.notExist属性，它们并没有联系，但是还是执行了副作用函数。
2024-08-03 18:31:19
568
原创 vue响应系统的作用和实现一
③该函数的执行会直接或者间接影响其他函数的执行，比如某个函数修改了一个全局变量，其他函数也可以修改这个全局变量，那么该函数就产生了副作用。将副作用函数储存在桶里，当设置对象的时候，再将副作用函数取出执行。在Vue2中，通过Object.defineProperty来实现这个操作，在Vue3中，是通过代理对象Proxy来实现。以上参考霍春阳老师的《Vue.js设计与实现》，有兴趣的朋友可以看一下原书，更加详细·-·注意，这里的响应式数据是这个new出来的代理obj，不是原始数据data。
2024-08-03 15:39:23
917
原创 前端小知识之大文件上传
通过合理的设计和实现，可以为用户提供高效、稳定且安全的文件上传体验。对于非常大的文件或需要复杂处理的任务，可以使用Web Workers来在后台线程中执行这些任务，以避免阻塞主线程并影响用户体验。切片上传是一种将大文件分割成多个较小的数据块（chunk）并分别上传的方法。更好的用户体验：可以通过进度条显示每个数据块的上传进度，提供更详细的上传状态反馈。恢复上传：如果某个数据块上传失败，可以只重新上传该失败的数据块，而不是整个文件。验证上传的文件类型：确保上传的文件类型符合期望，避免潜在的安全风险。
2024-08-01 22:43:35
433
原创 防抖、节流手撕
/ timer 变量被定义在 debounce 函数的闭包中if (timer!== null) {// 使用 apply 来确保正确的 this 上下文和参数传递}, time);// 使用示例}, 1000);// 频繁调用 debouncedFn，但函数只会在最后一次调用后1000ms执行一次。
2024-07-31 22:21:24
226
原创 八股文（语法降级、babel、抽象语法树(AST)、文档碎片）
抽象语法树（Abstract Syntax Tree，简称AST）是源代码的树状表现形式，其中树的每个节点都表示源代码中的一种结构，如表达式、语句或声明。减少DOM操作：在没有文档碎片的情况下，直接向DOM树中添加或移除节点，尤其是频繁地进行此类操作，会导致浏览器不断进行重排和重绘，大大降低页面的渲染速度。综上所述，语法降级的原理和Babel的基本原理都是基于将JavaScript代码转换为AST，然后对AST进行转换操作，最后生成向后兼容的代码的过程。Babel的优势在于它可以根据需要进行定制和扩展。
2024-07-30 23:02:15
1607
原创 前端小小知识点
px（像素）、em（相对父元素）、rem（相对根元素）、vw（相对视窗宽度）、vh（相对视窗高度）undefined属于当变量未定义的时候、没有传参、函数没有return、对象没有该属性却访问的时候。优点：变量私有化、延长变量的生命周期、创建模块化、实现回调函数和异步编程。变成标准盒模型是box-sizing:content-box;变成怪异盒模型是box-sizing:border-box;console.log(k) //循环索引。盒模型分为标准盒模型和ie盒模型（怪异盒模型）
2024-07-29 22:08:46
205
原创 说说浮动吧
②使用bfc：给父元素添加overflow：hidden；浮动带来的问题：父元素高度塌陷（没有子元素支撑导致高度塌陷）、浮动下沉（浮动的元素可能会覆盖下方的非浮动元素）、布局兼容性。浮动属性设置：float:left;（默认值）float:inherit;①clear属性：在浮动元素的下方添加一个空元素，并给元素设置chear： both；③添加伪元素：使用：after伪元素，并设置clear：both；①多栏布局：让元素浮动到左侧或者右侧，可以形成左侧导航栏或者右侧导航栏。③浮动菜单或者浮动广告。
2024-07-28 20:29:02
167
原创 vue中的keep-alive组件详解
keep-alive是一个内置组件，它的主要作用是缓存不活动的组件实例，而不是销毁它们。这可以达到节省请求、优化性能的目的。触发时机：当组件被keep-alive缓存后，再次进入该组件的可见区域时触发。用途：主要用于执行组件重新激活时需要的操作，如更新数据或执行DOM操作。这个钩子相当于传统意义上的组件重新渲染或激活的入口。触发时机：当组件被keep-alive缓存，且从可见区域离开时触发。用途：执行组件停用时的清理工作，如取消定时器、解绑事件监听器等。
2024-07-27 23:34:30
595
原创 promise你知多少？
promise 三种状态：pedding（进行中）、fulfilled（已成功）、rejected（已失败）。特点：状态不受外界的影响， 一旦状态改变就不会再变（pending–>fulfilled，pending–>rejected)。Promise是一个构造函数，用来生成promise实例。Promise构造函数接受一个函数作为参数，这个函数有两个参数。
2024-07-26 22:19:00
401
原创 vue框架知识点
提供友好的警告信息至关重要，这有助于开发者快速定位问题。但提供的警告信息越详细，就意味着框架体积越大。 Tree-Shaking是一种排除dead code的机制，在框架中会有很多内置组件，对于用户可能用不到的组件，可以利用Tree-Shaking机制使最终打包的代码体积最小化。也可以理解成树摇就是不需要的叶子摇下来。 利用Tree-Shaking机制，配合构建工具预定义常量，来实现在开发环境中打印信息，生产环境中不包含这些警告信息。 Tree-Shaking是基于ESM，通过纯静态分析的手段进行Tr
2024-07-26 16:32:02
463
原创 手写call，apply
小小记忆点：call和apply很相似，一个是传入多个参数，一个是传入数组，怎么记住呢？传入数组的是apply，数组的英文是array，他们都是a开头！
2024-07-25 23:49:32
151
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人