金九银十的时间到了，又是适合跳槽的时间，我之前是在郑州工作，然后九月来上海这边，面了一周左右，找到了还算满意的工作，现在整理一下面试中遇到的问题，给要在上海找工作的小伙伴一个参考，也给自己下次换工作做一个参考，哈哈
我是主要做vue的还没有学vue3所以面试中大多是vue2的问题，但是上海挺多公司开始转vue3了，这个还是要抓紧学习
先把问题记录下来，有时间会更新答案
一、vue和js部分
1.mvvm原理
- mvvm分为Model、View、ViewModel
其中Model代表数据模型，也可以再Model中定义数据修改和操作的业务逻辑
View代表UI组件，负责将数据模型转化为ui显示出来
ViewModel监听模型数据的改变和控制视图行为、处理用户交互，就是要给同步的Model对象，连接Model和View。
在mvvm架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 View 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel通过双向数据绑定把View层和Model层连接起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理
2.数据双向绑定原理
- vue的数据双向绑定是通过数据劫持结合发布者-订阅模式的方式来实现的
vue实现数据双向绑定的核心是Object.defineProperty()方法
Object.defineProperty()在执行中，通过get和set函数
3.v-model原理
4.组件传参（父子，兄弟，组件传参的生命周期）
- 父传子 props
- 子传父 $emit
- 兄弟组件传参 eventBus
- 组件传参时的生命周期：父beforeCreat、父created、父beforeMount、子beforeCreat、子created、子beforeMount、子mounted、父mounted、父beforeUpdate、子beforeUpdate 、子updated、父updated、 父beforeDestory、子beforeDestory、子destoryed、父destoryed
5.vuex(异步方法和同步方法)
6.watch和computed
computed是vue的计算属性，可以用于一些复杂的运算，有缓存性，依赖的值不变的情况下不会重新计算
1.是计算值，
2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值
3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数
watch是监听属性，没有缓存，deep(深度监听，用于数组，对象)，handler，immediate（立即执行）
1.是观察的动作，
2.应用：监听props，$emit或本组件的值执行异步操作
3.无缓存性，页面重新渲染时值不变化也会执行
7.data为什么是个函数
组件实例对象data必须为函数，目的为了防止多个组件实例直接共用一个data，产生数据污染
在组件复用时，data作为函数，有自己的存储空间，每次都能返回一个新的data，其中一个组件中data的值变化，不会影响其他组件中的data
8.promise如果有一个方法报错会怎样，如果想要不管报错仍输出是怎么实现
9.箭头函数this指向
10.作用域和作用域链
11.原型和原型链
12.数组的一些方法，并且那些方法会返回新数组
13.跨域怎么处理
14.路由权限，按钮权限
15.axios的请求拦截和返回拦截主要是做什么
16.vue常用的一些ui框架有哪些
pc：elementui，avue，Ant Design of Vue
移动：vantui，mint ui
17.async、await做什么和promise的区别
18.v-for和v-if能放一起用吗
不能，v-for优先级比v-if高，放在一起使用的时候，v-if要在每个循环中创建销毁dom，浪费资源
二、小程序部分
1.小程序的生命周期
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { },
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数，可用于下拉加载
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
2.小程序组件生命周期执行顺序
3.小程序页面接收参数在那个生命周期内
onLoad(option)
4.小程序页面栈（10层）
5.小程序发布流程
上传--->提审--->发布
6.小程序头部导肮（胶囊导航的位置）
7.小程序和小程序间的跳转
wx.navigateToMiniProgram
可配置跳转版本（开发版，体验版，正式版)
8.小程序登录流程（用户触发登录和静默登录）
9.小程序内嵌web-view（准备工作及如何实现）
配置合法域名，新建web-view页面
10.微信h5跳转小程序
wx-open-launch-weapp 小程序原始id
可参考https://www.jianshu.com/p/7fbca9f7df2b
三、css和html部分
1.盒模型，ie和模型和标准盒模型
计算宽度不一致
ie：content+padding+border
标准：content
box-sizing：content-box ( 标准 )
box-sizing：border-box ( ie )
2.flex布局
flex布局可以更好的适配移动端
3.垂直左右居中
1.flex布局
2.不知道子元素宽高：position:absolute;top:50%;left50%; transform:translate(-50%,-50%)
3.已知子元素的宽高：position:absolute;top:50%;left50%;margin-left:宽的一半,margin-top:高的一半
4.一侧固定另一侧自适应有几种实现方式
1.flex布局，左侧固定宽，右侧flex:1
2.左侧浮动，右侧margin-left:左侧的宽
3.左侧定宽，右侧绝对定位，left:左侧的宽
4.左侧绝对定位，右侧margin-left:左侧的宽
5.上下有宽高，中间自适应怎么实现
上下宽高固定，下用绝对定位定在底部，中间绝对定位，top：上高，bottom：下高；height：auto
6.BFC是什么
相当于一个完全封闭的盒子，元素布局不受外界影响
生成BFC的条件：float(除none)、overflow、
可以解决浮动布局造成的父元素塌陷
解决外边距重合的问题
可以计算浮动的高，
