【前端】项目碰到的面试题整理

一、目录

  1. js 中一个 = 、= 的区别 ?..
  2. es6 语法中将两个对象合并成一个对象,使用什么语法?…
  3. let、const、var 有什么区别?…
  4. jquery 中如何获取当前元素下一个同级元素?…
  5. JS 中的深拷贝与浅拷贝的区别?…
  6. 如何在 JS 中编码和解码 URL…
  7. 请描述一下 cookie,sessionStorage 和 localStorage 的区别…
  8. 什么是 MVVM?…
  9. 你知道 vue2.0 兼容 IE 哪个版本以上吗?…
  10. v-show 和 v-if 的区别?..
  11. 组件之间怎么进行传值?..
  12. 路由的两种跳转方式…
  13. 为什么避免 v-if 和 v-for 一起用?…
  14. computed 和 watch 有什么区别?..
  15. vue 组件的 scoped 属性的作用…
  16. Vue 组件中 data 为什么必须是函数…
  17. route 和 router 的区别是什么?…
  18. 为什么需要 nextTick?..
  19. 请详细说下你对 vue 生命周期的理解…
  20. Vue2.0 中为什么会出现 vue 修改数据后页面没有刷新这个问题?…
  21. 动态给 vue 的 data 添加一个新的属性时会发生什么?怎样解决…
  22. vue 怎么获取 DOM 节点?…
  23. 分析下 vue 项目本地开发完成后部署到服务器后报 404 是什么原因呢?.
  24. vue 能监听到数组变化的方法有哪些?为什么这些方法能监听到呢?…
  25. 怎么将 axios 异步请求同步化处理?…

二、答案

  1. js 中一个 = 、= 的区别 ? = 赋值 === 严格判断,值和类型都相等返回 true == 抽象相等,比较时会先转换类型在作值得比较,只要值相等返回 true
  2. es6 语法中将两个对象合并成一个对象,使用什么语法?
    Object.assign()
  3. let、const、var 有什么区别?
    const 定义的变量不可以修改,而且必须初始化。
    var 定义的变量可以修改,如果不初始化会输出 undefined,不会报错(存在变量提升现象)
    let 是块级作用域,函数内部使用 let 定义后,对函数外部无影响(不存在变量提升)
  4. jquery 中如何获取当前元素下一个同级元素?
    $(当前元素).next()
  5. JS 中的深拷贝与浅拷贝的区别?
    深拷贝递归地复制新对象中的所有值或属性,而拷贝只复制引用。
    在深拷贝中,新对象中的更改不会影响原始对象,而在浅拷贝中,新对象中的更改,原始对象中也会
    跟着改。
    在深拷贝中,原始对象不与新对象共享相同的属性,而在浅拷贝中,它们具有相同的属性。
    6.如何在 JS 中编码和解码 URL
    encodeURI() 函数用于在 JS 中对 URL 进行编码。它将 url 字符串作为参数并返回编码的字符串
    注意: encodeURI()不会编码类似这样字符: / ? : @ & = + $ #,如果需要编码这些字符,请使用
    encodeURIComponent() 节码需要 decodeURIComponent()
    decodeURI() 函数用于解码 js 中的 URL。它将编码的 url 字符串作为参数并返回已解码的字符串
    7.请描述一下 cookie,sessionStorage 和 localStorage 的区别
    相同点:都存储在客户端
    不同点:
    (1).存储大小
    cookie 数据大小不能超过 4k。 sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M
    或更大。
    (2).有效时间
    localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
    sessionStorage 数据在当前浏览器窗口关闭后自动删除。
    cookie 设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭
    (3). 数据与服务器之间的交互方式
    cookie 的数据会自动的传递到服务器,服务器端也可以写 cookie 到客户端
    sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存
    8.什么是 MVVM?
    MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型,也可以在
    Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,
    ViewModel 是一个同步 View 和 Model 的对象。
    在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和
    ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会
    立即反应到 View 上。
    ViewModel 通过双向数据绑定把 View 层和 Model 层连接起来,而 View 和 Model 之间的同步工作
    完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作 DOM, 不需要关注数据状
    态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
    9.你知道 vue2.0 兼容 IE 哪个版本以上吗?
    不兼容 IE8 及以下的
    因为 vue 的响应式原理是基于 es5 的 Object.defineProperty 的,而这个方法不支持 ie8 及以下的
  6. v-show 和 v-if 的区别?
    v-show 是 CSS 切换,v-if 是完整的销毁和重新创建(使用频繁切换时使用 v-show,运行时较少改变使用
    v-if)
    v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 中来回切换;而 v-if 会控制这个 DOM
    节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时,使用 v-show 更能节省性能上的开销;当只
    需要一次显示/隐藏时,使用 v-if 更合理
  7. 组件之间怎么进行传值?
    父组件通过标签上:data=data 方式定义传值
    子组件通过 props 方法接受数据
    子组件通过$emit 方法传递参数
  8. 路由的两种跳转方式
 <router-link to='home'> router-link 标签会渲染为<a>标签,咋填 template 中的跳转都是这
种;
另一种是编程是导航 也就是通过 js 跳转 比如 router.push('/home')
  1. 为什么避免 v-if 和 v-for 一起用?
    当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,通过 v-if 移动到容器元素,不会再重复遍历列表中
    的每个值。取而代之的是,只检查它一次,且不会在 v-if 为否的时候运算 v-for。
  2. computed 和 watch 有什么区别?
    computed 是计算属性,也就是计算值,它更多用于计算值的场景
    computed 具有缓存性,computed 的值在 getter 执行后是会缓存的,只有在它依赖的属性值改变之后,
    下一次获取 computed 的值时重新调用对应的 getter 来计算 computed 适用于计算比较消耗性能的计算场景
    watch 更多的是[观察]的作用,类似于某些数据的监听回调,用于观察 props $emit 或者本组件的值,当
    数据变化时来执行回调进行后续操作无缓存性,页面重新渲染时值不变化也会执行
    当我们要进行数值计算,而且依赖于其他数据,那么把这个数据设计为 computed
    如果你需要在某个数据变化时做一些事情,使用 watch 来观察这个数据变化。
  3. vue 组件的 scoped 属性的作用
    在 style 标签上添加 scoped 属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的;
  4. Vue 组件中 data 为什么必须是函数
    vue 组件中 data 值不能为对象,因为对象是引用类型,组件可能会被多个实例同时引用。
    如果 data 值为对象,将导致多个实例共享一个对象,其中一个组件改变 data 属性值,其它实例也会受到影
    响。
  5. route 和 router 的区别是什么?
    route 是“路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。
    router 是“路由实例对象”,包括了路由的跳转方法(push、replace),钩子函数等。
  6. 为什么需要 nextTick?
    Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM,但有时候业务需要必须对数据更改–刷新
    后的 DOM 做相应的处理,这时候就可以使用 Vue.nextTick(callback)这个 api 了。
  7. 请详细说下你对 vue 生命周期的理解
    总共分为 8 个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
    创建前/后:在 beforeCreated 阶段,vue 实例的挂载元素 e l 和数据对象 d a t a 都为 u n d e f i n e d ,还未初始化。在 c r e a t e d 阶段, v u e 实例的数据对象 d a t a 有了, el 和数据对象 data 都为 undefined,还未初始 化。在 created 阶段,vue 实例的数据对象 data 有了, el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,el 还没有。
    载入前/后:在 beforeMount 阶段,vue 实例的$el 和 data 都初始化了,但还是挂载之前为虚拟的 dom
    节点,data.message 还未替换。在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。
    更新前/后:当 data 变化时,会触发 beforeUpdate 和 updated 方法。
    销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除
    了事件监听以及和 dom 的绑定,但是 dom 结构依然存在
  8. Vue2.0 中为什么会出现 vue 修改数据后页面没有刷新这个问题?
    受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为
    getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
  9. 动态给 vue 的 data 添加一个新的属性时会发生什么?怎样解决
    如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。如果想要使添加的值做到响应式,
    应当使用 s e t ( ) 来添加对象。 22 v u e 怎么获取 D O M 节点?我们在 v u e 中需要操作某一个元素的时候,可以在元素上添加 r e f 属性,使用 set()来添加对象。 22 vue 怎么获取 DOM 节点? 我们在 vue 中需要操作某一个元素的时候,可以在元素上添加 ref 属性,使用 set()来添加对象。22vue怎么获取DOM节点?我们在vue中需要操作某一个元素的时候,可以在元素上添加ref属性,使用refs 来获取到该元素,进
    而进行一些列操作
  10. 分析下 vue 项目本地开发完成后部署到服务器后报 404 是什么原因呢?
    1.检查 nginx 配置,是否正确设置了资源映射条件;
    2.检查 vue.config.js 中是否配置了 publicPath,若有则检查是否和项目资源文件在服务器摆放位置一致。
  11. vue 能监听到数组变化的方法有哪些?为什么这些方法能监听到呢?
    数组的 push、pop、shift、unshift、splice、sort、reverse 七种方法,Vue 源码中对这七种方法重写进行
    重写
  12. 怎么将 axios 异步请求同步化处理?
    使用 asyns/await

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

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

相关文章

抖店如何打造一款爆品?按照这三个阶段做,爆单很简单

大家好&#xff0c;我是电商笨笨熊 做抖音小店不懂得怎么选品&#xff0c;那还怎么出销量&#xff1f; 选品时很多新手最苦恼的问题&#xff0c;不知道从哪里选品更容易选中爆品、不懂得什么样的品才是爆品&#xff0c;更不懂得如何打造一款爆品。 那么今天&#xff0c;我们…

创建影子用户

文章目录 1.认识影子用户2.创建隐藏账户并加入管理员组3.修改注册表3.删除用户4.添加管理员权限 1.认识影子用户 影子用户通常指的是那些在系统用户列表中不可见&#xff0c;但在某些情况下可以进行操作的用户。在内网渗透过程中&#xff0c;当我们拿到shell时&#xff0c;肯定…

android11 如何修改状态栏的背景

修改status_bar.xml &#xff1a; <LinearLayout android:id"id/status_bar_contents"android:background"#1ABC9C"android:layout_width"match_parent"android:layout_height"match_parent"android:paddingStart"dimen/statu…

【重回王座】ChatGPT发布最新模型gpt-4-turbo-2024-04-09

今天&#xff0c;新版GPT-4 Turbo再次在大型模型排行榜上荣登榜首&#xff0c;成功超越了此前领先的Claude 3 Opus。另外&#xff0c;新模型在处理长达64k的上下文时&#xff0c;性能竟能够与旧版在处理26k上下文时的表现相当。 目前GPT-4 Turbo仅限于ChatGPT Plus的用户&…

Nginx服务 重写功能与反向代理

六、重写功能 rewrite Nginx服务器利用 ngx_http_rewrite_module 模块解析和处理rewrite请求&#xff0c;此功能依靠 PCRE(perl compatible regular expression)&#xff0c;因此编译之前要安装PCRE库&#xff0c;rewrite是nginx服务器的重要功能之一&#xff0c;用于实现URL的…

DBA面试总结(Mysql篇)

一、delete与trancate的区别 相同点 1.两者都是删除表中的数据&#xff0c;不删除表结构 不同点 1.delete支持按条件删除&#xff0c;TRUNCATE不支持。 2.delete 删除后自增列不会重置&#xff0c;而TRUNCATE会被重置。 3.delete是逐条删除&#xff08;速度较慢&#xff09…

【linux编译报错】g++: error:elf_x86_64:没有那个文件或目录

背景 gcc版本已经是高版本了&#xff0c;9开头了&#xff0c;但是在IDE编译的时候报错&#xff1a; 但是记得自己没有配置过这种参数&#xff0c;只能一步步查了 解决方法 步骤1&#xff1a;先google看了下别人是否碰到该问题 找到一个解决方法说&#xff1a; 在Makefile中…

配置路由器实现互通

1.实验环境 实验用具包括两台路由器(或交换机)&#xff0c;一根双绞线缆&#xff0c;一台PC&#xff0c;一条Console 线缆。 2.需求描述 如图6.14 所示&#xff0c;将两台路由器的F0/0 接口相连&#xff0c;通过一台PC 连接设备的 Console 端口并配置P地址&#xff08;192.1…

如何在CentOS安装Firefox并结合内网穿透工具实现公网访问本地火狐浏览器

文章目录 1. 部署Firefox2. 本地访问Firefox3. Linux安装Cpolar4. 配置Firefox公网地址5. 远程访问Firefox6. 固定Firefox公网地址7. 固定地址访问Firefox Firefox是一款免费开源的网页浏览器&#xff0c;由Mozilla基金会开发和维护。它是第一个成功挑战微软Internet Explorer浏…

win11电脑驱动怎么更新,windows11更新驱动

驱动是指计算机里软件的程序,硬件的运作离不开驱动的支持,因为驱动就是使得硬件和电脑系统沟通的桥梁。既然驱动如此重要,那么不装肯定不行,如果有问题,也要及时地修复和更新。最近,有位win11用户,想要了解win11电脑驱动怎么更新?接下来,教程会带来两种更新win11驱动的…

LlamaIndex 组件 - Loading

文章目录 一、概览加载Transformations将所有内容放在一起抽象 二、文档/节点概览1、概念2、使用模式文件节点 三、定义和定制文档1、定义文档2、自定义文档2.1 元数据2.2 自定义id2.3 高级 - 元数据定制1&#xff09;自定义LLM元数据文本2&#xff09;自定义嵌入元数据文本3&a…

【数据结构与算法】最大公约数与最小公倍数

最大公因数&#xff08;英语&#xff1a;highest common factor&#xff0c;hcf&#xff09;也称最大公约数&#xff08;英语&#xff1a;greatest common divisor&#xff0c;gcd&#xff09;是数学词汇&#xff0c;指能够整除多个非零整数的最大正整数。例如8和12的最大公因数…

【Java探索之旅】数组使用 初探JVM内存布局

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; Java编程秘籍 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一、数组的使用1.1 元素访问1.2 数组遍历 二、JVM的内存布局&#x1f324;️全篇总结 …

WP免费主题下载

免费wordpress模板下载 高端大气上档次的免费wordpress主题&#xff0c;首页大图全屏显示经典风格的wordpress主题。 https://www.wpniu.com/themes/289.html 免费WP主题 蓝色简洁实用的wordpress免费主题模板&#xff0c;免费主题资源分享给大家。 https://www.wpniu.com/…

基于Springboot+Vue的Java项目-校园管理系统(附演示视频+源码+LW)

大家好&#xff01;我是程序员一帆&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &am…

在Vue项目使用kindEditor富文本编译器

第一步 npm install kindeditor第二步&#xff0c;建立kindeditor.vue组件 <template><div class"kindeditor"><textarea :id"id" name"content" v-model"outContent"></textarea></div> </templa…

浅尝 express + ORM框架 prisma 的结合

一、prisma起步 安装&#xff1a; npm i prisma -g查看初始化帮助信息&#xff1a; prisma init -h查看初始化帮助信息结果&#xff1a; Set up a new Prisma projectUsage$ prisma init [options] Options-h, --help Display this help message --datasource-provider …

JAVA_类和对象(1)

认识面向对象 Java是一门纯面向对象的语言(Object Oriented Program, OOP)&#xff0c;在面向对象的世界里&#xff0c;一切皆为对象。面向对象是解决问题的一种思想&#xff0c;主要依靠对象之间的交互完成一件事情。  面向过程和面相对象并不是一门语言&#xff0c;而是解决…

8thWall vs. AR.js

对于熟悉 JavaScript、WebGL 和 HTML5 等 Web 技术的数字创作者来说&#xff0c;8th Wall 提供了功能丰富且强大的 AR 开发平台&#xff0c;尽管价格较高。 然而&#xff0c;新手开发人员和专注于基于标记的 AR 的开发人员可能会发现 AR.js 更易于使用且更经济实惠。 1、8th Wa…

拉普拉斯金字塔的频谱分析

1. 基本分析 拉普拉斯金字塔分解&#xff0c;主要由以下步骤组成&#xff1a; 对输入图像 L0 进行低通滤波&#xff0c;其中常采用高斯滤波&#xff1b;对低通滤波后的图像进行 1/2 倍率的下采样&#xff0c;这里的下采样通常是指直接取偶行且偶列&#xff08;以 0 开始计&am…