1.说说你对JSON 的了解？
JSON(JavaScript Object Notation) 是一种
轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。
格式：采用键值对，例如：{'age':'12', 'name':'back'}
2.HTTP状态码知道哪些？
- 200 OK 正常返回信息
- 404 Not Found 找不到如何与 URI 相匹配的资源
- 500 Internal Server Error 最常见的服务器端错误。
- 401 Unauthorized 请求未授权。
3.你有哪些性能优化的方法？
- 当需要设置的样式很多时设置className而不是直接操作style。
- 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
- 路由懒加载，图片预加载，雪碧图，字体图标
4.重构与回流
- 什么是回流（layout）：当render tree（渲染树）中的一部分（或全部）因为元素的
规模尺寸，布局，隐藏等改变而需要重新构建。这就是回流（reflow）
-什么是重绘（paint）： 当render tree（渲染树）中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color，则
就叫称为重绘- 区别：回流必将引起重绘，而
重绘不一定会引起回流，比如：只有颜色改变的时候只会发生重绘而不会引起回流，
当页面布局和几何属性改变时就需要回流
比如：添加或删除可见Dom元素，元素位置改变，元素尺寸改变（边距、填充、边框、宽高等’’）内容改变
5.async 和 await的基本使用
async 会将其后的函数（函数表达式）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。
export const uploadFiles = async (filePath) =>{
let filId = await wx.cloud.uploadFile({
cloudPath: 'comment-pic/'+(new Date()).valueOf()+'.png', // 文件名
filePath:filePath, // 文件路径
})
return filId.fileID
}
6.null 和 undefined 的区别
null 表示一个值被定义了，定义为“空值”；
undefined 表示根本不存在定义(声明一个变量但未赋值)
7.vue响应式原理
当一个Vue实例创建时，vue会遍历data选项的属性，用
Object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
8.组件内部实现双向绑定
父组件通过 props 传值给子组件，子组件通过 $emit 来通知父组件修改相应的props值
9.px em rem 的区别
- px 像素单位 相对于显示器分辨率(无法
自适应大小)- em 相对单位，相对于父元素
- rem 相对单位 相对于html根节点
10.浅拷贝和深拷贝
- 浅拷贝：有两种方式，一种是把一个对象里面的所有的属性值和方法都复制给另一个对象，另一种是直接把一个对象赋给另一个对象，使得两个都指向同一个对象
- 深拷贝：把一个对象的属性和方法一个个找出来，在另一个对象中开辟对应的空间，一个个存储到另一个对象中。
区别：浅拷贝只是简单的复制，对对象里面的对象属性和数组属性只是复制了地址，并没有创建新的相同对象或者数组。而深拷贝是完完全全的复制一份，空间大小占用一样但是位置不同,开辟了新的内存
11. 数组变化数据不更新
Vue 不能检测以下变动的数组：
- 当你利用索引直接设置一个项时，vm.items[indexOfItem] = newValue
- 当你修改数组的长度时，例如： vm.items.length = newLength
哪些方法使数组变化，可以被vue检测到 :
push()、pop()、shift(),unshift(),splice(),sort(),reverse()
filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
12.使一个盒子水平居中的方法
1.flex布局 jusitufy-content：center aligin-item：center
- 绝对定位 transfrom
13.小程序登录授权的过程
1.授权 wx.getUserInfo........
2.登录
- 使用wx.login()从微信服务器获取code
- 小程序前端将code发送给服务器，开发者利用appId、appSecret和code向服务器换取用户openId和session_key
- 开发者服务器将登录态返回给小程序前端，小程序前端使用wx.setStorageSync() 将登录态保存起来
- 小程序前端在执行业务请求时将登录态发送给开发者服务器，以便开发者服务器知道当前操作的用户是哪位。
- 3.第三步：写session
前端保存 ，可以通过wx.checkSession() 来检查session_key 是否过期
在后端写session 的时候可以直接设定过期时间，定期通知小程序前端重新进行登录(wx.login)。
14.sass和less的区别
- 相同之处：1.混入、颜色、运算、嵌套规则
- 不同：less环境较sass简单
前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点
sass有变量和作用域还有函数
15.vue全部清空初始化组件data的值
//初始化所有数据
Object.assign(this.$data,this.$options.data())
//初始化某个对象中的数据
Object.assign(this.$data.xxx,this.$options.data().xxx)
16.数组去重
// 利用ES6 Set去重（ES6中最常用）
Array.from(new Set(arr))
// 利用indexOf去重
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array .indexOf(arr[i]) === -1) {
array .push(arr[i])
}
}
// new set数组对象去重 主意：这里会对比对象中的每一个字段，相同的才会被去重
let arr = [
{
name:'123',
id:2,
},
{
name:'123',
id:23,
},
{
name:'234',
id:23,
},
{
name:'123',
id:2
},
]
const newArr = [...new Set(arr.map(e=>JSON.stringify(e)))].map(item=>JSON.parse(item))
console.log(newArr) // [{"name":"123","id":2},{"name":"123","id":23},{"name":"234","id":23}]
// 根据指定字段去重数组对象
let arr = [
{
name:'123',
id:2,
},
{
name:'123',
id:23,
},
{
name:'234',
id:23,
},
{
name:'123',
id:2
},
]
const res = new Map();
let newArr = arr.filter(item => !res.has(item.id) && res.set(item.id,1))
console.log(newArr,'newArr') // [{"name":"123","id":2},{"name":"123","id":23}]
17.解决SPA(单页应用)首屏加载速度慢
减小入口文件积 (
路由懒加载)
静态资源本地缓存 （采用http缓存，前端合理使用localStorage）
UI框架按需加载 （例如elemenetUI，antd）
图片资源的压缩 （使用icon，雪碧图，减少http请求）
组件重复打包
开启GZip压缩
使用SSR （服务端渲染，组件或页面通过服务器生成html字符串，在发送到浏览器）
19.localStorage和sessionStorage的区别
- localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在.
- sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
