每天几个前端小知识

简介: 每天几个前端小知识

Vue篇



1.vue在created和mounted这两个生命周期中请求数据有什么区别呢?


看实际情况,一般在created(或beforeRouter)里面就可以,如果涉及到需要页面加载完成之后的话就用mounted。


在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,(此时document.getelementById即可生效了)。


2.说说你对proxy的理解


参考回答:

vue的数据劫持有两个缺点:


1、无法监听通过索引修改数组的值的变化

2、无法监听object也就是对象的值的变化所以vue2.x中才会有$set属性的存在


proxy是es6中推出的新api,可以弥补以上两个缺点,所以vue3.x版本用proxy替换object.defineproperty。


3.Vue3.0是如何变得更快的?(底层,源码)


a.diff方法优化

Vue2.x中的虚拟dom是进行全量的对比。

b.Vue3.0中新增了静态标记(PatchFlag):在与上次虚拟结点进行对

比的时候,值对比带有patchflag的节点,并且可以通过flag的信息

得知当前节点要对比的具体内容化。hoistStatic静态提升

Vue2.x:无论元素是否参与更新,每次都会重新创建。

Vue3.0:对不参与更新的元素,只会被创建一次,之后会在每次渲染时

候被不停的复用。

c.cacheHandlers事件侦听器缓存

默认情况下onClick会被视为动态绑定,所以每次都会去追踪它的

变化但是因为是同一个函数,所以没有追踪变化,直接缓存起来复用

即可。


React篇



1.fetchVSajaxVSaxios


传统Ajax指的是XMLHttpRequest(XHR),最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。JQueryajax是对原生XHR的封装


axios是一个基于Promise,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest

对象。


2.React事件处理---修改this指向


方式1:通过bind方法进行原地绑定,从而改变this指向

方式2:通过创建箭头函数

方式3:在constructor中提前对事件进行绑定

方式4:将事件调用的写法改为箭头函数的形式


3.请简述你对react的理解


React起源于facebook,react是一个用于构建用户界面的js库


特点

声明式设计:react采用范式声明,开发者只需要声明显示内容,react就会自动完成


高效:react通过对dom的模拟(也就是虚拟dom),最大限度的减少与dom的交互

灵活:react可以和已知的库或者框架很好配合

组件:通过react构建组件,让代码更容易复用,能够很好应用在大型项目开发中,把页面功能拆分成小模块每个小模块就是组件

单向数据流:react是单向数据流,数据通过props从父节点传递到子节点,如果父级的某个props改变了,react会重新渲染所有的子节点


4.react组件之间的数据传递


正向传值用props

逆向传值用函数传值通过事件调用函数传递

同级传值用pubsub-js

用pubsub.publish(事件名,数据)抛出数据

用pubsub.subscribe(监听的事件,()=){})接收数据

跨组件传递用context要使用context进行跨组件传值就需要使用

createContext()方法,这个方法有两个对象provider生产者Consumer消费者


5.Vue与react区别


相同点


都支持服务器渲染

都有虚拟dom,组件化开发,通过props参数进行父子组件数据的传递,

都实现webcomponent规范

都是数据驱动视图

都有状态管理,react有redux,vue有vuex

都有支持native’的方案react有reactnativevue有weex


不同点


react严格上只针对mvc的view层,vue是mvvm模式虚拟dom不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个dom组件树,而react不同,当应用的状态被改变时,全部组件都会重新渲染,所以react中用shouldcomponentupdate这个生命周期的钩子函数来控制组件写法不一样,react是jsx和inlinestyle,就是把html和css全写进js中,vue则是html,css,js在同一个文件数据绑定不一样,vue实现了数据双向绑定,react数据流动是单向的


在react中,state对象需要用setstate方法更新状态,在vue中,state对象不是必须的,数据由data属性在vue对象中管理


6.请简述虚拟dom与diff算法


虚拟DOM也就是常说的虚拟节点,它是通过js的object对象模拟DOM中的节点,然后再通过特定的渲染方法将其渲染成真实的DOM节点。频繁的操作DOM,或大量造成页面的重绘和回流Diff算法:把树形结构按照层级分解,只比较同级元素,给列表结构的每个单元添加唯一的key值,方便比较


7.你对组件的理解


可组合,可复用,可维护,可测试

目录
相关文章
|
Java 测试技术
干货|这些JMeter内置函数,你了解多少?建议收藏
干货|这些JMeter内置函数,你了解多少?建议收藏
433 1
|
存储 Kubernetes 关系型数据库
在Kubernetes中,helm是什么?如何使用?
【4月更文挑战第9天】在Kubernetes中,helm是什么?如何使用?
1498 5
|
23天前
|
人工智能 缓存 数据可视化
阿里云百炼平台详解:官网入口、免费AI大模型领取及常见问题解答
阿里云百炼(Model Studio)是阿里云推出的一站式大模型服务平台,集成通义千问全系列及DeepSeek、Kimi等上百款主流第三方大模型,提供兼容OpenAI的API接口、可视化应用构建、模型微调与部署等全链路能力,是个人开发者与企业快速接入AI能力的首选平台。本文将从官网入口、免费AI大模型领取流程、核心功能使用,到高频常见问题解答,全方位详解阿里云百炼平台,帮助你快速上手,高效使用免费额度,避免踩坑。
489 1
|
6月前
|
边缘计算 开发者
阿里云 ESA「春节加速计划」活动说明与参与指南
阿里云ESA「春节加速计划」(2月5日-28日)邀您零门槛体验边缘计算:邀请新用户开通免费版,即得¥10代金券(上限¥150)+免费版额度;冲榜还可赢最高¥1000奖励!永久免费版含无限流量、HTTPS、WAF等能力。
阿里云 ESA「春节加速计划」活动说明与参与指南
|
1月前
|
云安全 人工智能 安全
阿里云 Agentic SOC 位居 IDC MarketScape安全运营智能体2026领导者类别
以 Agentic AI 重构安全运营闭环,阿里云云安全在产品能力与市场份额
1373 3
|
7月前
|
Web App开发 存储 开发框架
浏览器实际大文件下载解决方案
针对电商短视频业务中高频、大文件下载痛点,本文探讨四种解决方案:浏览器插件批量下载(推荐)、Electron套壳客户端、Web流式压缩打包及传统Blob内存合并。重点分析各方案优劣,推荐插件方案兼顾性能与体验,兼顾兼容性与资源消耗,适用于素材频繁交付场景。
541 0
|
文字识别 iOS开发 MacOS
【uTools】uTools下载安装图文教程(国产良心软件)
uTools是一款极简、插件化的国产效率工具,通过Alt+Space呼出搜索框,快速调用OCR、翻译、截图等数百款免费插件。“一切皆插件”设计支持高度自定义,适配Windows/macOS/Linux,提升多场景办公效率。(239字)
|
5月前
|
人工智能 监控 机器人
阿里云OpenClaw部署指南,三步拥有专属AI助理!
阿里云OpenClaw一键部署方案,通过预配置镜像与可视化操作,大幅降低了AI助理的部署门槛。无论是个人用户用于日常事务处理,还是企业团队用于轻量协作,均可通过三步极简操作快速拥有一个7×24小时在线、多端可用的超级AI助理。
545 8
|
5月前
|
人工智能 Linux API
OpenClaw刷屏全网:AI智能体落地,易用性才是开发者与企业的核心诉求
本文剖析火爆社区的AI智能体框架OpenClaw(“龙虾”):肯定其开源灵活、支持多工具联动等创新,更直指其云上部署门槛高、插件生态弱、场景适配窄三大短板。对比提出阿里云深度适配的玄晶引擎——一键部署、视窗操作、全场景覆盖、免插件开发,真正实现低门槛、高可用的AI智能体云上落地。
770 5
|
7月前
|
人工智能 供应链 搜索推荐
AI智能体是刚需还是噱头?2026年五大争议辨真相
2026年,AI智能体赛道呈现“冰火两重天”:巨头重金布局,微软、谷歌争相构建生态;明星初创却接连倒闭。技术能力、ROI、场景真伪、生态格局与安全伦理五大争议,揭示其在降本增效与成本黑洞间的艰难平衡,展现真实价值与泡沫并存的复杂图景。