前端一些常见面试题

1、H5新特性：

• 拖拽(抓取对象以后可以拖到另一个位置)
• data-属性
• 语义化标签(header、footer、nav、aside等)
• 视频音频(video、audio)
• canvas
• 本地存储(localStorage、sessionStorage)等

2、C3新特性：

• 边框圆角
• box-sizing
• rgba颜色
• 渐变
• 过渡
• 动画
• 2D转换
• 3D转换
• flex布局
• 字体图标等

3、三种存储方式对比：

• localStorage：长期存储于浏览器，可存储5M,所有同源窗口共享数据
• sessionStorage：浏览器关闭数据就被销毁，也可存储5M，只在同一浏览器窗口共享数据
• cookie：有有效期，可存储4kB，所有同源窗口共享数据，数据会随着请求存储到请求报文中

4、盒子/图片水平垂直居中：

• flex布局
• 子绝父相定位，左、上距离父元素百分之五十，利用transform移动-50%
• 子绝父相定位，上下左右都为0，margin为auto
• display设置成table-cell，text-align设置成center，verticle-align设置为middle

5、css盒模型：

• 盒模型是用来对元素进行布局，包括内外边距、边框、实际宽高几个部分组成；
• 主要分为两种：标准盒模型和怪异盒模型
• 区别是标准盒模型的盒子大小是实际宽高+padding值+margin值+border，而怪异盒模型则不算margin值；
• 实际开发中为了保证元素的占位大小，我们一般会通过box-sizing属性来设置盒模型的解析模式；
• box-sizing属性有两个值，一个是content-box，默认值，另一个是border-box，设置成该属性值后，盒子的宽高就会算上padding值和边框

6、块级元素和行内元素：

• 块级元素：div、ul、li、dl、dt、dd、p、h1-h6等
• 行内元素：span、a、b、img、input、button、textarea等
• 区别是块级元素独占一行，可以设置宽高属性

7、css选择器权重值：

• !important > 行内元素 > ID选择器 > 类选择器 > 标签 > 通配符

8、H5事件：

• onblur失焦事件
• onfocus聚焦事件
• onchange改变事件
• onclick点击事件
• onerror错误事件
• oninput输入事件
• onkeydown键盘按下事件
• onkeyup键盘抬起事件
• onmousemove鼠标移动事件
• onmouseover鼠标进入事件
• onmouseout鼠标移出事件等

9、H5中input元素的type属性值：

• color颜色
• password密码
• text文本
• CheckBox复选框
• radio单选框
• date日期
• button按钮
• submit提交按钮等

10、 js数据类型：

• 基本数据类型有number、string、boolean、null、undefined
• 引用数据类型有object、array
• 可以通过typeof和instanceof判断数据类型，还可以通过Array.isArray区别对象和数组

11、回流和重绘：

• 访问页面的时候浏览器会解析HTML代码并构建dom树，同时css样式也会被解析创建css对象模型树，dom树和css模型树合成渲染树，渲染树和dom树的区别就是当给一个节点设置了display：none的时候，渲染树上面是没有这个节点的，浏览器会根据渲染树进行布局，布局出来的是一个盒模型，它可以精确的捕获到每个节点在视图内的位置和尺寸，这一行为通常被称为回流或者自动重排
• 布局完成后浏览器会立即发出paint setup事件，这个过程被称为绘制，此时页面会被显示在浏览器上
• 当用户在操作浏览器的时候会经常操作重新合成渲染树和paint setup事件，此时就是回流和重绘事件
• 回流必定触发重绘，但重绘不一定触发回流
• 一般节点的布局改变或者宽高的改变，浏览器窗口大小的改变都会触发回流和重绘
• 元素的颜色、透明度、transform改变时只会触发重绘

12、闭包：

，本质上是在函数内部和函数外部搭建一座桥梁，让子函数可以访问父函数中的局部变量；

• 好处就是可以保护变量不受外界污染
• 缺点就是常驻内存，消耗性能，所以开发中很少使用闭包

13、原型和原型链：

• 原型：所有引用类型都有一个--proto--属性，所有的函数都有一个prototype属性，所有引用类型的--proto--属性指向它构造函数的prototype属性
• 原型链：当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，就会去它的--proto--属性上查找，即他的构造函数的prototype，如果还没找到就会继续找他的构造函数的prototype属性，这样一层一层向上查找就会形成一个链式结构，即原型链

14、this指向问题：

• 函数形式调用指向window
• 方法形式调用指向调用对象
• 构造函数调用指向构造函数的实例对象
• 箭头函数看外层是否有函数，如果有外层函数的this就是箭头函数的，如果没有就是window

15、数组中forEach和map：

• 相同点是循环数组每一项，且都有三个参数，分别是item、index、array，只是遍历数组，不会改变原数组
• 不同点：
  • map返回一个新数组，数组中的元素是调用原数组的方法处理后的值
  • forEach是将数组中的每一项作为回调函数的参数进行处理

16、 call、bind、apply ( 函数上下文调用模式 ) ：

• 都是用来更改函数this指向的
• 这三者的第一个参数都是this的新指向
• 第二个之后的参数call和bind是直接传入函数值，而apply第二个参数是数组或伪数组
• bind方法和其他两种方法的不同点在于，bind不会执行该函数，而是返回一个新的函数，其他方法是直接执行该函数

17、new操作符具体过程：

• 创建一个空对象
• 将函数的this指向给这个空对象
• 执行函数代码
• 返回该对象

18、浅拷贝和深拷贝：

• 浅拷贝：将值复制一份，如果是基本类型数据就拷贝的就是基本类型的值，互不影响，但是如果有引用类型的数据则拷贝的是其地址，改变一个，另一个随之改变；可以用展开运算符进行浅拷贝
• 深拷贝：就是内存中开辟一块新地址，完整拷贝一份到新地址中，如果修改一个另一个则不会受到影响；可以用递归的方式进行深拷贝，如果只是一些字符串或者数字类的，可以用JSON的方式进行转换

19、js事件循环：

• 在js事件循环机制中，使用到三种数据对象，分别是栈、堆和队列
• 栈是后进先出的数据结构，理解的场景是：把羽毛球放入球筒中，后放进去的先拿出来
• 堆是一种树状的数据结构，可以理解为图书馆取书，通过书号索引的方式找到书
• 队列是先进先出的数据结构，可以理解为排队买东西的场景，先排先买
• 过程是当所有的同步任务都在主线程上执行就形成一个执行栈，当主线程的执行栈为空时，检查事件队列是否为空，如果为空则继续检查，如果不为空则取出队列任务的首部，加入执行栈，执行任务，如此循环称为事件循环

20、防抖和节流：

• 防抖是合并成一次进行，通过一个计时器来控制，如果在规定时间内再次触发，则取消之前的计时器重新计时，类似于游戏中的回城事件
• 节流是不管触发事件多么频繁，只有在规定时间后才可触发第二次，类似于游戏中的大招技能释放，一般搜索框会做节流事件，减少请求次数，优化性能

21、ES6新增方法：

• let
• const
• 箭头函数
• 模板字符串
• 解构赋值
• promise
• import和export
• set方法
• 展开运算符
• async和await等
• proxy
• class

22、set和map的区别：

• set用于数据重组，成员不重复，一般用于数组去重，类似于数组，只有键值，没有键名，可以遍历
• map用于数据存储，是键值对的集合，可以遍历，可以跟各种数据格式转换

23、点击穿透现象及解决办法：

• 现象：点击穿透的现象比如说点击mask上的关闭按钮，mask消失后发现触发了按钮下面元素的点击事件或者是跳转到另一个页面
• 解决方案：只用touch事件，touchstart、touchend、tap轻触事件；第二种方式是只用click事件，因为单击会有300ms的延迟，但是页面内任何一个自定义交互都将增加300ms延迟；第三种方式是tap后延迟350ms再隐藏mask，但是体验感差了一点

24、js的继承：

• 原型链继承：让新实例的原型等于父实例
  • 可继承：实例的构造函数的属性，父类构造函数属性，以及父类原型的属性
  • 不可继承：父类实例的属性
• 借用构造函数继承：使用 apply()和 call()方法将父类构造函数引入子类函数
  • 可继承：父类构造函数的属性
  • 不可继承父类原型的属性
• 组合继承：将原型链和借用构造函数的技术组合在一块，从而发挥两者之长的一种继承模式
• 原型式继承：借助原型可以基于已有的对象创建新对象，类似复制了一个对象
• 寄生式继承：就是给原型式继承外面套个壳子，没用到原型
• 寄生组合式继承：通过借用函数来继承属性，通过原型链的混成形式来继承方法（常用）

25、页面适配：

• 流式布局，使用百分比布局，非固定像素
• 使用vw和vh
• rem单位配合flexible.js使用

26、如何理解promise：

• 异步编程的解决方案，用来解决回调地狱问题
• 有三种状态：pending(进行中)、fulfilled(已成功)和rejected(已失败)
• 基本用法是new Promise()传入一个函数，函数里面有两个参数，一个是resolve成功的回调，一个是reject失败的回调
• new出来的promise实例有三个方法：参数都是一个数组
  • all：如果数组里面所有promise都resolve就进入then方法，有一个reject就进入catch
  • allSettled：在then方法中返回所有的promise数组结果，不管是成功的还是失败的
  • race：数组中的promise哪个先返回结果就使用哪个的结果

27、 async/await的理解：

• 是异步代码的新方式
• 基于promise实现的
• 使异步代码更像同步代码
• await 只能在async函数中使用，不能在普通函数中使用，要成对出现
• 默认返回一个promise实例，不能被改变
• await下面的代码是异步，后面的代码是同步的

28、图片懒加载：

• 设置图片的 data-set 属性值为其图片路径，由于不是 src，所以不会发送请求
• 监听图片元素即将进入可视窗口时，将data-set属性中的地址存储到src属性中

29、作用域：

• 指变量的有效范围
• 有三种：
  • 全局作用域：最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的
  • 局部作用域：局部作用域一般只在固定的代码片段内可访问到，而对于函数外部是无法访问的，最常见的例如函数内部
  • 块级作用域： 凡是代码块就可以划分变量的作用域

30、常见的 HTTP 状态码：

• 2xx请求成功

  204 无内容。服务器成功处理，但未返回内容

• 3xx重定向

  301 => 永久重定向/永久转移

  302 => 临时重定向/临时转移（一般用来做服务器负载均衡）

  304 => 本次获取的内容是读取缓存中的数据，会每次去服务器校验

• 4xx客户端错误，一般是语法错误或者请求无法实现

  401 => 未认证，没有登录网站

  403 => 禁止访问，没有权限

  404 找不到地址的匹配页面

  405 客户端请求中的方法被禁止

• 5xx服务器端错误

  502 => 充当网关或代理的服务器，从远端服务器接收到了一个无效的请求

  503 => 服务器超负荷（假设一台服务器只能承受 10000 人，当第 10001 人访问的时候，

  如果服务器没有做负载均衡，那么这个人的网络状态码就是 503）

  505 => 服务器不支持请求的 HTTP 协议的版本，无法完成处理。

  请解释一下 JavaScript 的同源策略

  • 同源策略是客户端脚本的重要的安全度量标准。其目的是防止某个文档或脚本从多个不同

  源装载。所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能

  读取来自同一来源的窗口和文档的属性。

31、跨域：

• 定义：浏览器执行脚本时会检查是否同源，只有同源才会执行，不同源即为跨域
• 这里的同源是指访问的协议、域名、端口都相同
• 解决方法：

  • jsonp：利用script标签不受同源策略的限制，但是只能是get请求，且有安全漏洞

    jsonp 的原理

    是通过动态创建 script 标签，然后通过标签的 src 属性获取 js 文件中的 js 脚本，该脚本

    的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页

    面定义好回调函数，本质上使用的并不是 Ajax 技术，Ajax 请求受同源策略的影响，不允许

    进行跨域请求，而 script 标签的 src 属性中的链接却可以访问跨域的 js 脚本，利用这个特性，

    服务端不在返回 json 格式的数据，而是返回调用某个函数的 js 代码，在 src 中进行了调用，这

    样就实现了跨域

  • CORS跨域资源共享：通过服务器设置响应头实现跨域

  • 代理：基于webpack中的webpack.config.js文件中在devServer对象中配置通过proxy

32、一个页面从输入 URL 到页面加载显示完成的过程：

• 浏览器查找域名对应的IP地址，向服务器发送一个请求
• 服务器重定向
• 浏览器追踪重定向地址，请求另一个带www的网址
• 服务器处理请求读取资源，返回一个响应
• 浏览器构建dom树，发请求获取页面资源完成页面

33、三次握手和四次挥手：

• 三次挥手：
  • 发送端首先发送一个带有SYN标志地数据包给接收方
  • 接收方接收后，回传一个带有SYN/ACK标志的数据包传递确认信息，表示我收到了
  • 发送方再回传一个带有ACK标志的数据包，代表我知道了，表示‘握手’结束
• 四次挥手：
  • Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态
  • Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态
  • Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态
  • Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手

34、MVVM的理解：

• Model-View-ViewModel 的简写，即模型-视图-视图模型
• 模型（Model） 指的是后端传递的数据，视图(View)指的是所看到的页面，视图模型(ViewModel)是 mvvm 模式的核心，它是连接 view 和 model 的桥梁
• 有两个方向：
  • 将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到 的页面，实现的方式是：数据绑定
  • 是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据
• 实现的方式是：DOM 事件监听，这两个方向都实现的，我们称之为数据的双向绑定

35、Vue 数据双向绑定的原理：

​ Vue是结合发布者-订阅者模式，通过 Object.defineProperty()为各个属性定义get、set特性方法，在数据发生改变时给订阅者发布消息，触发相应的监听回调，更新dom

36、Vue2生命周期：

• Vue 实例从创建到销毁的过程， 生命周期
• 有8个阶段：
  • beforeCreate：数据未加载，dom元素未创建
  • create：数据已经加载完毕，但是dom元素还是没有创建
  • beforeMount：组件实例还没有挂载
  • mounted：组件已经挂载，而且dom元素已经创建
  • beforeUpdate 组件更新之前
  • update：组件更新完毕
  • beforeDestroy：组件销毁前
  • destroy：组件已经被销毁了
• 当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数

37、Vue 组件通讯：

• 父传子：子组件定义props属性接收
• 子传父：子组件中使用this.$emit方法
• 兄弟传值：事件总线，$on方法
• 父传孙：provide和inject方式

38、自定义指令的使用以及生命周期/钩子函数：

• 分类：全局自定义指令，局部自定义指令

• 全局自定义指令：

Vue.directive('指令名', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
     // 操作
  }
})

• 局部自定义指令：

directives: {
  指令名: {
    // 指令的定义
    inserted: function (el) {
       // 操作
    }
  }
}

• 生命周期/钩子函数：
  • inserted：被绑定元素插入父节点时调用
  • bind：只调用一次，指令第一次被绑定到元素时
  • update：元素本身更新时触发
  • componentUpdate：组件和子组件更新时触发
  • unbind：指令被移除时触发
• 每个钩子函数中都有el和binding参数，而componentUpdate钩子中还暴露一个oldVal，用以区分旧值和新值
  • el：绑定元素
  • binding：是一个参数对象，一般我们会用到其中的value值，用于src的属性值

39、v-modal 的实现原理：

• 以value和input值为例，其实是:value和@input的语法糖
• :value是绑定了数据，@input是监听输入框值的变化，然后改变值
• 总的来说就是绑定数据并且监听数据改变
• 内部为不用的输入元素使用不用的属性并抛出不同的事件：
  • text和textarea使用value属性和input事件
  • checkbox使用checked和change事件
  • select将value作为props并将change作为事件

40、Vue 常用的指令及其作用：

• v-modal：数据双向绑定
• v-for：循环遍历
• v-show：内容显示
• v-hide：内容隐藏
• v-if：
  • 显示或隐藏
  • 条件判断
• v-bind：动态绑定(:)
• v-on：绑定事件(@)
• v-text：解析文本
• v-html：解析HTML标签

41、v-show 和 v-if 指令的共同点和不同点：

• 相同点：
  • 都是控制内容的显示和隐藏
• 不同点：
  • v-show：
    • 设置css属性中的display为none
    • 会编译，只是初始值为false，所以将display设置为none
    • 只编译一次，性能好一些
    • 适用于频繁切换某节点时，切换性能消耗小，但是初始性能消耗大
  • v-if：
    • dom树中添加或删除dom元素
    • 如果初始值为false时不会编译
    • 不停的创建和销毁，性能差一点
    • 初始渲染开销小，但是切换开销大

42、watch、computed 的区别：

• computed：
  • 支持缓存，数据发生改变时才会重新计算
  • 不支持异步操作
  • 当其属性值为函数时，默认是get方法，函数返回值就是属性的属性值
  • 在computed中，属性都有一个get和set方法，当数据变化时调用set方法
• watch：
  • 不支持缓存，数据变，直接触发相应的操作
  • 支持异步操作
  • 监听的数据是data中定义或者props传递的数据
  • 需要深度监听或者立即触发的时候就需要将函数转变成一个对象，为其添加deep:true深度监听或immediate：true立即监听，此时监听的函数写法是：handler(){ }
  • 监听的对象可以是字符串

43、路由懒加载：

• 路由懒加载也叫延迟加载，即在需要的时候进行加载，随用随载
• 出现的原因：
  • 单页面应用如果没有用懒加载则webpack打包后文件很大
  • 进入首页的时候需要加载的内容过多，出现白屏现象，不利于用户体验
• 实现方法：
  • 配置异步组件：()=> import(“vue页面路径”)

44、Vuex核心属性：

• state：定义需要管理的数据
• getters：state派生出来的数据，相当于state的计算属性
• mutation：里面定义的是同步的更新数据方法，每个方法里都有两个参数，一个是state，一个是payload，通过store.commit调用
• action：里面定义的是异步的方法，每个方法里面有两个参数，一个是store，一个是payload，通过store.dispatch调用，在actions里也可以提交mutation，通过store.commit
• module：将vuex模块化，可以让每一个模块拥有自己的state、mutation、action、getters，结构清晰，方便管理

45、兼容：

• 不同浏览器的标签默认的margin和padding不同 ---- 清除默认样式
• 图片默认有间距 ---- 使用浮动
• 标签最低高度设置min-height不兼容 ---- 如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

46、路由模式：

• hash模式：
  • 浏览器中符号是“#”，#以及#后面的字符称之为 hash，又叫前端路由
  • 用 window.location.hash 读取
  • hash 虽然在 URL 中，但不被包括在 HTTP 请求中
  • hash 改变会触发 hashchange 事件
  • hash发生变化的url都会被浏览器记录下来，从而浏览器的前进后退都可以用
• history模式：
  • history 采用 HTML5 的新特性
  • history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中
  • 它也有个问题：不怕前进，不怕后退，就怕刷新（如果后端没有准备的话，会分分钟刷出一个404来），因为刷新是实实在在地去请求服务器的

47、 SPA：

• 单页面应用，将所有的活动局限于一个web页面中，仅在初始化的时候加载HTML、JS、CSS，一旦页面加载完成，就不会因为用户的操作而进行页面的重新加载或跳转
• 利用JS的动态变化HTML内容，实现交互，避免页面的重新加载

48、路由之间跳转方式：

• 四种方式：
  • router-link搭配to属性，在模板中使用
  • push()跳转到指定页面
  • replace()跳转到指定页面，但是没有历史记录跳不回去
  • go(N)N可以为正数也可以为负数，正数是向前跳转，负数是向后跳转

49、如何封装组件：

• 原因：封装组件可以提升项目开发效率，把页面抽象成多个相对独立的模块，复用性高
• 步骤：
  • 创建一个组件
  • Vue.component注册组件
  • 子组件需要数据，可以在props中接受定义
  • 而子组件修改好数据后，想把数据传递给父组件，可以采用emit方法

50、宏任务和微任务：

• Js 中，有两类任务队列：宏任务队列（macro tasks）和微任务队列（microtasks）。宏任务队列可以有多个，微任务队列只有一个

• 宏任务：(task)

  • setTimeout, setInterval

• 微任务：(jobs)

  • Promise nextTick MutationObserver（html5 新特性）

51、HTTP和HTTPS区别：

• HTTP 是超文本传输协议，信息是明文传输 ; HTTPS则是具有安全性的 SSL加密传输协议
• HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443
• HTTP 的连接很简单，是无状态的 ; HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比HTTP协议安全

52、路由传参的方式：

• 编程式的导航router.push：

  • 字符串：

    • 直接传递路由地址，但是不能传递参数

      this.$router.push("home")

  • 对象：

    • 命名路由：这种方式传递参数，目标页面刷新会报错

      this.$router.push({name:"news",params:{userId:123})

    • 查询参数：和 name 配对的式 params，和 path 配对的是 query

      this.$router.push({path:"/news',query:{uersId:123})

    • 接收参数：this.$route.query

• 声明式的导航：

  • 字符串：<router-link to:"news">
  • 命名路由：<router-link :to:"{name:'news',params:{userid:1111}}">
  • 查询参数：

53、 vue-router 动态路由：

• 场景：把某种模式匹配到的所有路由，全都映射到同个组件
• 解决办法：以在 vue-router 的路由路径中使用动态路径参数
  • 使用 ：开头
  • 在路径中最后使用 ？传参

54、页面优化：

• v-if和v-for不能连用
• 更多的情况下，使用v-if代替v-show
• 要保证key值的唯一
• 使用组件懒加载或者图片懒加载
• 防抖和节流的使用
• 模块按需导入
• 打包优化
• 使用cdn加载第三方模块
• 缓存常用信息
• 精灵图，base64

55、动态组件：

• 定义：多个组件使用同一个挂载点，并动态切换

• 使用：，当控制 componentName 改变时就可以动态切换选择组件

56、webpack ：

• 定义：是一个打包模块化的工具，在webpack中一切文件皆为模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件
• 作用：由于浏览器对于js中的很多代码不可以直接进行解析读取，这个时候需要先通过 wabpack 把资源进行打包，解析成浏览器可以识别的代码
• 配置：
  • 入口：指示webpack使用哪个模块作为构建其内部依赖图的开始，默认值是：‘./src/index.js’
  • 出口：告诉webpack在哪里输出它所创建的bundle，以及如何命名这些文件，主要输出文件的默认值是‘./dist/main.js’
  • mode：配置模式，development(开发环境)、production(生产环境)、none(不使用任何默认优化选项)
  • loader：自带能力，用于转换某些类型的模块
  • plugin：打包优化，资源管理，注入环境变量等
• 流程：
  • 初始化参数
  • 开始编译
  • 确定入口
  • 编译
  • 完成模块编译
  • 输出资源
  • 输出完成

57、watch深度监听：

• 有个原则监听谁，写谁的名字，然后是对应的执行函数，第一个参数为最新的改变值，第二个值为上一次改变的值，注意: 除了监听 data，也可以监听计算属性或者一个函数的计算结果

  watch:{
     a:{
          handler:function(newVal,oldVal){...},
          deep:true
     }
  }
  

58、vue2和vue3的区别：

• 重新构建了响应式，使用 proxy 替换了Object.defineProperty
• 使用reactive就可以直接监听数组和对象类型的变化
• 采用了组合式API，而vue2是选项式API
• 重构了虚拟DOM
• 直接实现对象属性的增加和删除
• 模板编译时会把一些静态的节点转换为常量
• 监听的目标为对象本身，不需要像vue2采用Object.definePriperty遍历每一个属性，有一定的性能优化

59、undefined和null的区别：

• null转数值未0，undefined转数值为NaN
• 变量初始化时为undefined
• 如果一个变量声明了，但是没有赋值，就是undefined
• 对象没有赋值也为undefined
• 函数的返回值默认也为undefined
• null也可以表示是原型链的终点

60、vue-router导航守卫/钩子函数：

• 定义：又称路由守卫，实时监控路由跳转的过程，在各个过程执行相应的操作

• 分类：

  • 全局守卫：

    • 全局前置守卫：

      const router = new VueRouter({ ... })
      router.beforeEach((to, from, next) => {
        // to：要进入的目标
        // from：离开的路由
        // next(...)
      	// next()：进入下一个钩子
      	// next(false)：中断导航
      	// next("url地址")/next({path："url地址"})：跳转
      })
      

    • 全局解析守卫

    • 全局后置守卫

  • 路由独享守卫

  • 组件内守卫：参数或查询的改变并不会触发导航守卫，可以通过使用 beforeRouteUpdate 的组件内守卫

61、拦截器：

• 作用：
  • Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
  • 可以拦截请求和响应
  • 可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
  • 安全性更高
• 相关配置：
  • url：请求的服务器地址
  • method：请求方法
  • baseURL：基准路径
  • headers：请求头
  • parmas：路径参数
• 做了什么：
  • 请求拦截器：
    • 在请求发送前进行的操作，如：每个请求体里加上token
  • 响应拦截器：
    • 接收到响应后进行的操作，如：服务器返回的登录状态失效，就跳转到登录页

62、token失效处理：

• 第一种方案是：服务器端保存token状态，用户每次操作都会自动推迟token的过期时间，session就是采用这种策略保持token的有效期，但是当前后端分离，单页面的时候，每秒钟的请求发起多次，每次都去刷新一下过期时间会非常消耗性能的；
• 第二种方案：使用refresh token，避免频繁的刷新token，此时服务端只要在token过期的时候反馈给前端，前端使用refresh token申请一个全新的token继续使用即可

63、事件对象和事件委托：

• 事件对象：
  • 一个函数或者方法都会带有一个事件对象参数
  • 事件对象.target是获取最先触发的元素
  • 事件对象有两种公共的方法：
    • .preventDefault() 阻止默认行为
    • .stopPropagation()阻止冒泡
• 事件委托：
  • 可以把事件处理器添加到一个上级元素上，避免把事件处理器添加到多个子元素上，提高性能
  • 还可以预测未来，动态添加的元素仍然可以触发该事件
  • 主要依靠的就是事件冒泡，也就是当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到window

64、vuex状态管理刷新页面数据失效，怎么处理：

• 使用localStorage缓存数据，页面重新载入就从缓存中读取数据
• 使用computed计算属性，因为计算属性会被缓存，方便下次调用，如果调用的时候数据没有改变则不会重新计算

65、keep-alive什么情况下使用：

• 一般是结合路由和动态组件一起使用，用于缓存组件，避免重新渲染，提升性能

66、路由配置：

• path : 跳转路径
• component : 路径组件
• name:路由名字
• children:子路由
• props:路由解耦
• redirect : 重定向路由

67、插槽：

• 是预留的内容的占位符

• 三种类型：

  • 匿名插槽：没有指定name属性，默认是default

  • 具名插槽：指定name属性，另一边使用的时候用#name值

  • 作用域插槽：

    • 用来绑定props数据

    • 定义插槽：

      <slot name='插槽名' :属性名(这个名称与后期获取数据时的属性名称对应)='数据'>
      

    • 使用插槽：

      <组件名>
      	<template  #插槽名='数据形参(这里是传过来的数据)'>
      		自定义渲染，对象可以解构
      	</template>
      </组件名>
      

68、vue组件中data为什么必须是一个函数：

• 每复用一次组件就会返回一份新的data，类似创建一个私有的数据空间，每个组件实例维护自己的数据
• 如果是写一个对象，那就是所有组件实例共用一份数据，造成数据污染

69、小程序页面生命周期：

• 应用级别：Page()中触发
  • onLaunch：小程序启启动时
  • onShow：小程序前台运行时
  • onHide：小程序后台运行时
  • onError：执行错误时
  • onPageNotFount：冷启动（如扫码）打开小程序的页面不存在时
• 页面级别：

  • onLoad：页面加载时触发。一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径的参数

  • onShow：页面显示/切入前台时触发（返回、tabBar切换、前台运行）

  • onReady：页面初次渲染完毕，相当于vue的mounted。一个页面只会调用一次，代表页面已经准备妥当，可以可视图层进行交互

  • onHide：页面隐藏/切入后台时触发（跳转、tabBar切换、后台运行）

  • onUnload：页面卸载时触发。如redirectTo 或 navigateBack 到其他页面时

    69、小程序页面生命周期：

70、localStorage、sessionStorage、cookie 的区别

• **共同点：**都是保存在浏览器端、且同源的

• 区别：

• 1、cookie 数据始终在同源的 http 请求中携带（即使不需要）

• 2、存储大小 限制也不同，

  ​ cookie 数据不能超过 4K，

  ​ sessionStorage 和 localStorage 可以达到 5M 或更大

• 3 、数据有效期 不同，

  ​ sessionStorage：仅在当前浏览器窗口关闭之前有效；

  ​ localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

  ​ cookie：只在设置的 cookie 过期 时间之前有效，即使窗口关闭或浏览器关闭

  4、作用域 不同

  ​ sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；

  ​ localstorage 在所有同源窗口中都是共享的

  ​ cookie 也是在所有同源窗口中都是共享的

71、Object.defineProperty 和 Proxy 的区别

Proxy 的优势如下:

Proxy 可以直接监听对象而非属性；

Proxy 可以直接监听数组的变化；

Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、

has 等等是 Object.defineProperty 不具备的；

Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而

Object.defineProperty 只能遍历对象属性直接修改；

Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中

的 新标准的性能红利

；

Object.defineProperty 的优势如下:

兼容性好，支持 IE9，而

Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平

72、小程序如何获得用户的授权信息

通过 wx.getUserProfile() 方法 和小程序 wx.getSetting()方法获取

73、Vue 中 key 值的作用是什么

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM ，元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟 DOM。

74、数组去重，能用几种方法实现

1、使用 es6 set 方法 [...new Set(arr)]

2、利用新数组 indexOf 查找

3、for 双重循环

4、利用 for 嵌套 for，然后 splice 去重

5、利用 filter