面试题面试官：请你说说对Vue响应式数据的理解
Posted 前端技术栈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面试题面试官：请你说说对Vue响应式数据的理解相关的知识，希望对你有一定的参考价值。
前言
我们平时的面试过程当中，问到Vue，几乎都会问到响应式的问题，因为在Vue的实现当中，响应式系统的实现就占据很大一个篇幅。这是Vue声明式编程的基石。那么如何理解响应式数据呢？相信结合源码以及手写实现会有一个更深入的理解。
大厂面试题分享 面试题库
前后端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库 web前端面试题库 VS java后端面试题库大全
问题引出
什么是响应式数据？
响应式数据，意思是当数据发生变化后，会触发副作用的执行，从而达到某些目的。这与Vue所推崇的声明式编程简直不谋而合。利用代理模式，拦截到数据的变化，从而可以具备驱动视图变化的能力。这不就是能实现声明式编程里面核心的响应式部分了吗？ 比如说，我所声明的视图里，使用到了数据，当这个数据改变后，视图跟着数据变化同步更新。
响应式数据的实现
在Vue2 当中可以这样实现
// 定义一下基础数据对象
const obj =
name: "Jettsang",
age: 25,
arr:[1,2,3],
msg:
phoneCode:'12345678901',
address:'唐宁街10号'
// vue 2 定义响应式，其实对defineProperty的封装
function defineReactive(target,key ,value)
// 对value进行递归定义响应式（如果value是对象的话）
observer(value)
Object.defineProperty(target,key,
get()
// 在这里收集依赖，记录下watcher
return value
,
set(newVal)
if(value !== newVal)
value = newVal
// 别忘了对新的值定义响应式，因为新的值可能是对象
observer(newVal)
// 触发watcher通知视图更新
)
function observer(data)
if(typeof data !=='object' || typeof data == null)
return data
// 这里是enumerable对象，用for in 遍历
for(let key in data )
// 定义响应式
defineReactive(data,key,data[key])
observer(obj)
复制代码可以在控制台看到
其实对数组也是可以进行defineProperty的，但Vue的设计者明显考虑了性能和使用上的平衡，因此对数组做了特殊处理，待会在源码揭秘环节可以更细节的看到。
补充完善对数组的响应式处理 vue2当中，对会改变数组本身的方法（shift unshift push pop splice sort reverse）进行了重写，从而实现数组的响应式
function observer(data)
if (typeof data !== 'object' || typeof data == null)
return data
// 增加对数组的特殊处理
if (Array.isArray(data))
setArrayProto(data)
return
for (let key in data)
defineReactive(data, key, data[key])
// 定义需要重写的方法
const OVERRIDE_METHODS = ['push', 'pop', 'unshift', 'shift', 'reverse', 'sort', 'splice']
// 定义重写proto上数组方法的函数
function setArrayProto(data)
const prototype = Array.prototype
// 这里的create方法会将 newPrototype的原型指向prototype
// 因此通过原型链接仍然可以获取其他的Array原型方法
const newPrototype = Object.create(prototype)
OVERRIDE_METHODS.forEach(method=>
newPrototype[method] = function(...args)
// 这里可以加入响应式逻辑
// 。。。
// 注意this的指向
prototype[method].call(this,...args)
)
data.__proto__ = newPrototype
复制代码可以看到 ，新的原型已经挂在上面了
Vue 2 当中的缺陷是什么？
不难看出 ，Vue2当中的缺陷基本上是由于defineProperty的局限性导致的，总结一下是：
- defineProperty需要递归去添加getter和setter，比较浪费性能
- 权衡之后数组不采用defineProperty，而是重写了原型上的会改变数组本身的方法（shift unshift push pop splice sort reverse）
- 新增和删除不能实现被监听到，需要额外的���和set和delete 这两个API
- 对ES6的新数据结构Map和Set不支持响应式
那么Vue 3当中又做了哪些改变呢？
Vue 3 基于 ProxyAPI可以去除以上缺点
Vue3 采用Proxy这个API来实现数据的代理，从而实现整个响应式系统，抛弃了一些兼容性，同时获得更好的性能提升
function reactive(target)
return new Proxy(target,
get(target,key)
const value = target[key]
// 如果是对象，需要代理该对象
// 注意了，这里是触发getter才会去响应式，可以节省性能
if(typeof value =='object')
return reactive(value)
// 这里可以加收集依赖的逻辑了
// 。。。
return Reflect.get(target,key)
,
set(target,key,value)
const oldValue = target[key]
// 如果值不相等，才去设置
if(oldValue !== value)
Reflect.set(target,key,value)
// 触发副作用函数：比如刷新视图
// 。。。
return true
)
const proxyObj = reactive(obj)
console.log(proxyObj);
复制代码看控制台 ，打印出来的msg里并不是响应式，只有当你去触发getter的时候，才会返回响应式代理对象，可以节省性能，是懒散的代理。
源码探秘
Vue2
这边只看核心逻辑，对边界情况以及一些细节的处理可以忽略，看官们有空自己研究哈
源码位于 src/core/observer/index.ts
定义的这个Observer当中，去对数据做一个观测
defineReactive函数
src/core/observer/array.ts 对数组的处理
Vue3
位于packages/reactivity/src/reactive.ts
createReactiveObject函数
collectionHandlers 是处理map set这种集合的处理器/ 和baseHandlers 基础处理器
看看base处理器里面定义的getter
可以看到懒代理的实现
总结
Vue2到3的响应式数据的处理是基于其核心API来进行具体的优化和权衡取舍。 从2的defineproperty通过递归劫持property，到权衡性能对数组做特殊处理，到3采用proxy同时使用懒代理来优化性能，其中无不体现出Vue设计者的精彩构思。读源码就像读一本书，每次都都会有新的发现。
大厂面试题分享 面试题库
前后端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库 web前端面试题库 VS java后端面试题库大全
面试官：说说你对函数式编程的理解？优缺点？
一、是什么
函数式编程是一种"编程范式"（programming paradigm），一种编写程序的方法论
主要的编程范式有三种：命令式编程，声明式编程和函数式编程
相比命令式编程，函数式编程更加强调程序执行的结果而非执行的过程，倡导利用若干简单的执行单元让计算结果不断渐进，逐层推导复杂的运算，而非设计一个复杂的执行过程
举个例子，将数组每个元素进行平方操作，命令式编程与函数式编程如下
// 命令式编程
var array = [0, 1, 2, 3]
for(let i = 0; i < array.length; i++) {
array[i] = Math.pow(array[i], 2)
}
// 函数式方式
[0, 1, 2, 3].map(num => Math.pow(num, 2))
简单来讲，就是要把过程逻辑写成函数，定义好输入参数，只关心它的输出结果
即是一种描述集合和集合之间的转换关系，输入通过函数都会返回有且只有一个输出值
可以看到，函数实际上是一个关系，或者说是一种映射，而这种映射关系是可以组合的，一旦我们知道一个函数的输出类型可以匹配另一个函数的输入，那他们就可以进行组合
二、概念
纯函数
函数式编程旨在尽可能的提高代码的无状态性和不变性。要做到这一点，就要学会使用无副作用的函数，也就是纯函数
纯函数是对给定的输入返还相同输出的函数，并且要求你所有的数据都是不可变的，即纯函数=无状态+数据不可变
举一个简单的例子
let double = value=>value*2;
特性：
-
函数内部传入指定的值，就会返回确定唯一的值 -
不会造成超出作用域的变化，例如修改全局变量或引用传递的参数
优势：
-
使用纯函数，我们可以产生可测试的代码
test('double(2) 等于 4', () => {
expect(double(2)).toBe(4);
})
-
不依赖外部环境计算，不会产生副作用，提高函数的复用性
-
可读性更强 ，函数不管是否是纯函数 都会有一个语义化的名称，更便于阅读
-
可以组装成复杂任务的可能性。符合模块化概念及单一职责原则
高阶函数
在我们的编程世界中，我们需要处理的其实也只有“数据”和“关系”，而关系就是函数
编程工作也就是在找一种映射关系，一旦关系找到了，问题就解决了，剩下的事情，就是让数据流过这种关系，然后转换成另一个数据，如下图所示
在这里，就是高阶函数的作用。高级函数，就是以函数作为输入或者输出的函数被称为高阶函数
通过高阶函数抽象过程，注重结果，如下面例子
const forEach = function(arr,fn){
for(let i=0;i<arr.length;i++){
fn(arr[i]);
}
}
let arr = [1,2,3];
forEach(arr,(item)=>{
console.log(item);
})
上面通过高阶函数 forEach来抽象循环如何做的逻辑，直接关注做了什么
高阶函数存在缓存的特性，主要是利用闭包作用
const once = (fn)=>{
let done = false;
return function(){
if(!done){
fn.apply(this,fn);
}else{
console.log("该函数已经执行");
}
done = true;
}
}
柯里化
柯里化是把一个多参数函数转化成一个嵌套的一元函数的过程
一个二元函数如下：
let fn = (x,y)=>x+y;
转化成柯里化函数如下：
const curry = function(fn){
return function(x){
return function(y){
return fn(x,y);
}
}
}
let myfn = curry(fn);
console.log( myfn(1)(2) );
上面的curry函数只能处理二元情况，下面再来实现一个实现多参数的情况
// 多参数柯里化；
const curry = function(fn){
return function curriedFn(...args){
if(args.length<fn.length){
return function(){
return curriedFn(...args.concat([...arguments]));
}
}
return fn(...args);
}
}
const fn = (x,y,z,a)=>x+y+z+a;
const myfn = curry(fn);
console.log(myfn(1)(2)(3)(1));
关于柯里化函数的意义如下：
-
让纯函数更纯，每次接受一个参数，松散解耦 -
惰性执行
组合与管道
组合函数，目的是将多个函数组合成一个函数
举个简单的例子：
function afn(a){
return a*2;
}
function bfn(b){
return b*3;
}
const compose = (a,b)=>c=>a(b(c));
let myfn = compose(afn,bfn);
console.log( myfn(2));
可以看到compose实现一个简单的功能：形成了一个新的函数，而这个函数就是一条从 bfn -> afn 的流水线
下面再来看看如何实现一个多函数组合：
const compose = (...fns)=>val=>fns.reverse().reduce((acc,fn)=>fn(acc),val);
compose执行是从右到左的。而管道函数，执行顺序是从左到右执行的
const pipe = (...fns)=>val=>fns.reduce((acc,fn)=>fn(acc),val);
组合函数与管道函数的意义在于：可以把很多小函数组合起来完成更复杂的逻辑
三、优缺点
优点
-
更好的管理状态：因为它的宗旨是无状态，或者说更少的状态，能最大化的减少这些未知、优化代码、减少出错情况
-
更简单的复用：固定输入->固定输出，没有其他外部变量影响，并且无副作用。这样代码复用时，完全不需要考虑它的内部实现和外部影响
-
更优雅的组合：往大的说，网页是由各个组件组成的。往小的说，一个函数也可能是由多个小函数组成的。更强的复用性，带来更强大的组合性
-
隐性好处。减少代码量，提高维护性
缺点：
-
性能：函数式编程相对于指令式编程，性能绝对是一个短板，因为它往往会对一个方法进行过度包装，从而产生上下文切换的性能开销
-
资源占用：在 JS 中为了实现对象状态的不可变，往往会创建新的对象，因此，它对垃圾回收所产生的压力远远超过其他编程方式
-
递归陷阱：在函数式编程中，为了实现迭代，通常会采用递归操作
最后
这里也给大家包邮送5本最近很火的新书《前端函数式演进》
以上是关于面试题面试官：请你说说对Vue响应式数据的理解的主要内容，如果未能解决你的问题，请参考以下文章