最近找工作，记录下面试问题，以及找的答案

1、简述下做的小程序，以及自己负责的模回收块

因为是公司唯一一个前端，所以所以模块都是我负责的。我做的这个小程序主要满足门店和回收员回收的作用，主要有门店可以通过预约回收员来上门回收，可以通过首页的推荐回收员中选择回收员预约，也可以从自己的回收员列表中选择回收员，在预约界面选择自己要回收的产品和数量，回收员看到预约单后上门回收。回收完成后生成回收的订单。回收员这一模块的小程序还包括回收区域的选择，开通席位，增加下属员工等，其中开通席位是为了在交易系统公众号平台里将自己回收的产品卖出。

2、做小程序中遇到的坑

1、不能使用浏览器内置对象，操作dom通过wx.createSelectorQuery()
2、tab组件遮挡下面的内容，给下面的内容设置margin
3、小程序最多只能打开5个层级页面，多了wx.navigeteTo会有问题，避免层级过多交互或使用wx.redirectTo
4、css中background-image不能使用本地图片，使用网络图片或者base64图片，或者使用image标签

3、小程序能使用浏览器内置对象吗

4、小程序的canvas怎么渲染一张图片

5、vue生命周期以及异步函数写在哪个生命周期内

beforeCreate: 创建前，此时已有了router，但data,methods,watch还没有
created:创建后，此时已有了data,methods,watch,异步请求可以在这里调用，但不能操作dom
beforeMoount: 挂载前，已有了虚拟dom,相关render函数开始调用
mounted:挂载后，$el实例挂载完成可以操作dom，需要操作dom的异步请求可以在这里调用
beforeUpdate:更新前，数据更新之前调用
updated：更新后
beforeDistory:实例销毁之前
distoryed:实例销毁之后

6、箭头函数

（）=> {}
优点: 更简洁的语法，不绑定this
箭头函数中访问的this实际上是其父级作用域中的this，箭头函数本身的this是不存在的，这样就相当于箭头函数的this是在声明的时候就确定了

7、vue传值

1、路由带参数传值

this.$router.push{(}^{\prime }/orde{r}^{\prime },query(id:123))相当于url带参数传值，可见this.$router.push(‘order’,params({id:123}) 相当于post传参

2、父子组件传值

父组件给子组件传值：
父组件在子组件中通过：属性值的方式传值，子组件通过props接收
this.$parent.XX子组件给父组件传值子组件通过$emit(‘child-event’,‘我是子组件传的值’)传值，父组件通过@child-event="自定义函数"接收
this.$refs.header

3、通过eventBus进行传值

定义一个新的vue实例专门用于传递数据，并导出
定义传递的方法名和传输内容，点击事件或钩子函数触发eventBus.emit事件

emittoB (){
eventBus.$emit('eventFromA', '我是a传过来的值')
}

接收传递过来的数据

getData (){
	let that = this // 代表vue实例
	eventBus.$on('eventFromA'，function（val）{
	that.title = val
	this.title = val // this指eventBus的实例
	})
}

4、vux传值

5、sessionStorage传值

8、导航守卫，什么情况下使用了

全局守卫

router.beforeEach：全局前置守卫，进入路由之前 （判断用户是否登录）
router.beforeResolve：全局解析守卫，在beforeRouteEnter调用之后调用
router.afterEach：全局后置钩子，进入路由之后

组件独享守卫 beforeEnter

例如给home配置单独的守卫

{
    path: '/',
    name: "home",
    component: Home,
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      if(from.name === 'about'){
        alert("这是从about来的")
      }else{
        alert("这不是从about来的")
      }
      next();  // 必须调用来进行下一步操作。否则是不会跳转的
    }
  }

路由组件内的守卫

beforeRouteEnter()：进入路由前，不能使用this(因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。)
beforeRouteUpdate()：路由复用同一个组件时
beforeRouteLeave()：离开当前路由时

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

一个完整的导航解析流程

1、导航被触发。
2、在失活的组件（即将离开的页面组件）里调用离开守卫。 beforeRouteLeave
3、调用全局的 beforeEach 守卫。
4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5、在路由配置里调用（路由独享的守卫） beforeEnter。
6、解析异步路由组件
7、在被激活的组件（即将进入的页面组件）里调用 beforeRouteEnter。
8、调用全局的 beforeResolve 守卫 (2.5+)。
9、导航被确认。
10、调用全局的 afterEach 钩子。所有的钩子都触发完了。
11、触发 DOM 更新。
12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

9、promise的特性，用过哪些promise方法

Promise 是异步编程的一种解决方案，其实是一个构造函数.
1、对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）

10、用的哪个脚手架，说说webpack config的主要配置

11、单页和多页应用的优缺点

单页面的优点：

1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
2，前后端分离
3，页面效果会比较炫酷（比如切换页面内容时的专场动画）

单页面缺点：

1，不利于seo
2，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）
3，初次加载时耗时多
4，页面复杂度提高很多

多页应用

优点:SEO效果好
缺点:页面切换慢,每次切换页面需要选择性的重新加载公共资源

12、谈谈对mvvm的理解

13、vuex以及项目中什么时候使用了，action和mutation

14、有没有听过国家i18n

15、webpack做过那些优化

16、vue双向绑定原理（转载于https://www.jianshu.com/p/e7ebb1500613）

1、vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
2.核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；
3.介绍一下Object.defineProperty()方法
（1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）
（2）简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

17、闭包，项目中哪里使用过

闭包：能读取其他函数内部变量的函数

使用场景

1、settimeout(fn,1000) 函数传参
2、函数防抖
3、回调函数

18、cookie、sessionStorage、 localStorage区别

cookie: 数据大小 <=4k 设置cookie过期之前一直有效 cookie数据自动上传到服务器端，服务器也可写数据到客户段
sessionstorage: 数据大小 5M 浏览器关闭后删除 不会上传数据到服务器
localstorage: 数据大小5M 数据永久保存 不会上传数据到服务器

19、vue数据驱动

20、前端设计模式

21、小程序和h5通信

22、h5的新特性