框架
面试的时候,一般面试官会问vue react哪个用的多,再针对你用的多的进行提问
就我个人而言,我觉得网上讲解vue源码的博客比较多,vue的相关面试题整理的也比较多,面试时可能更好回答一些
react用的没有vue多,源码还没开始读,reactHook出现后慢慢替代了class组件,逐渐趋于主流,可以结合公司的项目针对react16.8版本之后的reactHook进行准备
angular2+,上份公司是用angular2,但是快4年没写了,加上招聘JD主流还是vue react,考虑到精力和时间有限,就不整理了
如果简历写了小程序的话,需要针对小程序优化点,setData,小程序登录机制,小程序订阅等进行准备
接下来列一些vue react 小程序常见的面试题和考察重点
Vue
vue官方文档就不说了,必读 Vue官方文档
面试常考察点,生命周期,new Vue过程,数据响应式如何实现,双向绑定如何实现,为何vue2的defineProperty无法监听新增对象改变,和vue3的proxy区别,AST语法,虚拟dom如何渲染到页面,diff算法介绍,nexttick原理 Vuex 是什么等
MVVM
MVVM是 Model-View-ViewModel 的缩写,MVVM 是一种设计思想。Model 层代表数据模式,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化为 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。
基础
父子组件传值,父-> 子: props,子-> 父: on+emit,父<>子: on.sync(语法糖)来的,兄弟 : event bus | vuex
生命周期,8个就不写了
css的scoped
常用指令 v-if v-show v-for v-model
v-if v-show的区别
v-if和v-for同级使用的问题
v-for为什么要加key
$refs
new Vue()过程
看了很多博客,理解初始化的过程,理清observer dep watcher的关系,最绕的我觉得就是dep,dep.target
new Vue() ,过程非常复杂 ,步骤很多
- 调用init.js中的
Vue.prototype._init
方法,进行了一系列处理,合并options配置,初始化各种方法,initLifecycle,initRender,callHook(vm,'beforeCreate')
,initState
,callHook(vm,'created')
- 其中initState()方法内部又执行了initProp initMethods
initData
initComputed initWatched - 重点看下initData这个函数,判断data是否是一个函数,之后调用
observe
方法 new Observer()进行proxy代理,数据劫持 new Observer()
--> 调用walk()
--> 调用defineReactive(),var dep = new Dep()建立独立的Dep对象 --> 调用Object.defineProperty()
修改data的get set- get中调用
dep.depend()
存储需要响应更新的方法,dep.target.addDep() --> dep.addSub --> this.subs.push() - set中调用
dep.notify()
通知订阅的方法挨个更新,遍历subs执行subs[i].update(),更新方法 - get劫持有一步判断Dep.target是否存在,再去执行dep.depend(),那么这个Dep.target是什么呢,这一步比较绕
–Watcher中,构造函数中主动调用了this.get(),其中执行了Dep.target=this赋值操作,也就是target就是当前watcher对象,此时再触发对象的get,调用dep.depend()和后续操作 - 那么Wathcer是什么时候创建的呢,是在mountComponent中new Watcher(),这一块还没 具体看,后面再更新
参考博客
图解 Vue 响应式原理
Vue源码窥探之new Vue之后发生了什么?
双向绑定实现
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法
对象内部通过 defineReactive 方法,使用 Object.defineProperty 将属性进行劫持(只会劫持已经存在的属性),数组则是通过重写数组方法来实现。当页面使用对应属性时,每个属性都拥有自己的 dep 属性,存放他所依赖的 watcher(依赖收集),当属性变化后会通知自己对应的 watcher 去更新(派发更新)。
vue2的defineProperty无法监听新增对象改变
- 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的
- 也无法检测对象 property 的添加或移除,属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的
- 官方解释
- 解决办法,Vue.set this.$set,忘记在哪看的了,尤大说Vue可以实现对象新增、添加、删除的监听,因为不想牺牲用户体验额外消耗性能,所以没有添加该特性
- Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
vue更新数组时触发视图更新的方法
push();pop();shift();unshift();splice(); sort();reverse()
vue-route的两种模式
- hash 模式:
#后面的 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新浏览器,每次 hash 值的变化会触发 hashchange 事件。hash主要依赖location.hash来改动 URL,达到不刷新跳转的效果,每次 hash 改变都会触发hashchange事件(来响应路由的变化,比如页面的更换) - history 模式:
history主要利用了 HTML5 中新增的 historyAPI 来实现,用pushState()和replaceState()方法来操作浏览历史记录栈,这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
Vuex
Vuex 是专门为 Vue.js 设计的状态管理模式,它采用集中式储存管理 Vue 应用中所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
- State:定义了应用状态的数据结构,可以在这里设置默认的初始状态。
- Getter:允许组件从 Store 中获取数据,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
- Mutation:是唯一更改 store 中状态的方法,且必须是同步函数。
- Action:用于提交 mutation,而不是直接变更状态,可以包含任意异步操作。
- Module:允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
- vuex中的state、getters、mutations、actions之间的关系用法笔记
- mapState,mapState是state的辅助函数
Vue性能优化 首屏加载
- keep-alive,缓存组件,保留状态,避免重新渲染
- 异步路由加载,import路由懒加载,webpack提供的require.ensure()
- 不打包库文件,按需加载
- 关闭 sourcemap
- 开启 gzip 压缩
- 使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟DOM
虚拟dom AST
由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM,会产生一定的性能问题。这就是虚拟 Dom 的产生原因。Vue2 的 Virtual DOM 借鉴了开源库 snabbdom 的实现。Virtual DOM 本质就是用一个原生的 JS 对象去描述一个 DOM 节点,是对真实 DOM 的一层抽象。
Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM
AST 抽象语法树
nextTick
diff算法
强烈推荐的一篇面试题整理
React
react用的相对不多,加上上手比vue吃力些,一开始用的时候,语法不适应,render return html标签,有点像以前的ejs或者freemarker,各个生命周期名称又长,redux也没有vuex用着省心,不过开发用起来还是没太大问题,接下来的目标是熟练使用+理解react各种原理
去年接触reactHook,FunctionComponent写起来要比ClassComponent简洁很多,加上生命周期换成了useEffect等来实现,hook应该是趋势,大厂貌似更喜欢用react,大佬们貌似也是
整理一些面试题,毕竟没有读过源码,太深入的也搞不了,下面好多题我表示都太难了,直接贴博客地址吧
推荐阅读,卡颂 React技术揭秘
diff算法
setState是同步还是异步
今天让你彻底搞懂setState是同步还是异步
React setState 整理总结
React调度原理,Fiber架构
彻底搞懂React源码调度原理(Concurrent模式)React Fiber是什么
React探索-React Fiber的架构、调度原理
理解 React Fiber & Concurrent Mode
React事件系统
React通信方式 context
高阶组件 HOC
React中各种组件复用(mixin、render props、hoc、hook)
React生命周期
React v16.3之后的组件生命周期函数
详解React生命周期(包括react16最新版)
React的某些生命周期被废弃的理由
新版生命周期和Fiber架构的一些联系
React性能优化
react的一些性能优化
React性能优化总结
React 性能优化技巧(纯干货)
React虚拟DOM的作用
useEffect
suspense
全面了解 React 新功能: Suspense 和 Hooks
useState保证每次都取到上次的数据
React 中执行 setState 时怎么保证你取到的上一次state是正确的?
useCallback useMemo
React Hook的用法: memo + useCallback (四)
React三大属性和组件间与组件内通信
Redux
微信小程序
传值,参数传递等
- url携带参数,onLoad中接收
- 本地存储Storage
- 全局app对象,getApp()
- 父传子,子组件通过properties接收
- 子组件通过triggerEvent触发绑定事件
- 给HTML元素中添加data-*属性来传递需要的值,之后通过e.currentTarget.dataset
生命周期
监听
properties中接收传值,observe对比newValue,oldValue
小程序内的页面跳转
- wx.navigateTo——保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面(参数必须为字符串)
- wx.redirectTo——关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
- wx.switchTab——跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,路径后不能带参数
- wx.navigateBack——关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层
- wx.reLaunch——关闭所有页面,打开到应用内的某个页面
运行原理
小程序分为两个部分webview和appService,webview用来展现UI,appService用来处理业务逻辑、数据及接口调用,它们在两个进程中运行,通过系统层JSBridge实现通信,完成UI渲染、事件处理
如何实现下拉刷新
- 先在app.json或page.json中配置enablePullDownRefresh:true
- page里用onPullDownRefresh函数,在下拉刷新时执行
- 在下拉函数执行时发起数据请求,请求返回后,调用wx.stopPullDownRefresh停止下拉刷新的状态
小程序优化
- 提升加载性能的最最最关键性一点是,控制包的大小,这个也是微信官方的说法
– 分包、分包预加载、独立分包、 - 提升渲染性能
–setData,每调用一次setData, 都是逻辑层向渲染层的一次通讯,这个通信还不是直接传给webView, 而是通过走了native层,通讯的开销很大
– 减少setData的数据量:如果一个数据不能会影响渲染层,则不用放在setData里面
– 合并setData的请求 - onPageScroll,需要包裹防抖或者节流
官方文档-页面渲染优化
微信小程序性能优化技巧
微信开发之微信小程序性能优化
登录机制
订阅流程
支付流程
wx.requestPayment(Object object)
小程序向webView传值
我知道的就一个,src携带参数传给vebView
webView向小程序传值可以用wx.miniProgram.postMessage 向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的message事件
webView如何跳回小程序
首先,需要在你的html页面中引用一个js文件。
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
wx.miniProgram.redirectTo({url: '/pages/indexTwo/indexTwo'})
//跳转到tabbar
wx.miniProgram.switchTab({
url: '/pages/index/index'
})
这里的redirectTo跟小程序中的wx.redirectTo()跳转页面是一样的,会关闭当前页跳转到页面。
你也可以替换成navigateTo,跳转页面不会关闭当前页。
使用webview直接加载要注意哪些事项
- 必须要在小程序后台使用管理员添加业务域名;
- h5页面跳转至小程序的脚本必须是1.3.1以上;
- 微信分享只可以都是小程序的主名称了,如果要自定义分享的内容,需小程序版本在1.7.1以上;
- h5的支付不可以是微信公众号的appid,必须是小程序的appid,而且用户的openid也必须是用户和小程序的。
参考
15个高频微信小程序面试题
面试题(2020)微信小程序常见面试题
微信小程序面试题,附答案
未完待续,持续补充…