面试题背诵,回答的思路和模板,思路清晰

一、总体上

1、回答每个题目时,*最好能够联系项目的场景*(前提是:你是知道的),这样会让对方很满意,这也是为什么,同样是回答上了,但是面试结果好坏不同。

2、回答时,一定要带上序号,如:第一、第二; 首先、其次;

3、对80%的面试题需要达到理解:

1)、把面试题的答案,以前的课堂视频,课堂案例统一进行整理,特别是自己的薄弱点。 ​ 2)、可以在背诵面试题的同时,敲一下代码。加深印象和理解。眼过千遍不如手敲一遍

4、背诵时,最好沿着:输入===》理解===》输出的思路。不要只停留在输入(背诵)的步骤中。

如:

输入:背诵完一道题目,把答案输入到大脑中。

理解消化:把答案盖住,大脑思考回忆,如果这个步骤中,效果不好,就需要观察答案中的描述逻辑,每一步在描述哪些问题,有没有联系,找出关键词等等。

输出:写出来。写的时候,把序号带上,缩进,对齐都做好,格式整齐了,就能带动背诵时的思路清晰。

二、题目进行分类

答案和模板参考:VUE面试题系列01(带数字,带序号),前端面试题-CSDN博客

1、两个知识点的区别:

先说相同点,再说不同点(不同点要分维度,分出维度才好理解)。

如:

v-show 与 v-if 有什么区别?

一、相同点:

v-show和 v-if都是 控制 dom元素 的 显示和隐藏 的。

二、不同点:

1、原理不同:

v-if是通过dom元素的删除和添加,来完成显示和隐藏,

    v-show是通过修改样式属性display的值,来完成显示和隐藏。

2、性能消耗的不同

      v-if的性能损耗体现在切换时,

      v-show的性能损耗在首次(特别是首次处于的显示的情况下)

3、使用场景的不同

        v-if使用在元素切换不频繁的场景。

        v-show使用在元素切换频繁的场景。

4、安全性的不同

      v-if的安全性好

      v-show的安全性不好。

再如:

请问 cookie,localStorage,sessionStorage 的区别

相同点:

cookie,localStorage,sessionStorage都是在客户端保存数据的,存储数据的类型:都是字符串。

不同点:

1、生命周期:

1)、cookie如果不设置有效期,那么就是临时存储(存储在内存中),是会话级别的,会话结束后,cookie也就失效了,如果设置了有效期,那么cookie存储在硬盘里,有效期到了,就自动消失了。

2)、localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。

3)、sessionStorage仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。

可以简单的理解为:sessionStorage,没有设置有效期的cookie。

    如果说把cookie的有效期设置为永远永远,永久,那么就是localStorage。
    cookie没有设置有效期,那么就是sessionStorage

2、网络流量:

cookie的数据每次都会发给服务器端,而localstorage和sessionStorage不会与服务器端通信,纯粹为了保存数据,所以,webstorage更加节约网络流量。

3、大小限制:

cookie大小限制在4KB,非常小;localstorage和sessionStorage在5M

4、安全性:

WebStorage不会随着HTTP header发送到服务器端,所以安全性相对于cookie来说比较高一些,不会担心截获。

5、使用方便性上【这一点可以不说】

WebStorage提供了一些方法,数据操作比cookie方便;

setItem (key, value) —— 保存数据,以键值对的方式储存信息。 getItem (key) —— 获取数据,将键值传入,即可获取到对应的value值。 removeItem (key) —— 删除单个数据,根据键值移除对应的信息。 clear () —— 删除所有的数据 key (index) —— 获取某个索引的key

2.碰到优缺点的描述:

直接按照序号的方式描述,如果担心自己会忘掉一些点,一开始不要说总数,直接说序号。

如:

说说你对 SPA 单页面的理解,它的优缺点分别是什么?

首先:

SPA的英文是single-page application ,也就是说整个项目中只有一个页面

单页面应用的实现思路: 就是在 Web 页面初始化时加载所有的 HTML、JavaScript 和 CSS,页面的内容的变化,靠动态操作DOM。

其次,

说说它的优点和缺点:

它的优点有三点:

第一点:局部刷新。用户体验好、快,内容的改变不需要重新加载整个页面。

第二点:服务器的压力小。基于上面一点,SPA 对服务器的压力小;

第三点:前后端职责分离。架构清晰,前端进行交互逻辑,后端负责数据处理;

它的缺点也有三点:

第一点:初次加载耗时多。为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载;

第二点:**前进后退路由管理问题。**由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理(这是vue-router做的);

第三点:SEO 难度较大。由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。 ———————————————— 版权声明:本文为CSDN博主「田江」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:VUE面试题系列01(带数字,带序号),前端面试题-CSDN博客

3.谈谈你对某某问题的理解和了解?(这种题目描述比较模也是比较常见的)

基本上按照如下思路,有哪个说哪个:

(1)是什么(what):技术的作用和意思(简练),

(2)有什么(have)

(3)怎么用,(how)

(4) 什么地方用(where)项目场景

(5)如果能够进一步说原理最好。(为什么 why)

如:

谈谈你对 Vue 生命周期的理解?

1)、生命周期是什么?

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

2)、生命周期有四个阶段和八个钩子函数

vue的生命周期核心经历了四个阶段,在四个阶段的前后分别有两个钩子函数。

第一阶段:数据挂载阶段:把配置项data中的属性,赋给了vue对象本身,并做了数据劫持。

    该阶段前后的两个钩子函数:beforeCreate和created

第二阶段:模板渲染阶段:把vue对象的数据渲染到模板上。

    该阶段前后的两个钩子函数:beforeMount和mounted

第三阶段:组件更新阶段:当数据发送变化时,组件会进行重新渲染,所以,准确的说是,组件重新渲染阶段。

    该阶段前后的两个钩子函数:beforeUpdate和updated

第四阶段:组件销毁阶段:组件销毁。

该阶段前后的两个钩子函数:beforeDestroy和destroyed

可以补充:

当使用keep-alive包裹组件时,会有组件激活和停用之说,这两个钩子函数分别是:activited和deactivated 1 还可以补充:

项目场景, 1)、(当页面初始的数据来自后端)发送请求在哪个钩子函数,created。为什么,请看第八个题。 2)、在destroyed钩子函数里销毁不使用的全局性(挂载window对象下)的对象:定时器、清除事件总线绑定的事件。

再如:

谈谈你对vueX的理解
 

1、vueX是干什么的

1)、vuex能够保存全局数据,供整个应用使用,可以在组件之间传递数据。

2)、vuex保存的数据是响应式的

3)、vuex保存的数据可以跟踪状态的变化

2、vueX的核心概念(有什么)

state : 数据仓库 ,存储所有的 共享数据 ,相当于vue组件里的data

getter : 在state的基础上 派生的数据, 相当于vue组件里 computed

mutation:修改state的数据时,用mutation,这与跟踪状态 有关系

action:解决mutation里只能有同步代码的问题,action里可以有异步代码

modules:模块化的解决方案

3、vueX的数据流

组件里 dispatch(派发)vueX中的 action,action里commit(提交)mutation,mutation里修改state。state被修改后,会响应式到组件上。

4、辅助函数

现在的面试,都会问的比较多。而且在项目中大部分都会使用辅助函数来简化项目中的代码。

有了这些辅助函数后,在组件里,不用再写$store了。

mapState:把vuex中state(状态)映射(合并)到组件对象的computed上。直接使用计算属性就可以拿到vuex的状态

mapGetters:把vueX的getters映射到组件的computed上。

mapMutations:把vueX的mutations映射到组件的methods上。

mapActions: 把vueX的actions映射到组件的methods上。

5、modules

当项目比较大时,所有的全局数据存放在state里,会非常混乱,怎么办?使用module,把数据分门别类的进行处理,即:模块化。 每个模块是一个独立的store。然后由总体的store引入所有的分模块store。

再如:

路由守卫

1、什么是路由守卫

控制组件的跳转,对是否能够进入某个路径对应组件做限制。根据业务逻辑来判定是否可以进入某个组件。

什么时候使用路由守卫:当进入某个路径时,会有限制。就需要使用路由守卫。

2、路由守卫有哪些分类及其对应的钩子函数

1)、全局守卫

     1)、前置钩子:beforeEach,当地址栏的路径发生变化时,会先调用该钩子函数。

     2)、后置钩子:afterEach,当路由匹配成功后,先调用该函数,然后才创建组件。

2)、路由独享守卫

     1)、只有前置:beforeEnter:当匹配到某个指定的路由后,会先调用该函数,然后再创建组件。

3)、组件内部守卫

        1)、前置:beforeRouteEnter:当路由匹配成功后,进入组件前,先调用该函数。

        2)、路径更新,组件复用:beforeRouteUpdate: 当地址栏路径发生变化,但是进入的组件和上一个组件是同样的情况下,会调用先该函数。如:

        3)、离开:beforeRouteLeave:当通过路由的方式离开某个组件前,会调用该函数。

3、路由钩子函数的参数:

to:想去哪个路由,to和$route是同样的对象

from:来自哪个路由对象,from和$route是同样的对象

next:下一步何去何从。

next(true):默认就是true,表示继续前行

next(false):不能前行

next(路径字符串或者对象):跳转到指定的路径。

4.碰到:“为什么要使用*”时,

可以先说,不使用它会出现的问题。

如:

vue组件中 data 为什么是一个函数?

因为data是引用类型,如果不用函数,复用的组件的data会指向同一块内存区域,导致数据之间互相影响。

而使用函数时,每次实例化组件时,会调用data函数,return一个新(new)的对象。这样每个实例可以维护一份被返回对象的独立的拷贝,组件实例之间的 data 属性值不会互相影响。

5、在碰到大段详细的描述时:

(1)流程清晰:对文字进行整理。

(2)如果流程不是很清晰,建议,结合项目场景进行描述。

6.问原理性的题目:

需要解释原理的思路和牵扯到的每个原生知识点的目的,作用。带上序号最好

如:

vue2响应式原理

深入响应式原理 — Vue.js

vue2响应式的原理是借助数据劫持发布订阅者模式来完成的。

1、数据劫持:

目的:能够感知到数据的改变。

数据劫持是:使用ES5的Object.defineProperty()。把data配置项中的所有数据进行遍历,转成setter和getter(或者说,给每个属性增加set和get函数)既就是:访问器属性。

2、发布订阅者模式:

目的:当数据改变时,(直接和间接)使用该数据的模板处都会有相应的改变(模板会重新渲染)。

可能对方会进一步追问:能不能说的详细点。

怎么回答?

1)、在vue构造函数里,循环变量data中所有属性。首先,保存属性的值,再利用Object.defineProperty()给每个属性增加setter和getter方法。然后,每个属性再new 一个自己的Watcher对象(订阅对象)进行监听,让所有使用该属性的dom元素都订阅该属性。同时,在set函数里会发布。(发布就相当于调用render函数,重新渲染页面)。

2)、当修改某个属性的值时,该属性的set函数就被调用,同时会调用所有订阅该属性的订阅者(函数)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/182418.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于合成数据的行人检测AI模型训练

在线工具推荐: 三维数字孪生场景工具 - GLTF/GLB在线编辑器 - Three.js AI自动纹理化开发 - YOLO 虚幻合成数据生成器 - 3D模型在线转换 - 3D模型预览图生成服务 近年来,自动驾驶汽车因其对社会的广泛影响而越来越受欢迎,因为它们提高…

删除排序链表的重复元素I和II,多种解法和思考

删除排序链表的重复元素I https://leetcode.cn/problems/remove-duplicates-from-sorted-list/description/ 一个循环就可以了,如果当前节点和下一个节点值一样,当前节点不移动让next后移动一个,如果不一样则当前节点后移。 一个循环就可以…

代码混淆的原理和方法详解

代码混淆的原理和方法详解摘要移动App的广泛使用带来了安全隐患,为了保护个人信息和数据安全,开发人员通常会采用代码混淆技术。本文将详细介绍代码混淆的原理和方法,并探讨其在移动应用开发中的重要性。 引言随着移动应用的普及,…

【hacker送书第6期】深入理解Java核心技术

第6期图书推荐 内容简介作者简介精彩书评参与方式 内容简介 《深入理解Java核心技术:写给Java工程师的干货笔记(基础篇)》是《Java工程师成神之路》系列的第一本,主要聚焦于Java开发者必备的Java核心基础知识。全书共23章&#xf…

高级IO—poll,epoll,reactor

高级IO—poll,epoll,reactor 文章目录 高级IO—poll,epoll,reactorpoll函数poll函数接口poll服务器 epollepoll的系统调用epoll_createepoll_ctlepoll_wait epoll的工作原理epoll的工作方式水平触发边缘触发 epoll服务器 reactor poll函数 poll函数是一个用于多路复用的系统调…

STM32之定时器--PWM控制SG90舵机

目录 1、PWM介绍 1.STM32F103C8T6 PWM资源: 2.PWM输出模式 3.PWM周期与频率 4.不同IO口输出PWM相对应连接到定时器的那一路 2、sg90舵机介绍及实战 1.sg90舵机介绍 2.代码实现 1.codeMX配置 2.用到的HAL库函数 1.开始产生PWM信号 返回状态值 2.修改比较…

AST反混淆实战|hcaptcha验证码混淆js还原分析

关注它,不迷路。 本文章中所有内容仅供学习交流,不可用于任何商业用途和非法用途,否则后果自负,如有侵权,请联系作者立即删除! 1.实战地址 https://newassets.hcaptcha.com/c/bc8c0a8/hsw.js 将上面…

Mysql——替换字段中指定字符(replace 函数)

一、简介 函数将字符串中出现的所有子字符串替换为新的子字符串。 REPLACE() 函数是基于字符的替换,并且替换字符串时是区分大小写的。 二、语法 这里是 MySQL REPLACE() 函数的语法: REPLACE(str, from_str, to_str)参数 str 必需的。 原字符串。 …

【华为OD题库-047】求最小步数-java

题目 求从坐标零点到坐标点n的最小步数&#xff0c;一次只能沿横坐标轴向左或向右移动2或3. 注意:途径的坐标点可以为负数 输入描述 坐标点n 输出描述 输出从坐标零点移动到坐标点n的最小步数 备注 1< n < 10^9 示例1: 输入 4 输出 2 说明 从坐标零点移动到4&#xff0c;…

Python+requests+Jenkins接口自动化测试实例

在做功能测试的基础上&#xff0c;我平时也会用postman测试接口&#xff0c;不过postman只能测试一个一个接口&#xff0c;不能连贯起来&#xff0c;特别是我们公司的接口很多都是要用到token的&#xff0c;导致我每次测个需要登录的接口都要去获取到token&#xff0c;做了很多…

Excle无法在受保护的视图中打开该文件

Excle无法在受保护的视图中打开该文件 解决方案&#xff1a;

MAC笔记本里Spyder python 的安装问题 和 虚拟环境VENV的创建

芙Spyder 作为python的开发环境还是很好用的&#xff0c;在MAC笔记本里直接下载Spyde安装即可。 安装完成以后目录在&#xff1a; /Applications/Spyder.app/Contents 此目录下有几个子目录如下&#xff1a; Frameworks Info.plist MacOS PkgInfo Resources…

【算法】链表-20231124

这里写目录标题 一、83. 删除排序链表中的重复元素二、206. 反转链表三、234. 回文链表 一、83. 删除排序链表中的重复元素 简单 1.1K 相关企业 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例…

Mybatis 使用枚举作为查询条件

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

(4)BUUCTF-web-[极客大挑战 2019]EasySQL1

前言&#xff1a; 觉得这个题目挺有意义的&#xff0c;因为最近在学数据库&#xff0c;但是不知道在现实中有什么应用&#xff0c;所以学起来也没有什么兴趣&#xff0c;做了这个题目&#xff0c;发现数据库还是挺有用处的&#xff0c;哈哈 知识点&#xff1a; mysql 中and和…

速记:一个保险丝检测电路

一个保险丝检测电路 保险丝熔断&#xff1a;红灯亮 保险丝正常&#xff1a;绿灯亮 同样的&#xff0c;仿真中的指示灯可以换成其他指示器件。

PTA-2023年软件设计综合实践_9(动态规划法)

7-1 数塔 数塔如图所示&#xff0c;若每一步只能走到相邻的结点&#xff08;图中有数字的方格&#xff09;&#xff0c;则从最顶层走到最底层所经过的所有结点的数字之和最大是多少&#xff1f;测试数据保证结果不大于231−1。 C #include <bits/stdc.h> using namespa…

python每日一题——14合并区间

题目 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输入&#xff1a;intervals …

AIGC:文本生成视频

项目1&#xff1a;GitHub - ai-forever/KandinskyVideo: KandinskyVideo — multilingual end-to-end text2video latent diffusion model 效果未知

IDEA插件:Apipost Helper使用

Apipost-Helper是由Apipost推出的IDEA插件&#xff0c;写完接口可以进行快速调试&#xff0c;且支持搜索接口、根据method跳转接口&#xff0c;还支持生成标准的API文档&#xff0c;注意&#xff1a;这些操作都可以在代码编辑器内独立完成&#xff0c;非常好用&#xff01;这里…