vue面试题

待处理

vue异步组件 动态组件 . async 自定义组件v-model
304 强制缓存 协商缓存
创建项目

npm install -g @vue-cli
vue create test

项目介绍：

ebi是公司员工使用的平台 用户查看业绩 交易规模 交易金额 关键指标 月活数 针对用户的一些优惠政策像超值星期五 约惠星期五 奋斗美好 享生活 涉及到功能点有
1、 根据用户权限不同动态加载路由Routerouter）实现权限控制
2、搜索功能
3、历史业绩select选择框用缓存的方式增加用户体验 清空
4、列表list2个接口返回 先加载一个接口返回的数据 再通过$ret加载后一个接口返回数据 这样数据显示更快
5、约惠星期五 超值星期五 图片懒加载
6、还有小图片的base64
7、axios二次封装
8、echarts联动一些趋势图

css部分：
块级元素：div p h1-h6 ul li table 不独占一行 设置宽高不生效 有内容决定
行内元素：span img input 独占一行 可设置宽高
空元素：br hr

css居中

行内元素 如果夫元素是块状元素 给父元素text-align line-height
块状元素:margin:auto

设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

使用flex布局实现
设置父元素为flex定位，justify-content: center; align-items: center;

引入图片用require要不打包会当成字符串

js部分：

判断数据类型

1、typeof
console.log(typeof “123”) //string
console.log(typeof array) //object
console.log(typeof null) //object null是一个空对象

2、instanceof
var arr=new Array()
console.log(arr instanceof Array) //true
console.log([] instanceof Array) //true
同一个window才会返回true
3、最准确判断数据类型的方法Object.prototype.toString.call(window.frames[0].arr) 返回字符串 array

null和undefine

null表示无对象
undefine表示无原始值
null：
1、手动释放内存
2、作为函数的参数（此函数不是对象）
3、原项链的顶端
undefine出现的四种情况：
1、以声明，未赋值
2、对象某个属性不存在
3、函数少了某个参数
4、函数的默认返回值（构造函数除外）

for in 和for of区别

for···in···用来遍历数组和对象的键(key)
for···of···用来遍历数组的值(value)
for···in··是ES5里的标准
for···of···是ES6里的标准

闭包

闭包：是指可以访问其他函数内部变量的函数 也就是函数套函数
理由： js中变量分为全局变量和函数内部变量 全局变量可以全局访问 函数内部变量 只能函数内部访问 闭包可以访问函数内部变量
好处：可以访问函数内部变量 将变量私有化防止污染全局变量 变量常驻内存
坏处：使用不当容易造成内存泄漏
场景：回调函数 防抖节流

new操作符干了什么

//new操作符 做了什么
//1 创建一个空的对象obj
//2 将此构造函数的原型属性 即prototype链接到新建对象的__proto__ 属性上 obj.proto = fn.prototype 所以每个实例对象的__proto__等于 构造函数的原型prototype 即 obj.proto = fn.prototype
// ------- prototype 原型的目的是为了通过构造函数创建的对象之间共享构造函数原型上的属性和方法 节约内存开销
//3 使用apply改变this指向
//4 返回新的对象

new操作符不能继承属性属性和方法

this

console.log(this)//window
function fn(){
console.log(this)//window
}
window.fn()
//法则 谁调用就指向谁（不对）

let a={
name:“小明”,
fn:function(){
console.log(this)//指向a
}
}
a.fn()

var i={
a:10,
b:{
a:12,
fn:function(){
console.log(this.a)
console.log(this)//这是this指向b 永远指向他的上一级 指向上一个调用者
}
}
}
i.b.fn()//12

var id=66;
function fn5(){
//箭头函数没有作用域 没有this
setTimeout(()=>{
console.log(this.id)
},500)
}
fn5({id:22})//66
fn5.call({id:22})//22

call apply bind

call apply改变之后执行一次 bind不会调用函数 只改变
apply传的是数组 call传的是对象

1 在全局下调用this 这个this指向window
2 在函数中调用this 如果函数在对象中被该对象调用 则this指向这个对象 如果是构造函数 这指向这个构造函数的实例
3 在箭头函数中 this指向父级作用域的执行环境

继承

1、原型链继承
子类的原型指向父类的实例
function parent(){
this.name=“李连杰”
}
parent.prototype.getName=function(){
return this.name
}
function child(){}
child.prototype=new parent()
const child=new child()
console.log(this.name)
console.log(this.getName())

const child2=new child()
child2.name[0]=“成龙”
console.log(child2.name)//成龙
console.log(child.name)//成龙
弊端：对某一个child实例父类引用类型数据修改 其他也会被修改
2、构造函数继承
在子类构造函数中执行父类的构造函数 并且为其绑定子类的this(改变this指向)
function ani(name){
this.name=name
}
ani.prototype.getName=function(){
return this.name
}
function dog(){
ani().call(this,‘柴犬’)
}
const dog1=new dog()
const dog2=new dog()
dog1.name[0]=“金毛”
console.log(dog1.name)//金毛
console.log(dog2.name)//柴犬

弊端：继承不到父类原型上的方法和属性

3、组合式继承
function car(name){
this.name=[name]
}
car.prototype.getName=function(){
return this.name
}
function bmw(){
car().call(this,name)
}
bmw.prototype=new car()

	const bmw1=new bmw("宝马三系")
const bmw2=new bmw("宝马五系")
bmw1.name[0]="宝马7系"
console.log(bmw1.name)//宝马7系
console.log(bmw2.name)//宝马五系

4、寄生组合式继承

原型链：

1、原型解决了什么问题：
对象可以共享属性和方法
2、谁有原型？
函数 prototype
对象_proto_
3、对象查找属性和方法的顺序
对象本身–》构造函数–》对象的原型–》构造函数原型–》原型的原型中查找
4、原型链就是把原型串联起来
原型链的最顶端是null
原型是为了解决对象属性和方法共享的问题 函数 有prototype 对象有_proto_ 对象查找属性和方法先在对象本身–》构造函数–》对象的原型–》构造函数原型–》原型的原型中查找

数组方法

join
split字符串的方法

push pop unshift shift

reverse
sort

concat arr1.concat(arr2) 不更改原数组 返回拼接后的新数组

splice
slice
array.splice(startingIndex, length, …items)
array.slice(startingIndex, endingIndex)

forEach
map
filter 返回新数组
find 返回具体的值
findIndex
some 返回布尔值
every 返回布尔值
reduce
举例：
let userList=[
{
name:“小明”,
age:18
},
{
name:“小红”,
age:10
},
]
forEach 1、没有返回值 2、不能用break 3、遍历的是value
const arr1=userList.forEach(el=>{
el.class=“3班”
})
console.log(userList)
//let userList=[
{
name:“小明”,
age:18,
class:“3班”
},
{
name:“小红”,
age:10，
class:“3班”
},
]
console.log(arr1)//undefine 因为forEach没有返回值

map
1、有返回值 返回新数组 要renturn、 没有return默认undefine
2、没有break
3、接受的参数是一个函数（key,value）
const arr2=userList.map(el=>{
if(el.age>12){
return el
}
})
console.log(arr2)//[
{
name:“小明”,
age:18,
class:“3班”
},
undefine,]

filter循环过滤符合条件的数组 返回一个新数据
userList.filter((item,index,arr)=>{})
const arr3=userList.filter(el=>{
if(el.age>12){
return el.age>12
}
})
console.log(arr3)//[
{
name:“小明”,
age:18,
class:“3班”
}] 只返回为true的结果

find查找符合条件的 只返回符合条件的第一个元素 findIndex返回的下标
const arr4=userList.find(el=>{
if(el.age>12){
return el.age>12
}
})
console.log(arr4)//[
{
name:“小明”,
age:18,
class:“3班”
}]

some有真则真 返回布尔值
every有假则假 返回布尔值
reduce遍历
累加
const arr=[1,2,3,4,5,6];
const red=arr1((p,n)=>{p+n})
console.log(red)//21
splice和slice的区别为：
1.splice改变原数组，slice不改变原数组。
2.splice除了可以删除之外，还可以插入。
3.splice可传入3个参数，slice接受2个参数。

改变原数组的方法

push unshift pop shift reverse splice sort
sort((a,b)=>{return a-b})
sort根据unicode 接受一个函数

数组排序

sort

数组去重

深拷贝 浅拷贝

JSON.parse(JSON.stringfy) 弊端
时间将转为字符串的形式
里有函数（function），undefined，Symbol 则序列化的结果会把 function 或 undefined 丢失；
NaN、Infinity 和 -Infinity，则序列化的结果会变成 null
json弊端详情
递归
_.cloneDeep（）通过lodash插件引入的
obiject.assign()

算法：去重 排序 递归

箭头函数和普通函数的区别

箭头函数是ES6提供的 可以省略function关键字
箭头函数的特点
1 语法简洁
2 箭头函数是匿名函数，不能作为构造函数 不能使用new
3 箭头函数没有arguments 可以使用rest参数解决
4 箭头函数的this在定义时就已经确定 而不是在函数调用时确定的 所以不能通过call apply bind改变this指向 它指向父级作用域的执行上下文

防抖和节流

都是防止某一时间频繁触发
防抖：搜索
节流：鼠标不断点击触发

33、重绘 重排（回流）

27、cookie sessionstorage localstorage
28、常见的状态码
29、http
http是服务器与客户端之间的通信协议 是处于TCP/IP协议分层中的应用层
特点
无状态 每次请求都是独立的 没有记忆能力 也就是说你这次请求和下一次请求不知道是不是同一个用户
单连接（无连接） 每次连接只能处理一个请求 服务器处理完客户端的请求，并收到客户端的应答后 断开连接
支持客户端/服务器模式
简单快速 客户端向服务器请求时 只需要指的请求方式和路径即可
灵活 http允许传输任意类型的数据对象 传输类型有content-type标记

4、动态加载路由

路由数据分为两种 静态路由数据和动态加载路由数据
静态路由前端写好的数据
动态路由是通过后端返回得到数据
用户登录成功后 在router.beforeEach中去请求路由数据 返回成功 通过router.addRoutes进行动态加载 可以放在vuex中 可以通过sessionStorge进行储存 有个问题刷新页面数据会丢失

5.路由懒加载

webpack会将懒加载的路由分块打包到一个单独的js中去，只有加载该路由的时候，才会加载这个chunk文件。

promise

es6提出解决异步编程的一种方案 解决回调地域问题
从理解上来说 我们可以把promise看成一个盒子 里面是未来会发生的事
从语法上说 它是一个对象 接受一个函数未作参数 这个函数接受两个参数 一个成功 一个失败
它有promise.then() promise.catch() promise.all() promise.race()

6.async await

es7提出的 解决异步编程的一个方案 async/await是同步语法，能以不使用回调函数的方式来实现异步。

关键字 async 写在函数前面 返回一个promise对象 可以看作有多个异步操作包装成的promise对象 await包裹在async函数中 await后跟的是一个promise对象

async标记的函数会返回一个Promise对象，Promise一旦被定义就会被立即执行
async/await 函数其实就是一种语法糖
async/await 是基于promise实现的，async 函数其实就是把 promise 做了一个包装
await 返回值是一个 Promise 对象，它只是把 await 后面的代码放到了 Promise.then()

axios
是基于promise封装的http请求
特点：它可以拦截请求和响应

7、时间循环 宏任务 微任务

js是单线程 一次只能执行一个任务 前一个任务执行完 才会执行后一个任务 所有任务都需要排队等待
所以当前一个任务耗时很长 就会引起阻塞

任务可以分为同步任务和异步任务
同步任务 就是 在主线程上排队执行的任务 只有当前一个任务执行完毕 才执行后一个任务
异步任务 是指 任务不进入主线程 而是进入任务队列 只有当主线程的所有任务执行完毕
才会读取任务队列 开始执行异步任务

异步任务 分为宏任务和微任务

宏任务 有 script settimeout setinterval postMessage MessageChannel setImmediate(Node.js 环境)
微任务 有 promise.then Object.observe MutationObserver、process.nextTick(Node.js 环境)

程序一开始 主线程 先执行一个宏任务 script脚本 产生的宏任务和微任务进入各自的任务队列中
第一个宏任务中同步代码执行完成 执行微任务 直到微任务队列清空
执行下一个宏任务 如此重复执行 这个过程就是事件循环

所以事件循环的定义 主线程内的任务执行完毕为空的时候 回去任务队列读取相应的任务。
推入到主线程执行 这个不断重复的过程就是事件循环

es6

babel把es6转化为es5

var let const

var 1、声明提升（变量提升）2、变量覆盖 3、没有块级作用域
let a=1;
let b=2;
[a,b]=[b,a]不引用第三方进行值互换

const1、一定要赋值 2、 值不允许被修改
数组结构赋值
对象解构赋值

字符串的拼接
字符串的includes() startsWith() endsWith()

function.name()
箭头函数

数组的find()
findIndex()
includes()

对象assign（）
promise
for of
async await
export import

12、mvvm

13、vue生命周期 父子组件生命周期

vue渐进式框架

vuejs是一个核心库 使用的过程中加入vuex等项目逐渐壮大

生命周期

data在created el才有mounted
如果假如keep-alive会多两个生命周期activated(进入) deactivated(离开)
如果加入了keep-alive 第一次进入组件会执行 beaforeCreated created beforeMount mounted activated 第二次只执行activated

$nextTick

betterScroll移动端滚动插件

scoped原理

作用：只在本组件中生效 不影响其他组件
原理：给节点新增自定义属性，css根据属性添加样式

vue中做样式穿透
scss stylus

computed和watch methods

computed:有缓存 计算属性，计算出一个结果，函数值改变就会重新计算 性能比methods好
初始化的时候会自动计算一次
会读取缓存数据 购物车
watch：监听 数据或者路由发生了改变才可以响应 搜索数据
初始化的时候不会自动计算一次watch(num,(new,old)=>{
},{immediate:true})第三个参数立即执行
初始化不触发，初始化触发watch需要immediate设为true

methods 没有缓存 eg点击方法
ajax可以写在哪
created

props和data优先级谁高

v-modeul原理

父子组件传值

props ￥emit
ref ￥refs
parent children
eventbus
vuex
provide inject

16、虚拟dom diff算法

一个对象比较深 怎么监听

watch

修饰符：

once 。self .stop .prevent表单
.number trim lazy
修饰符链接

xue响应式原理

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 数据劫持，来劫持各个属性的setter，getter，在数据更新时发布消息给订阅者，触发相应监听回调。

监听新增属性

$set()

返回一个list没有但不是全部 怎么处理

diff算法

snabbdom
环境搭建：

虚拟节点就是把dom数据化

h函数就是虚拟节点

h函数原理

patch函数原理

vuex

单向数据流
vuex不是持久化存储
使用localstroage 或者vuex-persist插件
vuex是一个专门为vue.js开发的状态管理模式，每一个vuex应用核心就是store(仓库)。store基本上就是一个容器，它包含着你的应用中大部分的state(状态)
vuex的状态存储是响应式的，当 vue组件中store中读取状态时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。
改变store中的状态的唯一途径就是显示 commit(提交)mutation，这样使得我们可以方便地跟踪每一个状态的变化。
State: 定义了应用状态的数据结构，可以在这里设置默认的初始状态
Getter: 允许组件从Stroe中获取数据， mapGetters辅助函数仅仅是将store中的getter映射到计算属性。
Mutation: 唯一更改store中状态的方法，且必须是同步函数。
Action: 用于提交muatation, 而不是直接变更状态，可以包含任意异步操作。dispatch
Module: modules，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理；如果所有的状态或者方法都写在一个store里面，将会变得非常臃肿，难以维护。

路由守卫

$route 和 $router 的区别

router路由对象
routes路由配置项
route当前路由信息
$router是vueRouter的一个对象，通过Vue.use(VueRouter)构造函数得到的一个router实例对象，这个对象是全局对象，它包含了所有的路由，包含了许多关键的对象和属性

$router.push({path:home})
$router.replace({path:home})//替换路由，没有记录

$route是一个跳转的路由对象，每一个路由都有一个$route对象 是一个局部变量 可以获得name path computes params quary

vue create test2wly

vue2和vue3的区别

vue -V查看的是脚手架vue-cli的版本
1、原理不同 vue2使用的是object.defineProperty对属性的get set进行监听 无法监控对象属性的新增和删除 用$set()
vue3 proxy
2、生命周期不同 去掉了beforeCreate created
setup(props,{}) 启动函数 也可写在<script setup## 标题>
reactive()接受一个对象为参数，返回响应式的数据 setup中没有this reactive({id:1})
es6扩展运算符，解构回取消双向数据绑定的特性 解决办法…toRefs(state) toRefs()转为响应式的数据
3、根节点不同
4、vue3打包的时候无用代码会 丢弃

npm install --save axios安装到生产模式 -dev是安装到生产模式
composition 和option

vue3组合式api优势

ref和reactive区别

Vue 3.0 中的 ref 和 reactive 有着不同的用途。

ref 用于创建一个可以在组件之间共享的响应式变量。它可以被用来在模板中直接访问，也可以在组件的计算属性和方法中使用。

reactive 则是一个辅助函数，用于将对象或数组转换为响应式对象。它可以用来在组件中维护状态，并在状态更改时触发视图更新。

总之，ref 用于创建单个响应式变量，而 reactive 用于创建一个响应式对象。

ts

查看版本 tsc -v(小写)
let a:number|string=‘10’//联合类型
let arr1:number[]=[1,2,3]
let arr1:string[]=[1,2,3]
let arr1:(number|string)[]=[1,2,3]
数组泛型（generics）是指在定义函数、接口或类的时候，不预先制定具体的类型，而在使用的时候再指定类型的一种 通过尖括号
let arr:Array=[1,2,3]
let arr:Array=[‘1’,‘2’,‘3’]
对象：
在面向对象中，接口（interface）是一个很重要的概念，它是对行为的抽象
interface IJiekou{
id:number,//必选项
title？:string,//可选项
[name:string]:any//任意属性
}
let o1:IJiekou={
id:9,
title:‘o1’,
fn:function(){
},
a:‘1’,
b:‘2’
}
数组对象:
interface IList{
id:number,
name:string
}
let list:Ilist[]=[
{id:1,name:‘小明’}，
{id:2,name:‘小红’}
]
等价
let list:Array=[
{id:1,name:‘小明’}，
{id:2,name:‘小红’}
]
//函数 输入类型 输出类型
function fn(n1:number(输入类型),n2:number):number(输出类型){
return n1+n2
}
function fn(n1:number,n2:string):(number|string)[]{
return [n1+n2]
}
//void 无返回值
function fn(n1:number,n2:number):void{
if()
}

//泛型（generics） 通过尖括号
function fn(n1:T,n2:T):T{
if()
}
//接口
interface IFn(){

}

接口首字母一般大写 o1对象受到了接口的约束
react和vue区别
小程序

跨域

vue优化

加载方向：
减少http请求（精灵图，雪碧图，文件的合并）
减小文件大小（资源压缩，图片压缩，代码压缩）
cdn（第三方库,大文件，大图）
SSR服务端渲染，预加载
懒加载
分包（小程序）
性能：
减少dom操作 减少回流重回 可利用文档碎片

提取公共的css js代码
把小的图片转化为base64的格式
图片的压缩
图片的懒加载
写成组件
路由懒加载
第三方的按需引入
cdn引入第三方

图片懒加载

也有插件layload
原理：图片的加载是由src的值引起的，当src赋值 浏览器会请求图片，基于这个，可以利用h5属性data-xxx来保存图片的路径，当我们需要加载图片的hi和才将data-xxx赋值给src，就能实现图片的按需加载，也就是懒加载

let num=document.documentElementByTagName(“img”).length//9
let img=document.documentElementByTagName(“img”)//所有标签9个

let n=0;
function lazyLoad(){
let seeH=document.documentElement.clientHeight;//可视区域
let scrollT=document.documentElement.scrollTop||document.body.scrollTop//滚动条滚动的距离
for(let i=n;n<num;i++){
if(img[i].offsetTop<seeH+scrollT){
if(img[i].getAttrbute(“src”)==“img.gif”){
//备胎转正
img[i].getAttrbute(“src”)==img[i].getAttrbute(“data-src”)
}
n=i+1;
}
}
}

webpack

webpack

输入url回车发生了什么

url统一资源定位符，俗称网址 是ip的映射
www万维网 服务器
http传输协议https是在很http和TCP之间加了一层TSL或SSL
www.baidu.com–>DNS域名解析–>拿到真是ip–>建立连接（三次握手）–>拿到数据，渲染页面（dom tree css tree并行构建 ）–>四次挥手
1、第一次访问/第二次访问将域名解析的ip存在本地=》读取本地缓存
2、解析url
DNS匹配真实的ip
ping 测试链接
3、

XSS攻击

跨站脚本攻击

页面被注入了恶意代码
经过转义 a链接跳转

禁止javascript 链接
白名单 http或hppts
xss三种类型
存储型
反射性
Dom型

hash和history的区别

1.hash模式url带#号，history模式不带#号。
2.hash通过hashchange监听hash值得变化 history通过h5新增得pushState和replaceState
window.history.pushState(state, title, url)
// state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
// title：标题，基本没用，一般传 null
// url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。
// url可以是绝对路径，也可以是相对路径。
// 如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, ‘./qq/’)，
// 则变成 https://www.baidu.com/a/qq/，
// 执行history.pushState(null, null, ‘/qq/’)，则变成 https://www.baidu.com/qq/
window.history.replaceState(state, title, url)
// 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录
window.addEventListener(“popstate”, function() {
// 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发
console.log(event.state)
});
history.state;//是一个属性，可以得到当前页的state信息。
// 通过window.history对象来控制页面历史记录跳转
window.history.back() // 后退
window.history.forward() // 前进
window.history.go(1) // 前进一步，-2为后退两步，window.history.lengthk可以查看当前历史堆栈中页面的数量
3.刷新页面hash模式下可以正常访问 history模式下会返回404 需要后端进行配置

上线是history 告诉后端重定向一下
添加链接描述

3、遍历数组和对象的方法大佬博客
(1)for in可以遍历数组和对象
(2) for of只能遍历数组 不能遍历对象 如果想遍历对象可以用Object.keys(obj1) Object.values(obj1) Object.entries(obj1)
(3) forEach
重点1: forEach第一个参数的函数中的传入的参数有三个分别为(item,index,arr),即数组当前数组的元素值，元素下标，和当前数组
重点2：forEach没有返回值 也就是return
重点3：forEach不能使用break或continue关键字进行跳出循环
(4)map:和forEach类似 但是有返回值
4、es6新增
5、作用域链 原型 原型链
vue部分：
1、v-for为什么加key
大佬博客
2、h函数 render函数
3、虚拟dom（vnode）和diff算法大佬博客
4、开启Gzip压缩 SSR
5、vue响应式原理 双向数据绑定v-model原理
6、路由的hash和history
7、vue-loader
8、webpack模块的面试题
9、ts相关面试题
10、ajax请求为什么放在mounted中 js单线程 ajax异步获取数据
11、mixin
12、.promise和async/await区别，简洁讲述？

自适应
淘宝无线适配 网易 拉钩 就是一个js文件 lib-flexible
淘宝适配+布局单位rem
rem原理就是可视区clientWidth除以10 就是根元素的font-size window.resize 每次改变窗口大小调用
响应式 布局结构会变 eg bootstrap 用户不多 或春展示类的项目 公司官网 专题页面

访问量比较大的 像淘宝 就会pc端一套 移动端一套代码 pc加入一点响应式

移动端设计图一般750 750/2就是375 正好是iphone6的尺寸

地图