2022前端面试总结及答案


文章目录
一、vue3.0篇
二、vue2.0篇
1. vue生命周期?
2. vuex是什么?以及组件传值?3.vue中自定义指令如何使用?
4. 自定义指令的生命周期
5. vue中的过滤器如何使用?
6.组件通信?
1. 父子组件之间传值(五种方式)
- 父组件设置属性传,子组件通过props接收
- this.p a r e n t 和 t h i s . parent和this.parent和this.children也可以获取到子组件的值
- 父组件provide提供变量 子组件inject注入需要的数据
- $ attrs、$listeners
- slot插值传值
2. 非父子组件(三种方式)
- 子组件$emit触发,父组件on监听
- Vuex,commit进仓库,然后使用getters获取
- 公共bus
7. 请解释一下vue中的单向数据流的理解?
8. 请说什么是动态组件,如何使用,以及keep-alive的作用
9. 第一次页面加载会触发哪几个钩子?
10.简述每个周期具体适合哪些场景
11.$nextTick的使用
12.assets和static的区别?
13.vue常用的修饰符
14.Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?
15. v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?
16.Vue组件data为什么必须是个函数而Vue的根实例则没有此限制?
17.你知道vue中key的作用和工作原理吗?说说你对它的理解。
18.你怎么理解vue中的diff算法?
19. 谈一谈对vue组件化的理解?
20. 谈一谈对vue设计原则的理解?
21. 你了解哪些Vue性能优化方法?
22. 单页面应用和多页面应用区别及优缺点
23. 父子组件之间的生命周期顺序
24. vue中组件创建的方式有哪些?
25. 在Vue中怎么添加一个超链接?
26. Vue中EventBus的实现
27. vue组件的全局注册和局部注册
28.vue数据双向绑定的原理(2.0和3.0)
29. 虚拟doms
30. Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
31. 路由守卫
- 全局钩子有beforeEach、beforeResolve(2.5后新增)、afterEach
- 单个路由独享beforeEnter
- 组件路由守卫:beforeRouteEnter,beforeRouteUpdata,beforeRouteLeave
32. vue如何引入第三方库,比如jquery?
33. vue要做权限管理该怎么做,如果控制到按钮级别的权限该怎么做?
34. vue和jQuery的区别
35. 引进组件的步骤
36. slot
37. MVVM模式和MVM模式
38. Vue监听键盘事件
39.Watch怎么深度监听对象变化
40.Vue路由实现的原理?
2.history
41.Vue的路由如何传参?以及params和query的区别?
42.关于Vue的优缺点,你知道哪些?
43.vue中使用mixins
44.组件化和模块化的区别?
45.vue数据丢失的4中情况&解决方法
三、axios请求
1.axios的特点有哪些?
2. axios有哪些常用方法?
3. 封装axios
四、AJAX
1.什么是ajax?
2.ajax轮询?
四、ES5
五、ES6
六、ES7
- Array.prototype.includes()
- 求幂运算Math.pow(3, 2)
七、ES8
1.async await
2.Object.entries()和Object.values()
- Object.entries()
- Object.values()返回键值中的值
3.字符串填充:padStart和padEnd
4.Object.getOwnPropertyDescriptors()
八、移动端
1、移动端怎么做不同机型的适配
1.设置Meta
2.css3媒介查询
3.设置rem
第二种lib-flexible + px2rem-loader
2、移动端项目如何解决300ms延迟问题?
3、点击穿透
4、px,em,rem,vw,vh代表什么?
5、如何把px转为rem?
九、CSS
1.垂直水平居中
1.知道宽高,父元素relative,子元素absolute,top&left是50%,margin-top和margin-left再拉回自身高宽的一半
2.不知道宽高,子元素absolute + transform
3.子元素设为行内元素display: inline-block;vertical-align: middle水平居中;liine-height: initial;垂直居中
4.flex布局(无语,千万别记反)
2.display的相关
3.清除浮动
4. 用纯CSS创建一个三角形的原理是什么?
5.为什么要初始化CSS样式
6. absolute、fixed、relative
7. flex布局
8.圣杯模式
9.双飞翼模式
10.CSS浏览器前缀兼容写法
11.上下两个盒子的margin一个是20,一个是30,他们两的间距是多少?
12.什么是BFC?
13.IE盒子模型和标准子模型的区别?
十、C3
2.优雅降级和渐进增强的区别?
十一、H5
十二、跨域
1. vue中的proxy
2. jsonp跨域(只能get请求)
3. CORS(后端设置)
4.nginx
十三、算法
1.数组去重
十四、JavaScript
1.闭包
2. 构造函数、原型、原型链
2.继承
3.事件冒泡、事件委托、事件捕获
3. 什么是面向对象?什么是面向过程?
3.1面向对象编程:
3.2面向过程编程:
3.3 解决办法:使用对象:解决全局变量污染的问题(工作中最常用的方式)
3.4使用原型可以同时解决上面三个弊端
4.js异步宏任务和微任务
十五、Jquery
11.1为什么使用jquery,有什么优点?
11.2 jQuery中的选择器
11.3 jQuery的美元符号$有什么作用?
11.4 window.onload和$(document).ready()
11.5使用jQuery中的动画
11.6jQuery中使用过哪些插入节点的方法,他们的区别是什么
11.7jQuery中如何来获取和设置属性
11.8如何来设置和获取HTML和文本的值?
11.9jQuery中有哪些方法可以遍历节点?
11.10说出jQuery中常见的几种函数以及他们的含义是什么?
11.11jQuery使用ajax
十六、前端安全问题
- xxs跨站脚本攻击(恶意注入html代码)
- CSRF攻击(跨站请求伪造)
- SQL注入攻击
十七、浏览器
1cookie、seesion、token的异同点
1.1 cookie
1.2 seesion
1.3 token
2.前端本地缓存的三种方式
2.1 sessionStorage
2.2 localStorage
2.3 Cookies
十八、手写代码
6.继承
十九、react篇
1. 什么是React?
2.React有什么特点?
3. React有哪些限制?
4. 什么是JSX?
5. 你了解 Virtual DOM 吗?解释一下它的工作原理。
6. 为什么浏览器无法读取JSX?
7. 与ES5相比,React的ES6语法有何不同?

一、vue3.0篇

https://blog.csdn.net/weixin_44700978/article/details/109301851

生命周期?

vue生命周期分为八个阶段:创建前后,挂载前后,更新前后,销毁前后

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

2. vuex是什么?以及组件传值?
vue的状态管理框架,数据持久化。
this.s t o r e . c o m m i t ( ) 进 仓 库 t h i s . store.commit()进仓库 this.store.commit()进仓库this.store.state()取值
具体看:https://blog.csdn.net/weixin_44700978/article/details/109193214

3.vue中自定义指令如何使用?
两种使用方式:

  • 局部注册
//VUE文件:



  • 全局注册

    1. 新建一个文件directive/directives.js利用Vue.directive()并暴露

import Vue from 'vue';
Vue.directive('focus',{
 //当绑定元素插入到DOM中
 inserted: function(el){
  el.focus(); //元素聚焦
  el.setAttribute('placeholder','自定义内容');
 }
})
Vue.directive('***',{
 inserted: function(el){
  //....
 }
})
export {Vue}

       2. main.js引入

import directive from './components/global/directives';

    3. 页面使用


    4. 如果指令需要传值或者多个值


 
---------- 参考地址:https://www.gxlcms.com/JavaScript-53105.html

4. 自定义指令的生命周期

bind,inserted,update,componentUpdated,unbind

1>bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2>inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
3>update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
4>componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5>unbind:只调用一次,指令与元素解绑时调用。

5. vue中的过滤器如何使用?

使用在双花括号插值和 v-bind 表达式
局部过滤器权重大于全局过滤器

  • 局部过滤器:filters
var vm = new Vue({
    el: '#app',
    data: {
       msg: '温小鹿'
    },
    methods: {},
    //定义私用局部过滤器。只能在当前 vue 对象中使用
    filters: {
       dataFormat(msg) {
           return msg+'xxxxx';
       }
    }
});
  • 全局过滤器:创建 Vue 实例之前全局定义过滤器:
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

6.组件通信?
1. 父子组件之间传值(五种方式)
- 父组件设置属性传,子组件通过props接收
- this.p a r e n t 和 t h i s . parent和this.parent和this.children也可以获取到子组件的值
- 父组件provide提供变量 子组件inject注入需要的数据

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}
// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}
官网文档写的很清楚了:https://cn.vuejs.org/v2/api/#provide-inject

  

- $ attrs、$listeners

https://zhuanlan.zhihu.com/p/388016979

- slot插值传值

子组件slot通过属性传递
父组件v-slot="slotProps" 或者slot-scope="slotProps"(2.6+废弃)

 参考:https://www.jianshu.com/p/758d9780dab8
https://juejin.cn/post/7009854993284988941

2. 非父子组件(三种方式)

https://blog.csdn.net/weixin_44700978/article/details/108954892

https://blog.csdn.net/weixin_44700978/category_9544881.html