- 博客(31)
- 收藏
- 关注
RSS订阅原创 vue的响应式原理以及Vue 3.0在响应式原理上的优化方案
Vue 2.x 使用拦截对象属性的，在数据被访问或修改时触发依赖收集和更新通知。：每个响应式属性对应一个Dep实例，用于收集依赖（Watcher）。：组件渲染时创建，负责将数据变化映射到视图更新。当数据被访问时，触发getter，将当前 Watcher 添加到Dep中。：数据变化时触发setter，通过Dep通知所有关联的 Watcher 执行更新（如重新渲染组件）。：需使用Vue.setVue.delete。：通过索引修改数组元素或修改数组长度无法触发响应，需使用重写的数组方法（如pushpop等）
2025-02-08 12:20:18
531
原创 Vue的数据为什么频繁变化但只会更新一次
Vue 通过异步批量更新队列和Watcher 去重的机制，确保无论数据如何频繁变化，最终 DOM 只会更新一次。这种设计显著提升了性能，避免了不必要的计算和渲染。理解这一点对编写高效 Vue 代码（如合理使用nextTick）非常重要。
2025-02-08 11:34:27
1312
原创 下一个排列--JS
就是在这个有序容器中排在它后面的那个排列。如果不存在下一个更大的排列，那么这个数组必须重排为字典序最小的排列（即，其元素按升序排列）。如果不存在这样的元素对，说明数组已经是以降序排列，那么它已经是最大的排列，我们需要将其重排为字典序最小的排列（即，其元素按升序排列）。是指其整数的下一个字典序更大的排列。更正式地，如果数组的所有排列根据其字典顺序从小到大排列在一个容器中，那么数组的。到末尾的元素反转，这样可以得到下一个更大的排列。：如果存在这样的元素对，我们需要找到从。到末尾的元素仍然是降序排列的。
2024-11-26 16:54:10
377
原创 Promise
Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的 API，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。（1）对象的状态不受外界影响。
2024-11-25 15:15:42
2380
2
原创 搜索二维矩阵（js实现）
这个算法的时间复杂度是O(m+n)，其中m是矩阵的行数，n是矩阵的列数。要解决这个问题，我们可以利用矩阵的行和列都是升序排列的特性，从而实现一个高效的搜索算法。这是因为右上角的元素是当前行的最大值，同时也是当前列的最小值，这为我们提供了一个很好的比较基准。这个算法的空间复杂度是O(1)，因为我们只需要常数级别的额外空间来存储行索引和列索引。超出矩阵的列数，说明我们已经遍历了整个矩阵，但未找到目标值，此时返回。：选择矩阵的右上角作为起始点（如果矩阵为空，则直接返回。：如果移动到矩阵的最后一行或第一列，即。
2024-11-20 17:03:21
302
原创 浏览器的本地存储
Cookie在Web开发中是一种简单而有效的存储机制，适用于存储轻量级数据，如用户会话、用户偏好设置等。然而，由于其大小限制、安全性和性能问题，对于需要存储大量数据或复杂数据结构的场景，可能需要考虑其他存储解决方案，如LocalStorage、SessionStorage或IndexedDB。LocalStorage是HTML5新引入的一种客户端存储方法，由于有的时候我们存储的信息较大，Cookie就不能满足我们的需求，这时候LocalStorage就派上用场了。在使用。
2024-11-20 16:53:34
888
原创 事件循环详细解说！！
浏览器作为一个应用程序，它本身就是一个进程。这个进程负责管理浏览器的整体运行，包括用户界面、渲染引擎、JavaScript 引擎、网络请求处理等。在现代浏览器中，为了提高稳定性和性能，通常会将浏览器进程进一步细分为多个子进程。
2024-11-18 17:26:27
735
原创 自适应与响应式！！
自适应布局和响应式布局都可以使用媒体查询来创建响应式网页，但它们的设计理念和应用方式有所不同。选择哪种方法取决于具体的需求和项目目标。如果需要为特定的设备提供最佳的用户体验，并且愿意为每个设备创建和维护单独的布局，那么自适应布局可能是更好的选择。如果需要创建一个能够适应任何屏幕尺寸的布局，并且希望减少开发工作量，那么响应式布局可能是更合适的选择。
2024-11-12 12:42:02
1903
原创 使用Intersection Observer API时，浏览器的兼容性问题怎么解决
设计一个优雅降级的用户体验，即在不支持Intersection Observer API的情况下，应用仍然能够提供基本的功能，但可能不如完全实现的效果好。通过这些方法，你可以确保Intersection Observer API在不支持它的浏览器中也能以一种或另一种方式正常工作，从而提供更好的跨浏览器兼容性。： 对于首屏内容，可以考虑使用服务端渲染（SSR）来确保即使在不支持Intersection Observer API的浏览器中也能提供良好的用户体验。
2024-11-08 17:23:54
1205
原创 二次封装，怎么保留原有组件的属性、方法和插槽？
海康一面面试官一问完我就直接说用props把需要的属性全写在要传入的参数里，奈何面试官不买账，反问如果属性多达几百条你也自己全写下来嘛？思考片刻也是想到$attrs了！插槽这个我是真忘记了。
2024-11-08 17:17:55
475
原创 缺失的第一个正数-js
给你一个未排序的整数数组nums，请你找出其中没有出现的最小的正整数。请你实现时间复杂度为O(n)并且只使用常数级别额外空间的解决方案。3范围 [1,2] 中的数字都在数组中。21 在数组中，但 2 没有。1最小的正数 1 没有出现。
2024-11-06 16:39:31
322
原创 浏览器缓存！！！
强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本，区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时，都会向服务器发送请求来获取资源。在实际的缓存机制中，强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断，强缓存是否命中，如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。
2024-11-06 15:49:17
1979
原创 带你真正了解BFC
小提示：这个问题重点是BFC是什么，BFC触发的条件有哪些，BFC可以干什么。BFC 全称为块级格式化上下文 (Block Formatting Context)。BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
2024-11-06 13:28:38
559
原创 什么是BOM和DOM？它们常见的操作又有哪些呢？
BOM（Browser Object Model）指的是浏览器对象模型，它是用于描述浏览器窗口及其内容的一种抽象表示。BOM并不是W3C标准的一部分，而是浏览器厂商基于JavaScript提供的一系列对象和方法的集合，用于操作浏览器窗口、处理用户输入以及与浏览器交互等功能。BOM包含了一系列对象，其中最重要的是window对象，它代表了一个浏览器窗口或一个标签页。window对象提供了许多属性和方法，用于操作当前浏览器窗口的各个方面，如窗口大小、位置、历史记录、文档加载状态等。除了window。
2024-11-05 14:50:31
711
原创 作用域和作用域链是怎么个事儿？？
在 JavaScript 中，全局变量很容易受到变量污染的影响，因为全局作用域中的变量对整个程序都是可见的。如果在函数内部重新声明了一个已经存在于全局作用域中的变量，并给它赋予了新的值，那么全局作用域中的该变量的值也会被改变，这就是变量污染的一种情况。声明的变量具有函数作用域，如果在同一个函数内部多次声明同名变量，后面的声明会覆盖前面的声明，从而造成变量污染。变量污染会导致程序的可读性和可维护性降低，因为在复杂的程序中，很难跟踪和理解变量的值是如何被修改的。贴心补充小知识one。贴心补充小知识two。
2024-11-05 14:47:05
372
原创 JS的垃圾回收机制
引用计数算法无法处理循环引用的情况主要是因为它依赖于引用计数来确定对象是否可回收，而循环引用会导致对象之间形成了闭环，使得它们的引用计数永远不会变为零，即使它们已经不再被外部引用。此时，引用计数算法会发现A和B的引用计数始终不会为零，因为它们相互引用对方，即使程序不再使用这两个对象，它们的引用计数也不会减少。为了解决循环引用导致的内存泄漏问题，现代的垃圾回收算法通常采用标记-清除算法等方式，能够通过对象之间的可达性来判断对象是否可回收，从而避免了引用计数算法的这一缺陷。
2024-11-05 14:45:44
486
原创 JS的闭包 （详细解说+代码理解）
闭包是计算机科学中的一个重要概念，它涉及到函数和变量的组合。在编程语言中，闭包是一个函数，它不仅包含了函数的定义，还包含了定义该函数的环境（即该函数被创建时的作用域）。换句话说，闭包允许函数访问其被定义时所在的作用域中的变量，即使在函数被调用时，这些变量已经超出了其作用域的范围。
2024-11-05 14:44:38
1019
原创 讲讲箭头函数
箭头函数提供了一种更简洁的方式来表示函数表达式，尤其是那些只接受一个参数的函数。箭头函数是ES6中的提出来的，它没有prototype，也没有自己的this指向，更不可以使用arguments参数，所以，上面的第二、三步，箭头函数都是没有办法执行的。对象是一个特殊的对象，它在JavaScript函数中用来引用函数的参数数组。对象只存在于非箭头函数中，它在函数体内部可以使用，但在函数外部是不可访问的。箭头函数也可以有返回箭头和函数体，如果函数体只有一行代码并且返回该行代码的值，可以省略花括号和。
2024-11-05 14:40:31
498
原创 事件循环！
根据W3C的官方解释，每个任务有不同的类型，同一类型的任务必须在同一队列，不同的任务可以属于不同的队列，不同的任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务，但浏览器必须有一个微队列，它具有最高优先级，优先调度执行！在Chrome源码中，它开启一个不会结束的for循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需在合适的时候将任务加入到队列末尾即可。过去将消息队列简单分为宏队列和微队列，这种说法已经无法满足复杂的浏览器环境了，取而代之的是一种更加灵活多变的处理方式。
2024-11-05 14:37:30
275
原创 合并区间-js
题目描述：以数组intervals表示若干个区间的集合，其中单个区间为。请你合并所有重叠的区间，并返回一个不重叠的区间数组，该数组需恰好覆盖输入中的所有区间。区间 [1,3] 和 [2,6] 重叠, 将它们合并为 [1,6].
2024-11-05 14:26:58
340
原创 带你深入认识防抖Debounce与节流Throttle
防抖（Debounce）和节流（Throttle）是两种在前端开发中常用的优化技术，它们主要用于处理频繁触发的事件，以减少不必要的计算和提升应用性能。下面我将详细讲解这两种技术的概念、工作原理和区别。
2024-11-05 12:56:12
982
原创 ES6的十个重要知识点
文章主要介绍了 ES6 的十个重要知识点，包括 const、var 的区别，如块级作用域、变量提升、给全局添加属性、重复声明等；const 对象属性修改、new 箭头函数的情况；箭头函数与普通函数的区别；扩展运算符的作用及使用场景；对象与数组的解构；提取高度嵌套对象的指定属性；rest 参数；模板语法与字符串处理，如字符串拼接、新增字符串方法等。
2024-11-05 10:47:37
996
原创 数据类型检测的方法有哪些？？？
不同的对象类型调用toString方法时，根据原型链的知识，调用的是对应的重写之后的toString方法（function类型返回内容为函数体的字符串，Array类型返回元素组成的字符串…），而不会去调用Object上原型toString方法（返回对象的具体类型），所以采用obj.toString()不能得到其对象类型，只能将obj转换为字符串类型；我们知道object是一种广泛类型，它涵盖了普通的对象、数组、函数，那为什么function没有被判断为object，而null却判断为object了呢？
2024-11-05 10:25:27
841
原创 JavaScript有哪些数据类型？？？
Javascript共有8种数据，分别是Nndefined、Null、String、Number、Boolean、Object、BigInt、Symbol。1.栈：原始（基本）数据类型（Undefined、Null、Boolean、Number、String）这些基本数据。2.堆：引用数据类型（对象、数组和函数）
2024-11-05 10:17:33
201
原创 vue中的路由
2. 浏览器的历史记录有两种写入方式：分别为```push```和```replace```，```push```是追加历史记录，```replace```是替换当前记录。路由跳转时候默认为```push```3. 如何开启```replace```模式：```News```1.作用：不借助``` ```实现路由跳转，让路由跳转更加灵活，不仅a标签可以跳转，
2023-08-20 11:23:05
719
1
原创 vue的介绍以及优点
Vue将组成一个页面的HTML，CSS和JS合并到一个组件中，可以被其他组件或页面引入而重复利用。通常每个.Vue文件作为一个组件导出，组件可以作为基础组件（如按钮）或一个页面（如登录页面）。组件化很好的将一个庞大复杂的前端工程拆分为一个个组件，重复利用的性质也大大提高了开发的效率。4、vue是单页面应用，页面局部刷新，不用每次跳转都请求数据，加快了访问速度，提升了用户体验。1、vue可以进行组件化开发，数据与结构相分离，使代码量减少，从而提升开发效率，易于理解。
2023-08-20 11:16:39
329
1
原创 生命周期函数
确保有了el后，继续往下走，判断当有template参数时，我们会选择去将template模板转换成render函数（其实在这前面是还有一个判断的，判断当前是否有render函数，如果有的话，则会直接去渲染当前的render函数，如果没有那么我们才开始去查找是否有template模板），如果没有template，那么我们就会直接将获取到的el（也就是我们常见的#app，#app里面可能还会有其他标签）编译成templae, 然后在将这个template转换成render函数。也就完成了我们的数据更新。
2023-08-20 11:11:59
201
1
原创 组件通信的方式
子组件传数据给父组件，子组件通过派发事件的方式给父组件传数据，或者触发父组件更新等操作。子组件接收父组件的数据，注意：子组件接收到数据之后，不能直接修改父组件的数据，否则会报错，因为当父组件重新渲染时，数据会被覆盖。在子组件上使用，引用的指向就是子组件实例，父组件可以通过ref主动获取子组件的属性或者调用子组件的方法。父组件向子组件传递数据的双向绑定，所以子组件接收到数据之后可以直接修改，并且会同时修改父组件的数据。10.slot，把子组件中的数据通过插槽的方式传给父组件使用然后插回来。
2023-08-20 11:05:02
101
1
原创 flex 布局
flex布局是Flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局。（2）采用flex布局的元素称为flex容器，简称容器。它的所有子元素自动成为容器成员，称为flex项目，简称项目。（1）当我们为父盒子设为flex布局以后，子元素的float，clear和vertical-align属性将失效。（3）Flex布局就是通过给父盒子添加flex属性来控制子盒子的位置和排列方式。
2023-04-06 17:03:05
134
1
原创 Vue速成课程总结
可以这么理解，v-for指令是将作为模板的那个标签还有其内部的所有内容按照数据的个数拷贝若干份，它会根据列表的添加和删除相应的做出改变，这使得操作变得极其方便！例如： 在Vue模板中的data数据对象中添加message，并输入文本，该文本即会传入h1中。例如：（6）v-bind（设置元素的属性，如：src，title，class）
2023-04-05 14:52:32
206
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人