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

二、vue2.0篇

1. vue生命周期？

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文件：
<template>
  <div class="home">
    输入框：<input v-focus>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  },
  created() {},
  methods:{}
};
</script>

　　

• 全局注册

　　　　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. 页面使用

<el-input v-model="input" placeholder="" v-focus></el-input>

　　

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

<body id="example">
 <div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div>
</body>
<script>
 Vue.directive('demo',function(value){
  console.info(value.color); //white
  console.info(value.text) // hello!
 })
 var demo = new Vue({
  el : '#demo'
 })
</script>
----------
参考地址: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. 非父子组件(三种方式)

- 子组件$emit触发，父组件on监听

- Vuex，commit进仓库，然后使用getters获取

- 公共bus

7. 请解释一下vue中的单向数据流的理解？

单向数据流就是：数据总是【向下传递】从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父级传递过来的数据，当尝试在子组件内部修改父组件的数据，vue将报错。
主要是为了组件解耦。（假如子组件可以修改父组件数据，那么一个子组件变化将会引发所有依赖这个数据的子组件发生变化，发生连锁反应，所以vue不推荐子组件修改父组件数据，直接修改props会抛出警告

　　如果要改变父组件的值

 

 

 

8. 请说什么是动态组件，如何使用，以及keep-alive的作用

动态组件：让多个组件使用同一个挂载点，并动态切换。通过使用保留的 元素，动态地绑定到它的 :is 特性，根据:is="组件名"去自动匹配组件，如果匹配不到则不显示。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 动态组件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<button @click='toShow'>点击显示子组件</button>
	<component :is="show"></component>
</div>
 
<script>
 
// 创建根实例
new Vue({
  el: '#app',
  data:{
    show:'first'
  },
	methods:{
		toShow:function(){
			var arr = ["first","second","third"];
			var index = arr.indexOf(this.show);
			if(index<2){
				this.show = arr[index+1];
			}else{
				this.show  = arr[0];
			}
		}
	},
	components:{
		first:{
			template:'<div>这是子组件1<div>'
		},
		second:{
			template:'<div>这是子组件2<div>'
		},
		third:{
			template:'<div>这是子组件3<div>'
		},
	}
})
</script>
</body>
</html>

　　**keep-alive：**是一个抽象组件，它自身不会渲染一个DOM元素。缓存组件内部状态，避免重新渲染，造成性能消耗
keep-alive属性：

• include - 字符串或正则表达式。只有匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

keep-alive有两个生命周期：

• activated:页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
• deactivated：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

keep-alive的用法：

	<keep-alive>
	  <component>
	    <!-- 该组件将被缓存！ -->
	  </component>
	</keep-alive>

　　

9. 第一次页面加载会触发哪几个钩子?

beforeCreate, created, beforeMount, mounted

10.简述每个周期具体适合哪些场景

* beforecreate : 可以在这加个loading事件，在加载实例时触发
* created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
* mounted : 挂载元素，获取到DOM节点
* updated : 如果对数据统一处理，在这里写上相应函数
* beforeDestroy : 可以做一个确认停止事件的确认框
* nextTick : 更新数据后立即操作dom

　　

11.$nextTick的使用

当你修改了data 的值然后马上获取这个 dom 元素的值，是不能获取到更新后的值， 你需要使用 $nextTick 这个回调，让修改后的 data 值渲染更新到 dom 元素之后在获取，才能成功。
什么时候需要 $nextTick？

• Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
• 更改数据后想立即使用js操作新的视图

12.assets和static的区别？

都是存放静态资源文件的，assets打包的时候会编译，static不会编译。assets可以放一些Js会进行编译，static可以放一些第三方文件，比如字体图标

13.vue常用的修饰符

• stop：等同于Js中的event.stopPropagation()，防止事件冒泡
• .prevent:等同于js中的event.preventDefault()，阻止默认事件
• .capture:与事件冒泡的方向相反，事件捕获由外到内
• .self:只会触发自己范围内的事件，不包含子元素
• once: 只会触发一次

 

14.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。

15. v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？

v-for比v-if的优先级更高一些，如果同时出现，每次渲染都会执行循环再判断条件，无论如何循环都不可避免，浪费性能。
解决办法就是：

• 外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环
• 如果条件出现在循环的内部，可通过计算属性提前过滤掉不需要的项

16.Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？

如果使用对象，内存地址是一样的，会污染其他实例的状态。根实例只有一个，就不用担心污染，所以是对象。组件可能存在多个实例，给组件实例创建自己的私有数据空间。

17.你知道vue中key的作用和工作原理吗？说说你对它的理解。

为了高效的更新DOM，通过key可以判断出两个dom节点是否相同，减少dom操作，提高性能

18.你怎么理解vue中的diff算法？

对比新旧节点
当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图。

19. 谈一谈对vue组件化的理解？

组件化
可复用，高内聚、低耦合的；
-遵循单向数据流的原则。

20. 谈一谈对vue设计原则的理解？

• 渐进式JavaScript框架
• 易用、灵活和高效

21. 你了解哪些Vue性能优化方法？

1.路由懒加载

 

 

 

2.keep-alive缓存
https://blog.csdn.net/weixin_42646130/article/details/93333207
3.Webpack优化
1.修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，并且在生成环境是可以通过map去查看到源码的，这样会造成源码泄漏，这里建议大家设置为false。productionGzip设置为true可以开启gzip压缩，使打包过后体积变小。

 

 

 2.使用cdn的方式外部加载一些资源，比如vue-router、axios等Vue的周边插件,在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式引入需要的插件。

 

 

 

 

 

 

4.按需加载

22. 单页面应用和多页面应用区别及优缺点

优点：快。内容改变不需要改变整个页面，局部刷新就行，减少服务器的压力；
缺点：不利于seo搜索. 第一次加载比较慢（不要生成。map文件，这个文件是用来查看样式和结构的，懒加载：异步引入路由页面）

 

23. 父子组件之间的生命周期顺序

• 加载渲染过程

->父beforeUpdate
-> 子beforeUpdate -> 子updated
-> 父updated

• 子组件更新过程

->父beforeUpdate
-> 子beforeUpdate -> 子updated
-> 父updated

• 父组件更新过程

 

父beforeUpdate -> 父updated

• 销毁过程

-> 父beforeDestroy
-> 子beforeDestroy -> 子destroyed
-> 父destroyed

　　

24. vue中组件创建的方式有哪些？

有三种方式，如下：

• 1.使用Vue,extend来创建
• 2.直接使用Vue.component创建
• 3.在被控制的#app外面，使用template元素，定义组件的HTML模板结构

25. 在Vue中怎么添加一个超链接？

<a :href="'https://www.baidu.com'">My site</a>
<a :href="'https://www.baidu.com?p='+id">一个Vue table问题</a>

　　

26. Vue中EventBus的实现

main.js中挂载到原型上

Vue.prototype.$EventBus = new Vue();

　　触发：

this.$EventBus.$emit('eventName', param1,param2,...)

　　监听：

this.$EventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行的代码
})

　　移除监听

this.$EventBus.$off('eventName');

　　

27. vue组件的全局注册和局部注册

• 全局注册在main.js里注册

Vue.component(组件名称，为组件创建时定义的变量)

import goTo from '../component/goTo'
Vue.conponent('goTo', goTo)

• 局部注册

组件局部注册：只有注册了该组件的页面才可以使用

import User from './components/User'
export default {
   name: 'App',
   components: {
      HelloWorld,
      User
   }
}

　　

28.vue数据双向绑定的原理(2.0和3.0)

• 2.0

1.difineProperty挟持各个属性的getter，setter，在数据变动时发布消息给订阅者，触发响应的监听回调
2.observe(观察者)对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者。
3.watch(订阅者)订阅observe并通知compile
4.compile初始化模板并更新视图

• 3.0

　　利用proxy代理整个对象

29. 虚拟doms

原生的js去描述一个DOM节点，速度快，不操作真实的dom，代码不会冗杂
虚拟dom原理流程:
模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM

30. Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

都行，但是vuex里的store是一个全局变量，性能上尽量不使用全局变量，而且vuex是状态管理框架，尽量简而又简单。请求代码放api.js里就可。

31. 路由守卫

- 全局钩子有beforeEach、beforeResolve(2.5后新增)、afterEach

router.beforeEach((to, from, next) => {
  console.log(to) => // 到哪个页面去？
  console.log(from) => // 从哪个页面来？
  next() => // 一个回调函数
}
router.afterEach（to，from） = {}

　　

- 单个路由独享beforeEnter

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: 'Home',
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

　　

- 组件路由守卫:beforeRouteEnter,beforeRouteUpdata,beforeRouteLeave

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
  // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  next(vm => {})
}
beforeRouteUpdate (to, from, next) {
  // 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
  // 离开当前路由页面时调用
}

　　

32. vue如何引入第三方库，比如jquery？
很多方式：
webpack中配置 alias，import 引入
webpack 中配置 plugins，无需 import 全局可用

33. vue要做权限管理该怎么做，如果控制到按钮级别的权限该怎么做？
按钮权限管理
获取权限表，判断用户是否有权限，然后再if判断可选不可选
34. vue和jQuery的区别
vue是框架，jquery是js库。框架是项目的核心，对项目入侵较大，中途想换，不好操作，jquery对项目入侵较小。

35. 引进组件的步骤
Vue.component（）注册 再引进

36. slot
不具名插槽
父组件引入子组件，子组件使用
封装的返回顶部公共的包裹router-view

 

 

 具名插槽

 

 

 

37. MVVM模式和MVM模式

• MVVM
  MVVM就是模型-视图-视图模型层。这个模式实现视图和视图模型层的双向绑定。
  典型的情况是，View Model通过使用obsever模式（观察者模式）来将View Model的变化通知给model。

 

 

关键点：
1、用户和View交互。
2、View和ViewModel是一对一关系，也就意味着一个View只能映射到一个ViewModel。
3、View持有ViewModel的引用，但是View没有任何Model的信息。
4、View 和ViewModel之间有双向数据绑定关系。
MVC
MVC就是模型-视图-控制。通信是单向的。

 

 

 

• 1、View传送指令到Controller
  2、Controller完成业务逻辑后，要求Model改变状态
  3、Model将新的数据发送到View，用户得到反馈

38. Vue监听键盘事件

别名	含义
.enter	鼠标进入
.tab	Tab
.delete	捕获“删除”和“退格”键

 

 

 

 

 

39.Watch怎么深度监听对象变化

第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

　

40.Vue路由实现的原理？

两种方式:

Hash — 默认值，利用 URL 中的hash("#"),刷新不会请求数据
history-- 利用URL中的路径（/home），刷新会请求数据

　　

2.history

前端路由改成history，部署之后，nginx配置try_files指令

 

 

 https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

41.Vue的路由如何传参？以及params和query的区别？

 - router-link  的to去传参
 - this.$router.push() 接收的时候this.$route.params或者this.$route.query
> params和query的区别
> 1、params传参必须配置路由表，name引入路径，请求不会显示在地址栏
> 传参: this.$router.push({ name:'xxx' params:{ id:id } })
> 2、query要用path来引入，请求会显示在地址栏
> this.$router.push({ path:'/xxx' query:{ id:id } })

　　

42.关于Vue的优缺点，你知道哪些？

优点：组件化，数据双向绑定，轻便、高效、易上手，中文文档；
缺点：兼容性差，不利于SEO 优化，第一次加载白屏时间长，容易造成数据丢失。

43.vue中使用mixins

• 局部引入

　　　　写js文件，暴露出去，引入mixins:[名字]，用的时候和当前组件用的一样，{{}}和this.(方法名)

• 全局混入

Vue.mixin({
  created() {
    console.log('全局混入的钩子函数');
  }
});

　　

还有注册引入，这个博主写的很清晰了，就懒了懒了。
https://www.cnblogs.com/fengyuexuan/p/10918011.html

44.组件化和模块化的区别？

组件化和模块化的区别

组件:就是把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用）
模块化开发:分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，独立管理，每个模块有很多接口，可供调用

　　

45.vue数据丢失的4中情况&解决方法

<template>
  <div>
    <div>{{ colors }}</div>
    <div>{{ obj }}</div>
    <div>{{ intro }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colors: ["red", "green", "blue"],
      obj: {},
    };
  },
  mounted() {
    // 1 数组中的值类型修改
    this.colors[1] = "pink";
    // 2 数组中的新成员
    this.colors[3] = "gold";
    // 3 对象中的新属性
    this.obj.size = 200;
    // 4 未初始化的数据
    this.intro = "111111";
  },
};
</script>

　　解决方法：
第1,2种情况 使用新数组替换之前的老数组

this.colors = ["red", "pink", "blue","gold"]

　

第3种情况 使用新对象替换之前的老对象

this.obj = {siz: 200}

　　

第4种情况 初始化这类数据即可

data() {
    return {
      colors: ["red", "green", "blue"],
      obj: {},
      intro: '' // 初始化info
    };
  },

　　

除此之外，还可以使用vue提供的$set方法

this.$set(this.colors, 1, pink)  // 修改数组的数据
this.$set(this.obj, 'size', 200)  // 修改对象的数据

　　

三、axios请求

1.axios的特点有哪些？

1、axios是一个基于promise的HTTP库，支持promise的所有API；
2、它可以拦截请求和响应；
3、它可以转换请求数据和响应数据，并对响应回来的内容自动转换为json类型的数据；
4、它安全性更高，客户端支持防御XSRF

2. axios有哪些常用方法？

 

 

 

3. 封装axios

大概说一些流程吧，后期再补

>  1. 设置开发和生产的请求地址
>  2.设置默认的信息:超时时间、post默认请求头、引入Qs
>  3.设置请求拦截器(携带token或者加loding)
>  4.设置响应拦截器(根据后端返code跳转页面，做出响应)
>  5. `封装get,post请求，统一Api管理

　　

四、AJAX

1.什么是ajax？

异步的JavaScript和XML(传输数据的可扩展标记语言)

2.ajax轮询？

封装一个函数，用setInterval间隔时间去发起请求

  setInterval("函数名()", 500);
     function 函数名(){
       $.ajax({
        url: '/new_window_url/',
            async:true,
            type: '',
            success: function (data) {}
     })
}

async. 默认是 true，即为异步方式，$.ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法，这时候执行的是两个线程。

async 设置为 false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

四、ES5

 

 

 

五、ES6

 

 

 

 

六、ES7

- Array.prototype.includes()

includes()的作用，是查找一个值在不在数组里，若在，则返回true，反之返回false

indexOf()与includes()区别
检测数组或字符串中是否包含某一个元素
indexOf返回的是数值类型，而includes返回的是布尔类型
indexOf不能判断数组中是否含有NaN，而includes可以

let arr = [1,2,3,NaN]
console.log(arr.indexOf(NaN))//-1
console.log(arr.includes(NaN))//true

　　

- 求幂运算Math.pow(3, 2)

七、ES8

1.async await

2.Object.entries()和Object.values()

- Object.entries()

把键值按照二位数组返回。若目标对象是数组时，则会将数组的下标作为键值返回。

Object.values({ one: 1, two: 2 })            //[1, 2]
Object.values({ 3: 'a', 4: 'b', 1: 'c' })    //['c', 'a', 'b']

　　

- Object.values()返回键值中的值
3.字符串填充：padStart和padEnd
4.Object.getOwnPropertyDescriptors()
返回目标对象中所有属性的属性描述符，该属性必须是对象自己定义的，不能是从原型链继承来的

八、移动端

1、移动端怎么做不同机型的适配
1.设置Meta

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
 - initial-scale：初始化缩放，- initial-scale=1.0：不缩放
 - user-scalable：是否允许用户自行缩放，取值0或1，yes或no
 - name:viewport描述网页
 - content:便于搜索引擎机器人查找信息和分类信息用的
 - width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）
 - height: viewport 的高度 （范围从 223 到 10,000 

　

2.css3媒介查询

　

 

 

3.设置rem

• 一种是创建rem.js引入main.js＋下载插件postcss-pxtorem自动把px转为rem
• 另一种是下面这种

第二种lib-flexible + px2rem-loader

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

2、移动端项目如何解决300ms延迟问题？

FastClick

3、点击穿透

1.meta 标签设置 width=device-width 和 user-scalable=0
2. 阻止冒泡event.stopPropagation();
3. 使用fastclick库
4.不要混用touch和click

　　

4、px,em,rem,vw,vh代表什么？

• px是针对于显示屏屏幕分辨率而言的
• em是相对于父元素字体大小
• rem是相对于html元素的
• vw、vh，直接根据视口宽高适配。

5、如何把px转为rem？

1、创建rem.js文件

// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

　　

引自：

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

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