位置: 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、子组件向父组件传递数据
子组件通过 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、statestate 为单一状态树，在 state 中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在 Vue.js 的组件中才能获取你定义的这个对象的状态。
1-2、gettergetter 有点类似 Vue.js 的计算属性，当我们需要从 store 的 state中派生出一些状态，那么我们就需要使用 getter，getter 会接收 state 作为第一个参数，而且 getter 的返回值会根据它的依赖被缓存起来，只有 getter 中的依赖值（state 中的某个需要派生状态的值）发生改变的时候才会被重新计算。
1-3、mutation更改 store 中 state 状态的唯一方法就是提交 mutation，就很类似事件。每个 mutation 都有一个字符串类型的事件类型和一个回调函数，我们需要改变 state 的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。
1-4、actionaction 可以提交 mutation，在 action 中可以执行 store.commit，而且 action 中可以有任何的异步操作。在页面中如果我们要嗲用这个 action，则需要执行 store.dispatch
1-5、modulemodule 其实只是解决了当 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
上一篇：Nodejs安装及npm配置（超详细）(nodejs安装与配置)
下一篇：vue3项目实战中的接口调用方法（一）async/await用法 对axios二次封装 实现异步请求(vue3项目搭建)
