位置: IT常识 - 正文

前端面试题(前端面试题目100及最佳答案)

编辑:rootadmin
前端面试题

目录

1、HTTP缓存机制

2、echarts 在 vue 中怎么引用?

1-1、全局引用:

1-2、局部使用:

3、Vue 组件如何进行传值的?

1-1、父组件向子组件传递数据

1-2、子组件向父组件传递数据

1-3、非父子组件之间传递数据

4、Vuex 的 5 个核心属性是什么?

1-1、state

1-2、getter

1-3、mutation

1-4、action

1-5、module

5、Vue-Router 是干什么的,原理是什么?

6、ES5的继承和ES6的继承有什么区别?

7、定时器的执行顺序或机制?

8、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

9、fetch发送2次请求的原因?

10、http和https的区别?

11、Cookie、sessionStorage、localStorage的区别?

12、Cookie如何防范XSS攻击?

13、你了解的浏览器的重绘和回流导致的性能问题?

14、DOM、BOM对象分别是什么

15、闭包是什么?

16、原型、原型链是什么

17、computed与watch有什么区别

18、new操作符具体干了什么呢?


1、HTTP缓存机制

推荐整理分享前端面试题(前端面试题目100及最佳答案),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端面试题选择题,前端面试题及答案,前端面试题2023八股文,前端面试题宝典app,前端面试题2023,前端面试题vue,前端面试题及答案2023,前端面试题及答案2023,内容如对您有帮助,希望把文章链接给更多的朋友!

浏览器缓存也包含很多内容:

HTTP 缓存、indexDB、cookie、localstorage 等等。这里我们只讨论 HTTP 缓存相关内容。

浏览器缓存分为强缓存和协商缓存

强缓存是利用 http 的返回头中的 Expires 或者 Cache-Control 两个字段来控制的,用来表示资源的缓存时间。

2、echarts 在 vue 中怎么引用?

首先我们初始化一个 vue 项目,执行 vue create echart

接着我们进入初始化的项目下。安装 npm install echarts -S 或 cnpm install echarts -S

安装完成之后,我们就可以开始引入我们需要的 echarts 了,接下来介绍几种使用 echarts 的方式。

1-1、全局引用:

首先在 main.js 中引入 echarts,将其绑定到 vue 原型上:

import echarts from 'echarts'

Vue.prototype.$echarts = echarts;

接着,我们就可以在任何一个组件中使用 echarts 了。

1-2、局部使用:

当然,很多时候没必要在全局引入 ecahrts,那么我们只在单个组件内使用即可,代码更加简单:

import echarts from 'echarts'

可以看到,我们直接在组件内引入 echarts,接下来跟全局引入的使用一样。区别在于,这种方式如果你想在其他组件内用 echarts,则必须重新引入了。

3、Vue 组件如何进行传值的?1-1、父组件向子组件传递数据

父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上,在子组件添加参数 props 接收即可

1-2、子组件向父组件传递数据前端面试题(前端面试题目100及最佳答案)

子组件通过 Vue 实例方法$emit 进行触发并且可以携带参数,父组件监听使用@(v-on)进行监听,然后进行方法处理

1-3、非父子组件之间传递数据

1、引入第三方 new Vue 定义为 eventBus

2、在组件中 created 中订阅方法 eventBus.$on("自定义事件名",methods中的方法名)

3、在另一个兄弟组件中的 methods 中写函数,在函数中发布 eventBus 订阅的方法 eventBus.$emit("自定义事件名”)

4、在组件的 template 中绑定事件(比如 click)

4、Vuex 的 5 个核心属性是什么?

分别是 State、 Getter、Mutation 、Action、 Module

1-1、state

state 为单一状态树,在 state 中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在 Vue.js 的组件中才能获取你定义的这个对象的状态。

1-2、getter

getter 有点类似 Vue.js 的计算属性,当我们需要从 store 的 state中派生出一些状态,那么我们就需要使用 getter,getter 会接收 state 作为第一个参数,而且 getter 的返回值会根据它的依赖被缓存起来,只有 getter 中的依赖值(state 中的某个需要派生状态的值)发生改变的时候才会被重新计算。

1-3、mutation

更改 store 中 state 状态的唯一方法就是提交 mutation,就很类似事件。每个 mutation 都有一个字符串类型的事件类型和一个回调函数,我们需要改变 state 的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。

1-4、action

action 可以提交 mutation,在 action 中可以执行 store.commit,而且 action 中可以有任何的异步操作。在页面中如果我们要嗲用这个 action,则需要执行 store.dispatch

1-5、module

module 其实只是解决了当 state 中很复杂臃肿的时候,module 可以将 store 分割成模块,每个模块中拥有自己的 state、mutation、action和 getter

5、Vue-Router 是干什么的,原理是什么?

Vue-Router 是 Vue.js 官方的路由插件,它和 Vue.js 是深度集成的,适合用于构建单页面应用。Vue 的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在 Vue-Router 单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起 url 和页面之间的映射关系。

“更新视图但不重新请求页面”是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有两种方式:

利用 URL 中的 hash(“#”)

利用 History interface 在 HTML5 中新增的方法

6、ES5的继承和ES6的继承有什么区别?

ES5的继承时通过prototype或构造函数机制来实现。ES5的继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上(Parent.apply(this))。

ES6的继承机制完全不同,实质上是先创建父类的实例对象this(所以必须先调用父类的super()方法),然后再用子类的构造函数修改this。

具体的:ES6通过class关键字定义类,里面有构造方法,类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法,否则新建实例报错。因为子类没有自己的this对象,而是继承了父类的this对象,然后对其进行加工。如果不调用super方法,子类得不到this对象。

7、定时器的执行顺序或机制?

因为js是单线程的,浏览器遇到setTimeout或者setInterval会先执行完当前的代码块,在此之前会把定时器推入浏览器的待执行事件队列里面,等到浏览器执行完当前代码之后会看一下事件队列里面有没有任务,有的话才执行定时器的代码。

8、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

Doctype

本文链接地址:https://www.jiuchutong.com/zhishi/294507.html 转载请保留说明!

上一篇:Nodejs安装及npm配置(超详细)(nodejs安装与配置)

下一篇:vue3项目实战中的接口调用方法(一)async/await用法 对axios二次封装 实现异步请求(vue3项目搭建)

  • 出口退税的条件有哪些
  • 印花税计提缴纳的会计分录
  • 公司购买的意外险属于个人还是公司
  • 企业购买土地如何做账
  • 税控盘抵扣增值税有时间限制吗
  • 支付宝公户可以转私户吗
  • 小企业货币资金1710元正常吗
  • 企业购买房产如何列入投资计划的
  • 失业稳岗补贴要交所得税吗
  • 工资表不给看
  • 印花税缴纳后合计怎么算
  • 没建账的个体户如何交个人所得税?
  • 旅游景区税收标准
  • 专票和普票的税率哪个高
  • 成本票和费用票分别是什么
  • 金三系统客户端插件在哪下载以及安装流程是怎样的?
  • 企业合并以外
  • 收到快递关税做什么科目
  • 生产设备投资入股增值税
  • 政府装修补贴政策
  • 期末增值税如何结转
  • 财务红冲是什么意思
  • 浏览器显示英语怎么设置成中文
  • php循环结构有哪几种语句
  • 经营性支付与非经营性支付
  • 退休返聘人员报销差旅费
  • 委托贷款账务处理
  • php获取文章内容图片
  • php通用分页类
  • 【已解决】VUE3+webpack >5报错问题
  • php读取文件的一部分
  • 元素鼠标失灵了怎么办
  • yolo v1 pytorch源代码
  • 2021劳务分包专票开几个点
  • rmt命令 远端磁带传输协议模块
  • find命令详解查找文件
  • 企业进行清算
  • 计提折旧会计分录例题
  • 个人所得税报税孩子的夫妻双方都报吗
  • 成本费用利润率越高越好吗
  • 汽车租赁费怎么赋码
  • 固定资产投资额是指什么
  • 工会记账凭证怎么记
  • 企业预缴所得税年末应该怎么交税
  • 出口退免税的条件
  • 货物出口销售确认流程
  • 主营业务成本记借方还是贷方
  • 行政事业单位的营业执照叫什么
  • 银行收到货款会计分录怎么做
  • 出口退税综合服务网
  • 房地产公司属于什么企业
  • 车票抵扣税款
  • 软件测试费用明细
  • 事业单位收入是再分配吗
  • 银行回单借贷标志贷表示什么
  • 一次性收入怎么计税
  • sql server 不存在或者拒绝访问
  • win10 build 21277
  • c盘的windows
  • 新买的u盘安全吗
  • win7与vista关系
  • xp系统1
  • 进程process.acore已停止怎么办
  • win1021年更新
  • 找不到config/index taro
  • 你可能不知道的中融新大
  • script_tool_for_windows.bat Windows 环境下的 hosts 一键部署脚本
  • opengl绘制三维图形代码
  • qt5.15教程
  • javascript中匿名函数
  • Android游戏开发读后感
  • batfor循环里变量计算
  • unity鼠标控制物体移动
  • unity脚本api
  • 安卓app活动
  • 浙江省国税电子税务局如何新增企业
  • 建筑工程提前投入使用
  • 企业所得税年度申报时间
  • 交警认可的客货两用车型
  • 财税[2020]25号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设