1、vue2和vue3的区别

①生命周期

beforeCreate -> beforeCreate

Created -> Created

beforeMount -> beforeMount

mounted -> omounted

beforeUpdate -> beforeUpdate

updated -> updated

beforeDestroyed -> beforeUnmount

destroyed -> umounted

activated -> activated

deactivated - > deactivated

②vue2和vue3双向数据绑定原理发生了改变

（1） vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。

（2）相比与vue2，使用proxy API 优势有：defineProperty只能监听某个属性，不能对全对象进行监听；可以省去for in 、闭包等内容来提升效率（直接绑定整个对象即可）；可以监听数组，不用再去单独的对数组做特异性操作，vue3可以检测到数组内部数据的变化。

③vue3支持多个根节点

④建立数据data

vue2是把数据放入data中，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造得时候触发。使用一下三个步骤来简=建立反应性数据： 1. 从vue引入reactive；使用reactive() 方法来声明数据为响应性数据；3. 使用setup()方法来返回我们得响应性数据，从而template可以获取这些响应性数据。

2、前端的多环境怎么去配置的*

1.首先需要安装VScode等编辑器，Vscode中需要安装技术栈需要用到的扩展,暂且列出之前安装过的插件:

Live Server(启动本地服务器), Debugger for Chrome, Ayu(主题扩展), Beautify(美化代码), Chinese (Simplified) (简体中文) , Code Runner(单独运行某段代码), Code Spell Checker(源代码拼写检查), Easy LESS(自动将less编译为css), HTML CSS Support(用于css的智能感知), Image preview(预览图片), indent-rainbow(使缩进更容易阅读), JS & CSS Minifier (Minify)(缩小化JS和CSS), Material Icon Theme(图标主题), open in browser(浏览器打开文件), Prettier - Code formatter(代码格式化), Rainbow Brackets(彩虹括号), stylus(一种预处理器), Vetur(vue工具), vscode-icons(文件图标), vue(语法突出显示), Vue 3 Snippets(代码片段扩展), vue-beautify(美化vue代码), vue-helper(vue增强)

2.安装node.js来使用npm，还需要安装淘宝镜像方便快速使用npm导入插件；

3.需要安装git以便于下载代码到本地以及管理代码，企业管理代码时需要用到gitlab。

4.需要安装谷歌浏览器来进行运行代码并调试bug，谷歌浏览器中需要安装vue开发者工具，以便随时查看数据，DOM结构以及调试。

3、localstorge 有没有大小限制

1、localstorge 5M 

2、cookie 4k

4、vue路由传参是怎么传的

①query传参（会显示参数）

this.$router.push({
  name:'Child',
  query:{
   id:1
  }
})

②、params传参（会隐藏参数）

this.$router.push({
  name:'Child',
  params:{
   id:1
  }
})

③、router-link传参

<router-link :to="{name:'Child',params:{id:1}}">跳转到子路由</router-link>

5、 v-for和v-if可以放在一起用吗？优先级？

①v-for和v-if不应该一起使用。

原因：v-for比v-if优先，即每一次都需要遍历整个数组影响速度。

②、2、把 v-if 改成 v-show

如果此 v-for上层已经有 v-for循环了，此处只是取了上层循环对象中的一个数组继续作循环（其实这里项目遇到的就是这个问题），我想不出方法使用computed计算属性如何计算（获取不到多层循环后的此数组内容）。也可以 v-if 改成 v-show，可以共存。

6、 es6新增哪些新特性

①、模板字符串

${变量}

②、const let

①、const常量不可改变但是可以更改对象属性

②、let 作用于会计作用域防止暂时性死区，不可重复声明

③、 async await

①、本人工作当中常用于将多个接口异步请求转化成同步操作当一个第二个接口请求的参数，需要第一个接口返回的数据的时候，就会用到async await

getData(){
 return  this.$store.dispatch("userInfo",param)
}
async awaitUserData(){
let {data:data1} = await this.getData()
   this.$store.dispatch("userInfo",data1).then(res=>{})
}

④解构赋值

①、对象解构
  let  obj={
  name:"张三"
  }
  let {name} = obj
②、数组解构
let array =[1,2,3]
let [one,two,three]=array;

⑤promise

1 . 初始态pending

2 . 成功态resolved--也叫fulfilled

3 . 失败态rejected

7、盒模型

box-sizing 属性主要用来控制元素的盒模型的解析模式。默认值是 content-box 。

content-box： 让元素维持W3C的标准盒模型。元素的宽度/高度由 border + padding + content 的宽度/高度决定，设置 width/height 属性指的是 content 部分的宽/高

border-box: 让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置 width/height 属性指的是 border + padding + content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

8、什么是回流和重绘?

回流: 当dom树render完成之后，又通过js对其中的某一个或多个节点进行编辑，更改样式（尺寸、盒模型等等）的时候，就会引起整个dom树的重新render;

重绘: 当页面元素样式改变不影响元素在文档流中的位置时（如background-color，border-color，visibility），浏览器只会将新样式赋予元素并进行重新绘制操作。

回流必定重绘，重绘不一定回流

避免大量页面回流的手段也有很多，其本质都是尽量减少引起回流和重绘的DOM操作

9、防抖与节流

定义：

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

区别：

相同点：

都可以通过使用 setTimeout 实现目的都是，降低回调执行频率。节省计算资源

不同点：

函数防抖， 在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。
函数节流， 在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次

10、什么是闭包

简单来说，闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。即重用一个变量，又保护变量不被污染的一种机制。
为什么需要闭包？

局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。
特点

①、占用更多内存

②、不容易被释放
何时使用？

①、变量既想反复使用，又想避免全局污染
如何使用？

①、定义外层函数，封装被保护的局部变量。

②、定义内层函数，执行对外部函数变量的操作。

③、外层函数返回内层函数的对象，并且外层函数被调用，结果保存在一个全局的变量中。
闭包的缺点：

①、比普通函数占用更多的内存。

　②、解决：闭包不在使用时，要及时释放。

　③、将引用内层函数对象的变量赋值为null。

11、冒泡排序（可通过双重for循环实现也可以通过递归的形式去实现）

function bubbleSort(arr) {
  var i = arr.length, j;
  var tempExchangVal;
  while (i > 0) {
      for (j = 0; j < i - 1; j++) {
          if (arr[j] > arr[j + 1]) {
              tempExchangVal = arr[j];
              arr[j] = arr[j + 1];
              arr[j + 1] = tempExchangVal;
          }
      }
      i--;
  }
  return arr;
}

var arr = [3, 2, 4, 9, 1, 5, 7, 6, 8];
var arrSorted = bubbleSort(arr);
console.log(arrSorted);
alert(arrSorted);

12、如果想在created当中获取到Dom节点该怎么办

①、通过this.$nextTick()可以获取得到

this.$nextTick(()=>{
 document.getelementById()
})

13、快速排序

①、方法一：

       const quickSort = (array) => {
 const sort = (arr, left = 0, right = arr.length - 1) => {
  if (left >= right) {//如果左边的索引大于等于右边的索引说明整理完毕
   return
  }
 let i = left
 let j = right
 const baseVal = arr[j] // 取无序数组最后一个数为基准值
 while (i < j) {//把所有比基准值小的数放在左边大的数放在右边
  while (i < j && arr[i] <= baseVal) { //找到一个比基准值大的数交换
   i++
  }
  arr[j] = arr[i] // 将较大的值放在右边如果没有比基准值大的数就是将自己赋值给自己（i 等于 j）
  while (j > i && arr[j] >= baseVal) { //找到一个比基准值小的数交换
   j--
 }
  arr[i] = arr[j] // 将较小的值放在左边如果没有找到比基准值小的数就是将自己赋值给自己（i 等于 j）
 }
 arr[j] = baseVal // 将基准值放至中央位置完成一次循环（这时候 j 等于 i ）
 sort(arr, left, j-1) // 将左边的无序数组重复上面的操作
 sort(arr, j+1, right) // 将右边的无序数组重复上面的操作
 }
 const newArr = array.concat() // 为了保证这个函数是纯函数拷贝一次数组
 sort(newArr)
 return newArr
}

①、方法二：

// 方法二：
let _quickSort = (left, right, nums) => {
  let swap = (left, right, nums) => {
    let temp = nums[left]
    nums[left] = nums[right]
    nums[right] = temp
  }
  if (left <= right) {
    let val = nums[left]
    let [i, j] = [left, right]
 
    while (i < j) {
      while (i < j && nums[j] > val) {
        j--
      }
      while (i < j && nums[i] < val) {
        i++
      }
      if (i < j) {
        swap(i, j , nums)
      }
    }
    nums[i] = val
    _quickSort(left, i - 1, nums)
    _quickSort(i + 1, right, nums)
  }
}
 
let quickSort = (...numbers) => {
  _quickSort(0, numbers.length - 1, numbers)
  return numbers
}
 
console.log(quickSort(1, 20, 9, 13, 59, 19, 98))

14、computed与watch的区别

①、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

②、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读
取，而watch在每次监听的值发生变化的时候都会执行回调。

③、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

④、computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监
听，添加immediate属性，设置为true（immediate:true）

⑤、使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–
当一条数据影响多条数据的时候，使用watch-----搜索框.

15、事件冒泡和事件委托

①、事件委托

事件委托:将事件处理委托给祖籍元素

事件委托的实现方式：通过事件机制来实现事件委托

②、事件冒泡

原理：在【目标元素el】上触发事件,如果el的【祖籍元素】绑定了相同的事件，那么也会被触发。直到找到 root 跟元素为止。执行顺序：目标元素—> 父元素—>祖籍元素

addEventListener()

监听某个元素的事件

参一：事件类型

参二：事件处理函数

参三：事件机制冒泡或者不同默认值 false 冒泡（true 捕获）

16、你知道EventLoop吗?

概念：EventLoop是事件循环机制，是指浏览器或者node解决JavaScript单线程运行时不会发生阻塞的一种机制，其实也就是我们经常使用异步的一种原理。

17、强制缓存和协商缓存

①、强制缓存和协商缓存都是为了解决静态资源的（Dom & cssom）

②、强制缓存在前，协商缓存在后，

③、资源未过期触发强制缓存，资源过期了触发协商缓存

④、判断资源是否过期的方法expires（绝对时间）、cache-control（相对时间）

⑤、判断资源是否更新（Last-Modified 和 ETag）

18、输入url会发生什么？？

建立连接
发送HTTP请求
TCP/IP协议封装和分用
返回HTTP响应
浏览器解析
断开连接

19、HTTP1.0和HTTP2.0的区别

HTTP/2采用二进制格式而非文本格式
HTTP/2是完全多路复用的，而非有序并阻塞的——只需一个连接即可实现并行
使用报头压缩，HTTP/2降低了开销
HTTP/2让服务器可以将响应主动“推送”到客户端缓存中

20、 HTTP和HTTPS的区别

HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

两者主要区别如下：

 1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

　　2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

　　3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

　　4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

21、js中堆和栈的区别

1、内存操作场景

栈由操作系统自动分配和释放，用于存放简单的数据段，占据固定大小的空间，比如基本数据类型（Number、String、Boolean……）和函数的参数值等。

堆由开发人员自主分配和释放，若不主动释放，程序结束时由浏览器回收，用于存储引用类型（引用类型的变量实际上保存的不是变量本身，而是指向内存空间的指针）。

2、数据结构场景

JavaScript存在栈和队列概念，通过数组的方式，模仿实现堆栈。

栈：栈是一种运算受限的线性表，其限制是指只仅允许在表的一端进行插入和删除操作，这一端被称为栈顶（Top），相对地，把另一端称为栈底（Bottom）。把新元素放到栈顶元素的上面，使之成为新的栈顶元素称作进栈、入栈或压栈（Push）；把栈顶元素删除，使其相邻的元素成为新的栈顶元素称作出栈或退栈（Pop）。通过数组的push()、pop()方法实现栈。

堆：堆其实是一种优先队列，也就是说队列中存在优先级，比如队列中有很多待执行任务，执行时会根据优先级找优先度最高的先执行。

2022年面试7月总结