set，map区别
1.Map是键值对，Set是值的集合
2.Map可以通过get方法获取值，而set不能;因为它只有值；
3.都能通过迭代器进行for...of遍历；
4.Set的值是唯一的可以做数组去重，Map由于没有格式限制，可以做数据存储
盒子水平垂直居中方法(常见)
四种方式：
利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。
.div {
position: absolute;
width: 200px;height: 200px;
left: 50%;top: 50%;
transform: translate(-50%, -50%);
}
利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况。
.div { position: absolute;
width: 200px;height: 200px;
left: 0;right: 0;
top: 0;bottom: 0;
margin: auto;
}
利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况。
.div {
position: absolute;
width: 200px;height: 200px;
left: 50%; top: 50%;
margin-left: calc(-200px / 2);
margin-top: calc(-200px / 2);
}
使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。
.div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items:center;
}
隐藏元素的方法
浏览器渲染机制
h5新特性，语义化
html5新特性：音频video 视频 audio、画布canvas、H5存储localStorage sessionStorage
语义化标签 ： header nav main article section aside footer
合理正确的使用语义化的标签来创建页面结构 如 header,footer,nav
盒子模型由哪些组成
content 内容、padding 内填充、border 边框、外边距 margin
描述cookies sessionStorage localStorage区别
相同点：都存储在客户端
不同点：1.存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
BFC
BFC就是块级格式化上下文，让元素成为一个独立的空间 不受外界影响也不影响外面布局
css3新特性(介绍一下css3)
var let const区别
js有哪些基础数据类型
基础数据类型String、Number、Boolean、Undefined、Null
引用数据类型: Object、Array、Function、Date等
Symbol、BigInt是ES6之后新增的 属于基本数据类型
Symbol 指的是独一无二的值
BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数
null和undefined区别
首先 Undefined 和 Null 都是基本数据类型
未定义，一般变量声明了但还没有定义的时候会返回 undefined
空对象。null主要用于赋值给一些可能会返回对象的变量，作为初始化。
==和===区别
js中哪些数据在if判断时是false(6个)
1、undefined（未定义，找不到值时出现）
2、null（代表空值）
3、false（布尔值的false，字符串"false"布尔值为true）
4、0（数字0，字符串"0"布尔值为true）
5、NaN（无法计算结果时出现，表示"非数值"；但是typeof NaN===“number”）
6、""（双引号）或’’（单引号） （空字符串，中间有空格时也是true）
注意空数组空对象，负值转的布尔值时都为true
判断数据类型的方法有哪些，有什么区别
深拷贝浅拷贝
数组的方法
js数组去重
作用域作用域链
作用域：变量和函数起作用的范围。作用域最大的用处就是隔离变量，不同作用域下的同名变量不会有冲突。
作用域链：访问变量时，自己的作用域中没有，一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃，这种一层一层的关系，就是作用域链
原型、原型链
原型：原型分为隐式原型和显式原型，每个对象都有一个隐式原型，它指向自己的构造函数的显式原型。每个构造方法都有一个显式原型
原型链：多个_proto_组成的集合
this指向
普通函数：谁调用就指向谁，没有调用者，就指向全局对象window。
定时器 this指向window。
箭头函数 没有this,它的this指向取决于外部环境。
构造函数：this是指向实例
call apply bind区别
相同点：改变this指向。
不同点：
call和apply会调用函数，并且改变函数内部this指向，call和apply传递的参数不一样，call传递参数使用逗号隔开，apply使用数组传递
bind不会调用函数，会改变函数内部this指向
应用场景：
闭包，闭包的使用场景
闭包：定义在一个函数内部的函数（方法里面返回方法）。
闭包的使用场景：settimeout、回调、函数防抖、封装私有变量
闭包存在的意义是什么？(1) 延长变量的生命周期；(2) 创建私有环境；
箭头函数，普通函数区别
外形不同：箭头函数使用箭头定义，普通函数中没有
箭头函数都是匿名函数。普通函数有匿名函数，也有具体名函数
箭头函数不能用于构造函数，不能使用new。普通函数可以用于构造函数，以此创建对象实例。
this指向不同:(1).箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()
(2).普通函数的this指向调用它的那个对象
promise
什么是：
Promise是ES6中的一个内置对象，实际是一个构造函数
特点：
①三种状态：pending（进行中）、resolved（已完成）、rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都不能改变这个状态。
②两种状态的转化：其一，从pending（进行中）到resolved（已完成）。其二，从pending（进行中）到rejected（已失败）。只有这两种形式的转变。
③Promise构造函数的原型对象上，有then()和catch()等方法，then()第一个参数接收resolved()传来的数据，catch()第一个参数接收rejected()传来的数据
作用：
①通常用来解决异步调用问题
②解决多层回调嵌套的方案
③提高代码可读性、更便于维护
function getJSON() {
return new Promise((resolve, reject) => {
setTimeout(() => {
let json = Math.random() * 2
if (json > 1) {
resolve(json)
} else {
reject(json)
}
}, 2000)
})
}
const makeRequest = () =>
getJSON()
.then(data => {
console.log('data==>', data)
return 'done'
})
.catch(err => {
console.log('err==>', err)
})
makeRequest()
async await
什么是：
①async/await是ES7新特性
②async/await是写异步代码的新方式，以前的方法有回调函数和Promise
③async/await是基于Promise实现的，它不能用于普通的回调函数
④async/await与Promise一样，是非阻塞的
⑤async/await使得异步代码看起来像同步代码，这正是它的魔力所在
Async/Await的使用
function getJSON() {
return new Promise((resolve, reject) => {
setTimeout(() => {
let json = Math.random() * 2
if (json > 1) {
resolve(json)
} else {
reject(json)
}
}, 2000)
})
}
const makeRequest = async () => {
const value = await getJSON()
console.log(value)
return value
}
makeRequest()
Async/await 比 Promise 更优越的表现
1、简洁干净：使用 async/await 能省去写多少行代码
2、错误处理：async/wait 能用相同的结构和好用的经典 try/catch 处理同步和异步错误，错误堆栈能指出包含错误的函数。
3、调试：async/await 的一个极大优势是它更容易调试，使用 async/await 则无需过多箭头函数，并且能像正常的同步调用一样直接跨过 await 调用
Async/await进一步优化了Promise.then()的缺点，使代码更简洁，所以在项目中尽量使用Async/await
for…in 和 for…of的区别
防抖节流
函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
应用场景：文本输入的验证；
限制 鼠标连击 触发
函数节流：每隔一段时间，只执行一次函数。
应用场景：滚动加载，加载更多或滚到底部监听。
搜索联想功能
es6新特性(介绍一下es6)
...、箭头函数、promise、async/await、let和const、set集合、导入improt 导出export default、smybol新的基本类型
http,https区别
1、HTTPS协议需要CA证书,费用较高; 而HTTP协议不需要
2、HTTP协议是超文本传输协议,信息是明文传输的,HTTPS则是具有安全性的SSL加密传输协议;
3、使用不同的连接方式,端口也不同,HTTP协议端口是80,HTTPS协议端口是443;
4、HTTP协议连接很简单,是无状态的;HTTPS协议是具有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTP更加安全
如何判断一个对象是空对象？
1.使用JSON自带的.stringify万法来判断：
if(Json.stringify(obj)=='{}'){
console.log('空对象')
}
2.使用ES6新增的方法Object.keys()来判断：
if(Object.keys(Obj).length<0){
console.log('空对象')
}
js哪些操作会造成内存泄露
什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
vue.........
介绍一下MVC MVVM
区别
v-model的原理
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
为什么data是一个函数
每一个组件都有自己的私有作用域，确保各组件数据不会被干扰。
router和route的区别
query和params 有何区别？
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
// params传递
<router-link :to="`/home/news/shownews/${n.id}/${n.name}`">{{ n.name }}</router-link>vue组件通讯有哪些方式
父子之间传值：
首先 使用import child from './child.vue'；components: { comArticle },建立父子关系
1.1父组件通过:自定义名称="值",
1.2子组件使用props接受,与data同级,子组件接收到数据之后，不能直接修改父组件的数据。否则会报错，因为当父组件重新渲染时，数据会被覆盖。如果只在子组件内要修改的话推荐使用 computed.
<!-- 父组件 -->
<template>
<div class="section">
<child :msg="articleList"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'HelloWorld',
components: { comArticle },
data() {
return {
msg: '阿离王'
}
}
}
</script>
<!-- 子组件 child.vue -->
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
props: {
msg: String
}
}
</script>2.$emit 子向父传值2.1子组件通过this.$emit('自定义事件',参数)
2.2父组件用@接受自定义事件,并定义方法.
<!-- 父组件 -->
<template>
<div class="section">
<child :msg="articleList" @changMsg="changMsg"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'HelloWorld',
components: { comArticle },
data() {
return {
msg: '阿离王'
}
},
methods:{
changMsg(msg) {
this.msg = msg
}
}
}
</script>
<!-- 子组件 child.vue -->
<template>
<div>
{{ msg }}
<button @click="change">改变字符串</button>
</div>
</template>
<script>
export default {
props: {
msg: String
},
methods: {
change(){
this.$emit('changMsg', '阿离王带你学习前端')
}
}
}
</script>
生命周期方法，在哪一步发送请求
vue2 在created 和 mounted都可以发送请求，区别不大。但在create中时无法获取dom
vue3 是在onMounted发请求
生命周期
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，data和methods中的数据都还没有初始化。
create：data 和 methods都已经被初始化好了。如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：已经编译好了模板，但是还没有挂载到页面中，此时，页面还是旧的
mounted：Vue实例已经初始化完成了，进入到了运行阶段。如果想要操作页面上的DOM节点，最早在这个阶段中进行
beforeUpdate：页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，还没有真正被销毁
destroyed：已经被销毁了。
v-if v-show区别
v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏；
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果；
使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。
.vue , 微信小程序 , uni-app属性的绑定
vue和uni-app动态绑定一个变量的值为元素的某个属性的时候，会在属性前面加上冒号":";
小程序绑定某个变量的值为元素属性时，会用两个大括号{{}}括起来，如果不加括号，为被认为是字符串。
说一下vue3.0你了解多少?
vue2中，我们一般会采用mixin来复用逻辑代码，挺好用的，但是存在一些问题：例如代码来源不清晰、方法属性等冲突。
基于此在vue3中引入了Composition API（组合API），使用纯函数分隔复用代码。
在vue2中，组件必须只有一个根节点，很多时候会添加一些没有意义的节点用于包裹。Fragment组件就是用于解决这个问题的
vue、小程序、uni-app中的本地数据存储和接收
vue：
存储：localstorage.setItem（‘key’，‘value’）
接收：localstorage.getItem（‘key’）
微信小程序：
存储：通过wx.setStorage/wx.setStorageSync写数据到缓存
接收：通过wx.getStorage/wx.getStorageSync读取本地缓存，
uni-app：
存储：uni.setStorage({key:“属性名”，data:“值”}) //异步
uni.setStorageSync(KEY,DATA) //同步
接收：uni.getStorage({key:“属性名”,success(res){res.data}}) //异步
uni.getStorageSync(KEY) //同步
vue , 微信小程序 , uni-app的页面生命周期函数
vue：
beforeCreate（创建前）
created（创建后）
beforeMount(载入前，挂载）
mounted（载入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（销毁前）
destroyed（销毁后）
小程序/uni-app：
1. onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
2. onShow：加载完成后、后台切到前台或重新进入页面时触发
3. onReady：页面首次渲染完成时触发
4. onHide：从前台切到后台或进入其他页面触发
5. onUnload：页面卸载时触发
6. onPullDownRefresh：监听用户下拉动作
7. onReachBottom：页面上拉触底事件的处理函数
8. onShareAppMessage：用户点击右上角转发
vue-router 有哪几种导航守卫?
全局守卫、路由独享守卫、路由组件内的守卫
//路由的钩子函数总结有6个
全局的路由钩子函数：beforeEach、afterEach
单个的路由钩子函数：beforeEnter
组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate
为什么说vue是一个渐进式的javascript框架，渐进式是什么意思？
vue允许你将一个页面分割成可复用的组件，每个组件都包含属于自己的html、css、js用来渲染网页中相应的地方。
对于vue的使用可大可小，它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。
vue是响应式的（reactive）这是vue最独特的特性，也就是说当我们的数据变更时，vue会帮你更新所有网页中用到它的地方。
vue的性能优化
路由懒加载、图片懒加载、第三方组件库按需引入、keep-alive缓存页面、使用v-show复用DOM、避免v-if与v-for同时使用
为什么避免v-for和v-if同时使用？
v-for比v-if优先级高，使用的话每次v-for都会v-if判断，影响性能
异步请求适合在哪个生命周期调用？
可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。
我一般在 created 钩子函数中调用异步请求，能更快获取到服务端数据，减少页面 loading 时间；
过滤器的作用？如何实现一个过滤器？使用场景？
过滤器是用来过滤数据的，在vue中使用filters来过滤数据；使用场景：例如(时间/日期 格式化)