- 博客(42)
- 收藏
- 关注
RSS订阅原创 本地存储具不具备响应式原理?
如果你需要在本地存储数据的同时实现响应式行为,你可以考虑使用一些支持响应式绑定的前端框架或库,比如,vue.js中提供了vue响应式数据和watch记住,可以与localStorage结合使用,实现数据的自动更新,同样的,在react中,你可以使用状态管理工具等来实现类似的效果。总的来说,本地存储本身并不具备响应式原理,但你可以通过使用支持响应式绑定的前端框架或库,将本地存储的数据与界面关联起来,实现自动更新的效果。
2023-08-01 17:13:25
121
原创 大文件上传如何做断点续传?
每个部分采用一个线程进行上传或下载,如果碰到网络故障,可以从已经上传或下载的部分开始继续上传下载未完成的部分,而没有必要从头开始上传下载,用户可以节省时间,提高速度。如果中途上传中断过,下次上传的时候根据当前临时文件大小,作为客户端读取文件的偏移量,从此位置继续读取文件数据块,上传到服务器从此偏移量继续写入文件即可。整体思路比较简单,拿到文件,保存文件唯一性标识,切割文件,分段上传,每次上传一段,根据唯一性标识判断文件上传进度,知道文件的全部片段上传完毕。文件上传简单,文件变大就复杂。
2023-07-25 16:05:02
110
原创 单元测试jest框架
先装包,再jest-init初始化配置文件,初始化完了之后会产生一个jest.config.js配置文件,它里面有几乎所有的配置,但是都注释掉了,我们新建一个text文件夹专门用来放单元测试的文件,比如我们要测试某个函数,就要新建一个xxx,text.js文件,然后引入jest对象和需要测试的函数,我们调用jest对象中的text方法,传入一个回调函数,在expect函数中调用需要测试的函数.然后.tobe方法,传入预期的结果,最后调用完就会输出测试结果。jest用起来很简单,也不需要很麻烦的配置,
2023-07-23 21:55:22
105
原创 地址栏输入url敲下回车后发生了什么?
对www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址 根据这个 IP，找到对应的服务器，发起 TCP 的三次握手 建立 TCP 连接后, 发起 HTTP 请求 服务器响应 HTTP 请求，浏览器得到 html 代码 浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片等）（先得到 html 代码，才能去找这些资源） 服务器响应对应的资源 响应数据完毕, 四次挥手，关闭 TCP 连接 浏览器对页面进行渲染呈现给用户
2023-07-17 08:26:18
71
原创 mvvm和mvc的区别?
相比于 MVC，MVVM 强调数据绑定和 ViewModel 的角色，使得视图的更新和数据的处理更加简化和自动化。MVVM 的核心概念是数据绑定，通过建立 ViewModel 与 View 之间的双向数据绑定关系，使得数据的变化能够自动反映在视图上，而不需要显式的 DOM 操作。这种方式可以降低代码的耦合性，提高开发效率。MVVM（Model-View-ViewModel）和 MVC（Model-View-Controller）是两种常见的软件架构模式，用于设计和组织应用程序的结构。
2023-07-17 08:26:02
59
原创 vue2和vue3的区别
旧的选项型API在代码里分割了不同的属性,data,computed属性,methods等等,而vue3组合式api能让我们用方法来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁。vue2的双向数据绑定利用es6的一个apiobjectdefinepropert()对数据进行劫持,结合发布订阅者的方式来实现的。3.使用setup()方法来返回我们的响应式数据,从而我们的template可以获取这些响应式数据。2.使用reactive()方法来声明我们的数据为响应式数据。
2023-07-17 08:25:58
47
原创 自定义指令及应用场景
【怎么用】：可以通过 Vue.directive 全局注册一个指令，或者组件内部通过 directives 进行局部注册，它常用的钩子有 inserted，表示被绑定元素插入父节点时调用，还有 update，它表示指令所在组件的 VNode 更新时调用。【场景】：我在实际项目中，用自定义指令处理过图片懒加载，原理就是当图片进入可视区的时候把图片的地址给图片的 src 属性就好啦。【注意】：自定义指令相关的钩子在 Vue3 中发生了变化，主要体现在和组件的生命周期钩子保持了一致，更加容易记忆和理解了。
2023-07-17 08:25:49
168
原创 v-model和.sync
上：v-bind:一个自定义属性与data中定义的一个变量，然后v-on:一个名为“update:自定义属性”的自定义事件，事件处理函数中修改属性绑定的data中的变量，使这个变量的值等于子组件使用$emit传递过来的值。v-model用在标签上,v-bindLvalue与data中定义的一个变量,然后v-on:input事件,事件处理函数修改属性绑定的data中的变量,是这个变量的值等于当前变迁的value的值。v-model是vue.js提供的一个语法糖,用于在表单元素上创建双向数据绑定。
2023-07-16 20:26:23
65
原创 created和mounted的区别？
因此，如果需要在组件创建时进行一些数据初始化的操作，可以使用created钩子函数；如果需要在组件挂载到页面上后进行一些DOM操作或与后端交互的操作，可以使用mounted钩子函数。created是在实例创建完成后立即执行的钩子函数，此时组件的DOM节点还未生成，数据也还未渲染到页面上。mounted是在组件挂载到页面上后执行的钩子函数，此时组件的DOM节点已经生成，数据也已经渲染到页面上。created和mounted都是Vue生命周期钩子函数，但它们的执行时机不同。
2023-07-16 20:08:41
1264
原创 eventBus的原理
Vue中的EventBus是一种事件总线，用于在组件之间进行通信。它的原理是通过创建一个全局的Vue实例作为中央事件总线，其他组件可以通过该实例来订阅和发布事件。这种机制可以实现不同组件之间的解耦，使得组件之间可以方便地进行通信和数据传递。但同时也需要注意避免滥用EventBus，因为过多的全局事件会导致代码维护和调试困难。2.在传递数据的组件中通过。3.在接收数据组件中通过。EventBus的使用。
2023-07-16 20:05:55
415
原创 vue2中对mixin的理解
3.当多个组件引入方法时,其中一个组价里面改变了混入中的某个属性值或者方法内部的操作时,其他组件不会受影响。该组件在使用的时候,混入了mixin里面的方法,在自动执行create生命钩子,执行hello方法。混入是用来分发 Vue 组件中的可复用功能,混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混合进入该组件本身的选项。1.组件调用了混入的对象,孤儿混入的选项会合并到当前组件中去。2.当混入的对象和组件含有同名选项时,以组件数据优先。对象的选项都将被混入该组件本身的选项中来。
2023-07-16 18:06:28
147
原创 对nextTick的理解
实现原理:nextTick 的核心是利用了如Promise,setTimeout的原生js方法来模拟对应的微/宏任务的实现,本质是为了利用js的这些异步回调任务队列来实现vue框架中自己的异步回调队列。1.在数据变化后执行的某个操作,而这个操作需要使用随数据变化而变化的dom结构的时候,这个操作就需要方法在回调函数中。页面的DOM还未渲染,这个时候也没有办法操作dom,如果想操作dom,需要使用nextTick 来解决这个问题。3.事件循环到了微任务或者宏任务,执行函数一执行,callbacks中的回调。
2023-07-16 17:53:42
31
原创 计算属性和watcher的作用及理解
watch侦听某一数据的变化从而会触发函数,当汇聚为对象类型时,对象中的属性值变化时需要使用深度侦听deep属性,也可在页面第一次加载时使用立即侦听immdiate属性,computed计算属性是触发函数内部任意依赖的变化都会重新执行该函数,计算属性有缓存,多次重复使用计算属性时会从缓存中获取返回值,计算属性必须要有return关键词。watch和computed都是以函数为基础的,它们都是通过监听吱声依赖的数据在变化时触发相关的函数去实现自身数据的变化。
2023-07-16 17:17:45
35
原创 v-for中key属性的作用
Vue中为v-for提供了一个属性,key,在写v-for的时候,都需要给元素加上一个key属性这个key属性必须是唯一的标识,并且给key赋值的内容不能是可变的。若对数据进行:逆序添加,逆序删除等破坏顺序操作,会产生没有必要的真是dom更新,芮然界面效果没问题,但效率低。2.如果不存在对数据的逆序添加,逆序删除等破坏顺序的操作,知识简单的展示数据,用index也是可以的。3.如果对数据的逆序添加,逆序删除等破坏顺序草错,用index作为key值,效率低。1.提升v-for渲染的效率。
2023-07-16 16:59:24
117
原创 箭头函数和普通函数的区别?
箭头函数是定义函数一种新的方式,他比传统函数function定义更加方便和简单,他没有绑定自己的this指向和伪数组arguments,无法调用super方法生成实例化对象,因为他不是后早函数,一般用来取代匿名函数的写法,最主要的是箭头函数的this指向它的上一级作用域中的this也可以理解为它的this是固定的,而普通函数的this是可变的。箭头函数自身没有this,它的this是父级普通函数的this,在普通函数中,this总是指向调用它的对象,如果用作构造函数,它指向创建的对象实例。
2023-07-16 16:38:59
22
原创 call,apply,bind的区别
共同点:他们的共同点是都可以修改函数this的指向第一个参数都是this要指向的对象都可以利用后续参数传参他们的区别一个是传参方式不同:call和bind是列表传参,apply是数组或伪数组传参第二个是执行机制不同:call和apply是立即执行,bind不会立即执行而是生成一个修改this之后的新函数apply接收连个参数,第一个参数是this的指向,第二个参数是函数接收的参数,以数组的形式传入改变this指向后原函数会立即执行,且此方法只是临时改变this指向1次当第一个参数为null。
2023-07-16 16:22:20
37
原创 hash路由和history路由
在实际开发中，可以根据项目需求和浏览器兼容性考虑选择使用 Hash 路由还是 History 路由。如果需要兼容性较好且对 SEO 较为重要，可以选择 Hash 路由。如果目标浏览器支持 HTML5 History API，并且希望 URL 更加美观且对 SEO 友好，可以选择 History 路由。同时，也可以使用前端框架（如 Vue Router 或 React Router）来抽象和简化路由的管理和切换过程。Hash 路由和 History 路由是前端路由的两种常见实现方式。
2023-07-16 08:32:23
798
原创 vue2组件通信的几种方式
一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。通过v-bind绑定props的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。2、父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中。1、以最简单插槽为例：在子组件中放一个占位符。props:父向子传值。
2023-07-15 19:35:37
147
原创 对事件机制的理解(宏任务与微任务)
事件循环先执行宏任务,其中同步任务立即执行,一步任务加载到对应的EvenQueue中,微任务也加载到对应的微任务EvenQueue中,所有的同步微任务执行完之后,如果发现微任务的EvenQueue中有未执行完的任务,先执行他们这样算是完成了一轮事件循环,接下来查看宏任务的队列中是否有异步代码,有的话执行第二轮的事件循环。从上面我们可以看到，同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。Object.observe（已废弃；
2023-07-15 17:25:38
29
原创 什么是重绘和回流?
几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来。在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变。），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了回流。Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）解析HTML，生成DOM树，解析CSS，生成CSSOM树。
2023-07-15 17:13:36
45
原创 实现js继承的6种方法
通过来划分不同的继承方式，最后的寄生式组合继承方式是通过组合继承改造之后的最优继承方式，而extends的语法糖和寄生组合继承的方式基本类似。
2023-07-15 16:25:15
72
原创 原型和原型链的理解
是我们创建函数的时候，系统帮我们自动生成的一个对象。在开发中我们一般把实例对象一些通用的方法放入原型中，在 vue 里面有时候也会给 vue 的原型添加一些公共类方法来实现所有的组件中可以共享成员。当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的_proto_隐式原型上查找,就是它的构造函数prototype,如果还没有找到就会再在构造函数的prototype的_proto_中查找,这样一层一层向上查找就是行成一个链式结构,我们称之为原型链.对象直接继承根源对象。
2023-07-15 15:56:59
41
原创 对闭包的理解
闭包是一个可以访问其他函数内部变量的函数，主要作用是解决变量污染问题，也可以用来延长局部变量的生命周期。闭包在 js 中使用比较多，几乎是无处不在的。一般大多数情况下，在回调函数中闭包用的是最多的。容易导致内存泄漏,因为存在其他作用域的引用,过渡使用闭包会使内存占用过多。闭包的缺点就是常驻内存,会增大内存使用量,使用不当很容易造成内存泄漏。定时器setTimerout和自动执行函数。内部的函数存在外部作用域的引用就会导致闭包。使用return返回函数。存在上级作用域的引用。
2023-07-15 12:00:11
22
原创 如何理解响应式网站
响应式布局就是一个网站能够兼容多个设备，可以根据屏幕的大小自动调整页面的的展示方式以及布局，我们不用为每一个设备做一个特定的版本;应式网站的特点:同时适配 PC + 平板 + 手机等网站的布局会根据视口来调整模块的大小和位置响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理来设置差异化的 css 样式.响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
2023-07-15 11:42:56
32
原创 ES6的新特性
箭头函数和普通函数最大的区别在于其内部this永远指向其父级对象的this。const定义常量,而且不能修改,但是在定义的对象时,对象属性值可以改变。var变量声明存在变量提升,let和const不存在变量提升。同一作用域下let和const不能声明同名变量,而var可以。let和const只能在块级作用域里访问。map()方法,filter()方法。var,let,const的区别?Array.from()方法。includes()方法。forEach()方法。
2023-07-15 11:33:08
16
原创 css优先级
important > 行内样式 > ID 选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器 > 通配符选择器。轮廓样式属性：outline-style、outline-width、outline-color、outline。生成内容属性：content、counter-reset、counter-increment。页面样式属性：size、page-break-before、page-break-after。盒子模型的属性：宽度、高度、内外边距、边框等。背景属性：背景图片、颜色、位置等。
2023-07-14 22:45:50
107
原创 css3的新特性
文本效果：引入了文字阴影（text-shadow）、文字渐变（text-gradient）、文字描边（text-stroke）文本自动换行(word-wrap: normal|break-word;边框：新增了圆角边框（border-radius），可以创建圆角效果的边框,边框阴影(box-shadow: 水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];选择器：新增了更多强大的选择器，如属性选择器、伪类选择器、伪元素选择器等，使得选择元素更加灵活。
2023-07-14 21:39:52
14
原创 通过环境变量配置axios的基地址
可以理解为production环境的镜像， 尽最大可能来模拟产品线上的环境(硬件，网络拓扑结构，数据库数据)下边我们来学习一下它的用法，从而了解环境变量的使用。就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于。的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量。的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量。： 在不同的运行环境下，它的值会自动改变。不同的配置文件，从而获取不同的环境变量。在项目运行的过程中，通过不同的命令，能。
2023-07-14 20:02:08
194
原创 登录流程及vuex的使用
补充对是否同意用户协议的校验，并完成整体的表单校验。Vuex中用户的登录-登录时发action。在登录组件中调用该action方法。实现token的Vue数据持久化。1.进行登录表单验证。
2023-07-14 15:18:07
290
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人