前端，通过面试去学习，框架（vue react reactHook 微信小程序）

框架

---

面试的时候，一般面试官会问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

手写Vue2.0源码（五）-异步更新原理

diff算法

手写Vue2.0源码（六）-diff算法原理

强烈推荐的一篇面试题整理

最全的 Vue 面试题+详解答案

React

react用的相对不多，加上上手比vue吃力些，一开始用的时候，语法不适应，render return html标签，有点像以前的ejs或者freemarker，各个生命周期名称又长，redux也没有vuex用着省心，不过开发用起来还是没太大问题，接下来的目标是熟练使用+理解react各种原理
去年接触reactHook，FunctionComponent写起来要比ClassComponent简洁很多，加上生命周期换成了useEffect等来实现，hook应该是趋势，大厂貌似更喜欢用react，大佬们貌似也是
整理一些面试题，毕竟没有读过源码，太深入的也搞不了，下面好多题我表示都太难了，直接贴博客地址吧

推荐阅读，卡颂 React技术揭秘

diff算法

React之diff算法

setState是同步还是异步

今天让你彻底搞懂setState是同步还是异步
React setState 整理总结

React调度原理，Fiber架构

彻底搞懂React源码调度原理（Concurrent模式）React Fiber是什么
React探索-React Fiber的架构、调度原理
理解 React Fiber & Concurrent Mode

React事件系统

react事件系统原理
深入理解React：事件机制原理

React通信方式 context

React 中组件间通信的几种方式

高阶组件 HOC

react 高阶组件 HOC 的个人理解和使用场景（易懂）

React中各种组件复用（mixin、render props、hoc、hook）

浅谈React中组件逻辑复用的那些事儿

React生命周期

React v16.3之后的组件生命周期函数
详解React生命周期(包括react16最新版)

React的某些生命周期被废弃的理由

为什么废弃react生命周期函数？

新版生命周期和Fiber架构的一些联系

理解React：Fiber架构和新旧生命周期

React性能优化

react的一些性能优化
React性能优化总结
React 性能优化技巧(纯干货)

React虚拟DOM的作用

React 虚拟 DOM 浅析

useEffect

useEffect使用指南

suspense

全面了解 React 新功能: Suspense 和 Hooks

useState保证每次都取到上次的数据

React 中执行 setState 时怎么保证你取到的上一次state是正确的？

useCallback useMemo

React Hook的用法： memo + useCallback (四)

React三大属性和组件间与组件内通信

React三大属性和通信（组件间&组件内）

Redux

Redux

微信小程序

传值，参数传递等

• url携带参数，onLoad中接收
• 本地存储Storage
• 全局app对象，getApp()
• 父传子，子组件通过properties接收
• 子组件通过triggerEvent触发绑定事件
• 给HTML元素中添加data-*属性来传递需要的值，之后通过e.currentTarget.dataset

生命周期

• page page生命周期
• 组件 组件生命周期

监听

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）微信小程序常见面试题
微信小程序面试题，附答案

未完待续，持续补充…