2023前端面试自我整理

1.讲讲cookies和localstorage,sessionstroage的区别？
区别:cookie它的大小只有4kb,而localstorage和sessionstroage的大小有5MB,
在时效性上来说:cookies是存储在后端的，他的过期时间是默认的，而且后端可以进行设置，localstorage是本地存储，浏览器存储，是永久性的，关闭会滑和关闭浏览器都不会删除，除非用户手动删除，seesionstorage是会话存储，用户关闭当前页面或者关闭浏览器都回你删除掉。
2. v-show和v-if的区别?
两个都是用来展示和隐藏页面元素的不同的是：v-show是利用css的display:none属性用来控制页面的展示和隐藏，而v-if是dom的重建和销毁，如果经常需要转换元素的展示状态，使用v-show减少开销，如果运行条件很少改变，则推荐使用v-if
3.什么叫暂时性死区？
使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。
4.vue咋么实现双向绑定的？
vue采用数据劫持和发布者-订阅者模式，使用object.defineProperty()方法来劫持每个属性的get和set方法，在数据变动时发送消息给订阅者，从而触发相应的回调来触发视图的更新。
就是在vue创建实例的时候，给传入的data进行数据劫持，然后在视图编译的时候，对于使用到的data进行监听，然后在数据劫持的getter中添加到发布者对象中，当劫持的数据发生变化时，就通知发布者订阅者以回调函数的方式通知所有的观察者操作DOM进行更新。从而实现数据的双向绑定。
5.基本数据类型和引用数据类型有哪些？区别是什么？
基本数据类型：Number string undefinded null symbol boolean
引用数据类型：object array data
存储上的区别：基本数据类型式存储在栈中的简单数据段
引用数据类型是存储在堆内存中的对象，在栈内存中存放的是堆内存中具体内容的引用地址
赋值上的区别：基本数据类型拷贝的时候，如果一个变量向另一个变量赋值基本类型的值，会在变量对象上创建一个新值，然后把这个值复制到为新变量分配的位置上。（深拷贝）两个变量任何一个变化不会影响到另一个的变化。
引用数据类型：当一个变量向另一个变量赋值引用类型的值时，同样也会将栈内存中的值复制一份放到新变量分配的空间中，但是引用类型保存在栈内存中的变量是一个地址，这个地址指向的是堆内存中的对象，所以这个变量其实复制了一个地址，两个地址指向同一个对象，改变其中任何一个变量都会互相影响。
6.讲一讲vuex?
vuex是用来存储数据的状态管理，用于各个组件间的通信，他有五个属性：1.state，用来数据的初始化，定义公共数据
2.action:发起异步请求
3.mutation:提交更改数据的方法，同步！
4.getters:
7.vue2.0和vue3.0的不同
1.初始化就存在着⼀定区别，⽐如vue3.0可以在安装脚⼿架同时提前安装好⼀些项⽬开发必备的插件，并且3.0提供了可视化创建脚⼿架，可以更加⽅便的对插件和依赖进⾏管理和配置，同时两个版本的⽬录结构也是有些许差别的
2.数据和方法的定义
Vue2使⽤的是选项类型API（Options API），
Vue3使⽤的是合成型API,数据和⽅法都定义在 setup中，并统⼀进⾏return{}
生命周期也不一样。
3.在双向绑定上的区别
vue2.0是利用一个API,Object.definePropert()对数据进⾏劫持结合发布订阅模式的⽅式来实现的.不能直接给一个对象删除和增加一个属性。需要借助this. s e t 或者 V U E . s e t 给对象新增一个属性。或者 t h i s . set或者VUE.set给对象新增一个属性。或者this. set或者VUE.set给对象新增一个属性。或者this.delete删除一个对象的属性。也不能根据一个数组的下标该表数组的内容。
vue3.0是利用es6 的 ProxyAPI 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽实现对数据的监控。可以直接给一个对象新增和删除一个属性，set()用来新增和修改对象的属性。get()用来读取对象的属性，deleteProperty()用来删除对象的某个属性。
//********
使⽤proxy的优势如下
(1),defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
（2）.可以监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听
4.另外vue3还新增了⼀些内置组件和⽅法，⽐如vue3可以默认进⾏懒观察，使⽤
Function-based API，setup函数，对与插件或对象的⼀个按需引⼊，Computed Value ，新加⼊了 TypeScript 以及 PWA 的⽀持等等… 这⾥着重说⼀下vue3的⼀个按需引⼊Vue2.x中 new出的实例对象，所有的东西都在这个vue对象上，这样其实⽆论你⽤到还是没⽤到，都会跑⼀遍，这样不仅提⾼了性能消耗,也⽆疑增加了⽤户加载时间。
⽽vue3.0中可以⽤ES module imports按需引⼊，如：keep-alive内置组件、v-model指令，等等，不仅我们开发起来更加的便捷，减少了内存消耗，也同时减少了⽤户加载时间，优化⽤户体验。
2023年3.24日面试
1.vuex在什么场景下会使用到他？
vuex是什么？
vuex是一个用来管理组件之间通信的插件，它是一个专为【vue.js】应用程序开发的状态管理模式，它解决了组件之间同一状态的共享问题，它能够更好地在组件外部管理状态。
为什么需要vuex？
当多个组件依赖于同一个状态时，由于多层组件之间的嵌套使得传参数的方法变得更加复杂，另外如果使用父子组件直接饮用或者通过事件来变更和同步状态的多酚拷贝，会使得该模式变得脆弱，从而无法维护代码。
什么时候什么情况下使用vuex？
构建一个中大型单页应用，需要考虑到如何更好地在组件外部管理状态。
注意：如果不是开发大型单页应用，使用vuex可能是繁琐冗余的，也就是本来很快就可以开发完成的项目，用了vuex，结果却复杂了。一般简单的store模式就可以了。
vuex的五大属性
state, getters, mutations, actions, modules。
1. state：vuex的基本数据，用来存储变量
2. getter：从基本数据(state)派生的数据，相当于state的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
2.v-model的原理？
原理分两步骤

v-bind绑定一个value属性 v-on指令给当前元素绑定input事件可看出v-model绑定在表单上时，v-model其实就是v-bind绑定value和v-on监听input事件的结合体
v-model = v-bind:value + v-on:input
实现用v-bind:value + v-on:input来模拟实现v-model
<input type=“text” :value=“username” @input=“username = $event.target.value”
3.首页加载慢怎么处理（性能优化）
https://blog.csdn.net/weixin_43343980/article/details/127294000
4.window.href跟router的区别
使用location.href=‘/url’来跳转,简单方便,但是刷新了页面:
使用history.pushState(’/url’),无刷新页面,静态跳转:
引进router,然后使用router.push(‘/url’)来跳转,使用了diff算法,实现了按需加载,减少了dom的消耗.其实使用router跳转和使用history.pushState()没什么差别的,因为vue-router就是用了history.pushState(),尤其是在history模式下.
5.怎么封装一个组件
　1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。　　　
　　2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。
　　3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
　　4. 封装完毕了，直接调用即可。
6.webpack打包完成后如何改它的页面
求解答
7.动态定向路由怎么实现
8.单页面和多页面的区别
1.SPA单页面顾名思义就是指只有一个页面的web应用，进入页面只需要加载一次相关资源（css、js等），所有内容都包含在此页面中，对每一个功能内容做组件化。单页面应用跳转，就是切换相关组件，仅仅只是刷新局部资源.
2.MPA多页面应用：指有多个独立页面的web应用，且进入每个页面都必须重复加载相关资源（js、css等）。多页面应用的跳转，需要整页资源刷新。

2023前端面试整理合集相关推荐
1. 太棒了！2018-2020前端经典面试题整理合集，还附带大厂面试题分享！
  2018到2020年,3年经典面试题整理合集,话不多说,直接上题. 1,盒模型 1.1,ie 盒模型算上 border.padding 及自身(不算 margin),标准的只算上自身窗体的大小 css ...
2. 【FPGA】面试问题及答案整理合集
  面试问题及答案整理合集 1.硬件描述语言和软件编程语言的区别 2.FPGA选型问题 3.建立时间和保持时间问题 3.亚稳态问题 4.竞争和冒险问题 5.乒乓操作问题 6.同步和异步逻辑电路 7.同步复 ...
3. Fwcms模板建站常见问题整理合集解答
  Fwcms模板建站常见问题整理合集解答 Fwcms.cn推出模板建站系统,用户可通过网站直接自助下单,实现自助建站,模板建站主要针对网站建设小需求客户,最大的优点就是价格低.速度快,如果选用海外空间, ...
4. 07年博士考题整理合集！
  上二医2004及以前内分泌和生化考博试题.rar 中国科学院2000-2004年博士入学部分考题.txt 浙江大学2006年传染病学博士(秋)入学考试试题.txt 同济医学院06妇产科博士入学考题.t ...
5. 【推荐】数字化转型和案例及IT规划资料整理合集
  数字化转型(Digital transformation)是建立在数字化转换(Digitization).数字化升级(Digitalization)基础上, 进一步触及公司核心业务,以新建一种商业模式 ...
6. 蓝桥杯大赛决赛整理合集（B组C/C++）
  蓝桥杯大赛决赛整理合集(B组C/C++) 根据大纲梳理一遍,也在全文最后补充了最几年的决赛真题,全文基于C++编写,希望对你有所帮助关于省赛的反思: 1.我的Code::Block 20.03在机房 ...
7. 《OSChina每日一博》2018年05月整理合集
  <OSChina每日一博>2018年05月整理合集简介收录开源中国每日推荐的优秀博客文章,开源中国每日会推荐一篇比较优秀的博客文章,称之为每日一bo,文章实属精品,收藏于此,供自己慢慢 ...
8. PyTorch 常用代码段整理合集
  PyTorch 常用代码段整理合集来源:知乎作者:张皓众所周知,程序猿在写代码时通常会在网上搜索大量资料,其中大部分是代码段.然而,这项工作常常令人心累身疲,耗费大量时间.所以,今天小编转载了知 ...
9. 【推荐】智慧教育，智慧课堂研究分析资料整理合集
  智慧教育即教育信息化,是指在教育领域(教育管理.教育教学和教育科研)全面深入地运用现代信息技术来促进教育改革与发展的过程.其技术特点是数字化.网络化.智能化和多媒体化,基本特征是开放.共享.交互.协作 ...
最新文章
热门文章

2023前端面试整理合集

2023前端面试自我整理

2023前端面试整理合集相关推荐

最新文章

热门文章