面试题整理

1.为什么使用key

在v-for循环中，key是每个vnode（虚拟dom）的唯一id,也是diff算法的一种优化策略，可以根据key,更准确，更快的找到对应的vnode（虚拟dom）节点。 【拓展：了解即可】，在vue1.0时代没有key，导致v-for出来的dom修改的时候需要重新生成dom树，造成性能浪费，vue2.0有了key之后，需改dom则根据key直接替换被修改元素，从而节省了性能。

2.什么是diff算法？

diff算法的作用是用来计算出 Virtual DOM（虚拟dom） 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。 【扩展：了解即可】实际上整个vue项目中所有的dom节点都叫虚拟dom，都是由diff计算出来的。

3.ajax的几个步骤?

// 1. 创建请求对象
let xhr = new XMLHttpRequest()
// 2. 连接服务器
let xhr.open('get','https://www.baidu.com',true) //false同步
// 3. 发送请求：【扩展】如果是post，参数使用send发送，get方式参数拼接地址栏里
xhr.send(null)
// 4. 监听接口响应的函数
xhr.onreadystatechange = function(){
    // 5. 判断状态，最后获取参数
    if(xhr.readyState== 4 && xhr.status == 200){
​
        console.log(xhr.responseText)
​
    }
​
}
// 6. post需要添加请求头
​

4.原型，对象，原型链关系

对象object的原型：proto是对象的隐式原型

显示原型是函数的prototype对象，

原型链指的是对象的__proto__.__proto__一种属性查找方式，称为原型链

【扩展】构造函数-每一个对象的产生都是new了一个函数，这个函数叫构造函数

5.解决跨域的方式有哪些？

1. jsonp：动态创建script标签，利用该标签的src属性请求接口，实现跨域请求

2. vue脚手架的devServer.proxy进行代理跨域，原理是通过nodejs作为中介请求，vue脚手架是基于webpack封装的，webpack是用nodejs运行的。

6.xss攻击如何预防？

xss攻击又叫前端注入攻击，一般发生在表单提交或富文本内容上传时。

（1）web 页面中可由用户输入的地方，需要对输入的数据转义（html转义成字符码）、过滤处理

（2）后台输出页面的时候，也需要对输出内容进行转义、过滤处理（因为攻击者可能通过其他方式把恶意脚本写入数据库）

（3）前端对 html 标签属性、css 属性赋值的地方进行校验

7.地址栏输入网址回车后发生了什么

1. 浏览器会根据你输入的URL地址，先去本机浏览器里查找域名是否被本地DNS服务器缓存，不同浏览器的本地DNS服务器设置不同

2. 如果本机没有缓存，则想网络中DNS服务商请求对应的url地址ip，在返回IP地址后，浏览器会和目标服务器建立一个TCP连接，在建立连接之后，浏览器会向服务器发送HTTP-GET请求

3. 服务器收到请求后，返回页面数据，浏览器接受到后开始绘制页面

8.递归原理和优缺点

原理：函数自己调用自己，重复处理嵌套结构数据的一种算法。 特点：需要有结束调用条件，需要数据格式保持一致，数据嵌套层级不确定性。

优点：

• 节省代码

• 符合编程思想，容易理解

缺点：

• 效率较低

• 递归层次太深，耗内存且容易栈溢出一定要使用的话，最好使用缓存避免相同的计算，限制递归调用的次数

9.闭包原理和优缺点

原理：函数中内嵌一个函数，内层函数可以访问外层函数中的变量。它是一个私有作用域，可以封装私有属性和方法

优点：1、变量拥有私有作用域，避免全局污染

2、变量常驻内存

缺点：1、导致变量不会被垃圾回收机制回收，造成内存消耗

2、闭包过多会造成内存泄漏的问题。

10.箭头函数与function区别

（1）this指向不同，箭头函数指向外层作用域中的this，如果外层作用域也没有this则会逐级向上找this；function的this指向声明处，如果function作为事件函数，this指向事件触发的元素，如果function属于某一个对象的方法，则this执行该对象。

（2）普通函数有prototype，所以可以作为构造函数，箭头函数没有prototype故而不可以作为构造函数，也就不能使用new来实例化出对象了。

（3）普通函数可以使用arguments参数，箭头函数不能使用arguments参数，可以使用扩展运算符...reset来实现arguments参数

（4）普通函数可以是匿名函数或者具体名函数，箭头函数只能是匿名函数

11.vue2与vue3的差异

（1）vue2是选项（options）API,vue3是组合(composition)API

（2）双向数据绑定，vue2使用(es5)Object.defineProperty vue3使用(es6)proxy

（3）Vue3打包后的代码体积比vue2小很多，因为组合模式下只有被使用的代码才会被打包，而vue2是选项式代码用不用都挂载在一个对象上，所以体积大。

（4）生命周期也有变动，取消了beforeCreate，created （5） vue3大约一共130多个api，取消了过滤器等重大变化。

12.vue3特殊的新特性

（1）可以无死角的监听数组的变化

（2）自定义渲染 API：h函数

（3）源码优化：虚拟dom自动加了标识补丁，v-for时不用加key了

13.ts中类型

布尔类型 boolean
    数字类型 number
    字符串类型 string
    数组类型 array
    元组类型 tuple
    枚举类型 enum
    任意类型 any
    null 和 undefined
    void空类型
    never没有返回值类型
    未知unknown

1. vue 组件通信

   1.父传子：

   父组件使用v-bind向子组件传递数据，子组件使用props接收父组件传递的数据。

   2.子传父：

   父组件使用v-on向子组件绑定自定义事件，子组件使用$emit调用父组件传递的函数名字。

   3.兄弟组件传值：

2. 通过main.js初始化一个全局的$bus,在发送事件的一方通过$bus.$emit(“事件名”，传递的参数信息)发送，在接收事件的一方通过$bus.$on("事件名",参数)接收传递的事件

3. 使用同一个父组件作为中间消息传递者实现兄弟通信

   4.$attrs和$listeners

   如果父组件A下面有子组件B，组件B下面有组件C,这个时候A组件想要传数据给C组件就可以用这种方式实现。适合用于多级组件嵌套传值

   在b组件中使用组件c的时候用v-bind绑定一个属性$attrs这样就可以直接在c组件中拿到父组件a传下来的数据了。用v-on绑定一个$listeners属性就可以直接在组件c里调用a组件的方法了。

   5.provider和inject

   父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，都可以通过inject来调用provide的数据

   但是这种写法传递的数据是不响应的。

   6.v-model也能实现组件传值

   给子组件绑定v-model，子组件被注入value属性和input事件，在子组件中通过emit调用input事件就能修改父组件的v-model值

   7.$parent和$children

   在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作.$children是一个数组 用的时候加下标

   8.Vuex

   vuex也可以实现组件之间的传值，把公共的数据放在state中，所有的组件都可以使用

vue2 和 vue3 的区别

1. vue2是选项api 需要什么选项就直接写什么选项 vue3是组合api 所有的代码都写在setup里边 需要什么就要import引入什么

2.双向数据绑定原理发生了改变，vue3的proxy替换vue2的Object.defineProperty

3.Vue3默认使用懒加载

4.Vue3新加入了TypeScript以及PWA支持

5.重构虚拟DOM

6.生命周期也有改变

7.vue3取消了过滤器filters

内置组件有哪些？功能分别是什么？

Keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

Template 空标签

Transition 为组件的载入和切换提供动画效果

Transition-gronp 作为多个元素/组件的过渡效果

Component 渲染一个‘元组件’为动态组件

Slot 作为组件模板之中的内容分发插槽，slot元素自身将被替换

\1. vuex的工作（执行）流程是什么？

通过diapatch 调用action，在action中可以执行异步或者同步操作，然后通过commit调用mutation，让mutation去修改state

什么是keep-alive 及好处

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

在组件切换得时候 把切换出去的组件保留在内存中，而不是销毁，从而减少加载时间及性能消耗，提高性能的优化和用户体验性