Vue
文章平均质量分 75
求知潮
这个作者很懒,什么都没留下…
展开
-
vue3 面试心得(高频,重点!!!)
Vue3.0 里为什么要用 Proxy API 替代 defineProperty API?a. defineProperty API 的局限性最大原因是它只能针对单例属性做监听。 Vue2.x中的响应式实现正是基于defineProperty中的descriptor,对 data 中的属性做了遍历 + 递归,为每个属性设置了 getter、setter。 这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因原创 2023-10-24 18:14:17 · 148 阅读 · 0 评论 -
权限处理
在前端固定写死路由的权限,指定路由有哪些权限可以查看。只初始化通用的路由,需要权限才能访问的路由没有被加入路由表内。在登陆后或者其他方式获取对应的路由 keys 后,遍历路由表去匹配 keys,过滤生成可以访问的路由表,再通过。权限相对不自由,因为路由表的控制在前端,不管是要排序还是修改,都需要前端去修改,服务端只提供有权限的路由 keys。所有的菜单控制都是通过服务端的接口返回,前端只负责渲染,后期维护成本降低,优先推荐此方式。参数,目前只是针对于本项目的模拟情况,如果不需要或者不适用,可自行改动。原创 2023-10-19 13:14:54 · 285 阅读 · 1 评论 -
vue 3.0
Vue在实例初始化时遍历data 中的所有属性,并使用Object.defineProperty把这些属性全部转为getter/setter。这样当追踪数据发生变化时,setter 会被自动调用。Object.defineProperty 是ES5中一个无法 shim 的特性,这也就是Vue 不支持IE8以及更低版本浏览器的原因。但是这样做有以下问题:1.添加或删除对象的属性时,Vue检测不到。原创 2023-10-08 15:38:12 · 115 阅读 · 1 评论 -
性能优化之图片优化篇
1.不用图片。很多时候会使用到很多修饰类图片,其实这类修饰图片完全可以用CSS去代替2.对于移动端来说,屏幕宽度就那么点,完全没有必要去加载原图浪费带宽。一般图片都用CDN加载,可以计算出适配屏幕的宽度,然后去请求相应裁剪好的图片。3.小图使用base64格式4.将多个图标文件整合到一张图片中(雪碧图)5.选择正确的图片格式:·对于能够显示WebP格式的浏览器尽量使用WebP格式。原创 2023-09-27 11:22:04 · 77 阅读 · 1 评论 -
性能优化之节流与防抖
函数防抖是指在事件被触发n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求。·函数节流是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。节流可以使用在scroll函数的事件监听上,通过事件节流来降低事件调用的频率。·按钮提交场景:防止多次提交按钮,只执行最后提交的一次。原创 2023-09-27 11:15:19 · 49 阅读 · 1 评论 -
性能优化之回流与重绘篇
当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时,浏览器会重新渲染部分或者全部文档的过程就称为。原创 2023-09-27 11:08:51 · 64 阅读 · 1 评论 -
性能优化之懒加载篇
懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分图片数据,这样就浪费了性能。如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前,可视化区域之外的图片不会进行加载,在滚动屏幕时才加载。这样使得网页的加载速度更快,减少了服务器的负载。懒加载适用于图片较多,页面列表较长(长列表)的场景中。原创 2023-09-27 10:55:00 · 213 阅读 · 1 评论 -
性能优化之CDN篇
CNAME(意为:别名)︰在域名解析中,实际上解析出来的指定域名对应的IP地址,或者该域名的一个CNAME,然后再根据这个CNAME来查找对应的IP地址。原创 2023-09-27 10:45:17 · 289 阅读 · 1 评论 -
vue的优点
轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;·简单易学:国人开发,中文文档,不存在语言障碍,易于理解和学习;·双向数据绑定:保留了angular的特点,在数据操作方面更为简单;·组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;·视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;原创 2023-09-26 08:35:08 · 97 阅读 · 0 评论 -
vue3相关
在使用过程中我感觉区别还是挺多了.比方说,他们生命周期发生了变化,beforeCreate created被setup语法糖取代了.别的生命周期前面加了on销毁期感觉是为了语义化吧从destroyed 变成了 onUnmounted,他们响应式的原理也发生了变化.还有从OptionsAPI变成了compositionAPI(卡姆破贼神) .还有一些treeshking就是需要导入之后才能使用了.另外你像.vuex变成了pinia(披呢儿),webpack使用vite在开发环境下面也变的更快了.mixin原创 2023-09-19 10:31:39 · 48 阅读 · 1 评论 -
双向数据绑定的原理
3. Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己②自身必须有一个update()方法③待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。2. compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。原创 2023-09-19 03:15:00 · 99 阅读 · 1 评论 -
vue生命周期钩子函数有哪些,分别什么时候触发
创建前:beforeCreate, 创建后:created挂载前:beforeMount, 挂载后:mounted更新前:beforeUpdate, 更新后:updated销毁前:beforeDestroy, 销毁后:destroyed原创 2023-09-18 18:44:36 · 506 阅读 · 2 评论