茶余饭后聊聊Vue3.0响应式数据那些事儿

2023-08-10 04:41:04 162

"别再更新了，实在是学不动了"这句话道出了多少前端开发者的心声，"不幸"的是Vue的作者在国庆区间发布了Vue3.0的pre-Aplha版本，这意味着Vue3.0快要和我们见面了。既来之则安之，扶我起来我要开始讲了。Vue3.0为了达到更快、更小、更易于维护、更贴近原生、对开发者更友好的目的，在很多方面进行了重构：

使用Typescript
放弃class采用function-basedAPI
重构complier
重构virtualDOM
新的响应式机制

今天咱就聊聊重构后的响应式数据。

尝鲜

重构后的Vue3.0和之前在写法上有很大的差别，早前在网络上对于Vue3.0这种激进式的重构方式发起了一场讨论，见仁见智。不多说先看看Vue3.0在写法上激进到什么程度。





Document

确实写法上和Vue2.x差别有点大，还整出了个setup。不过我的第一感觉倒不是写法上的差异，毕竟写过React，这种写法也没啥特别的。关键是这种响应式数据的写法好像在哪里见过有没有？写过React项目的人可能一眼就能看出来，没错就是它mobx，一种React的响应式状态管理插件

import{observable,computed,autorun}from"mobx"
varnumbers=observable([1,2,3]);
varsum=computed(()=>numbers.reduce((a,b)=>a+b,0));

vardisposer=autorun(()=>console.log(sum.get()));
//输出'6'
numbers.push(4);
//输出'10'
numbers.push(5);

再看看Vue3.0暴露的这几个和响应式数据相关的方法：

reactive(value)
创建可观察的变量，参数可以是JS原始类型、引用、纯对象、类实例、数组、集合（Map|Set）。

effect(fn)
effect意思是副作用，此方法默认会先执行一次。如果fn中有依赖的可观察属性变化时，会再次触发此回调函数

computed(()=>expression)
创建一个计算值，computed实现也是基于effect来实现的，特点是computed中的函数不会立即执行，多次取值是有缓存机制的，expression不应该有任何副作用，而仅仅是返回一个值。当这个expression依赖的可观察属性变化时，这个表达式会重新计算。

和mobx有异曲同工之妙。

Vue3.0把创建响应式对象从组件实例初始化中抽离了出来，通过暴露API的方式将响应式对象创建的权利交给开发者，开发者可以自由的决定何时何地创建响应式对象，就冲这点Vue3.0我先粉了。

重构后的响应式机制带来了哪些改变？

每一个大版本的发布都意味着新功能、新特性的出现，那么重构后的响应式数据部分相比3.0之前的版本有了哪些方面的改变呢？下面听我娓娓道来：

对数组的全面监听

Vue2.x中被大家吐槽的最多的一点就是针对数组只实现了push,pop,shift,unshift,splice,sort,reverse'这七个方法的监听，以前通过数组下标改变值的时候，是不能触发视图更新的。这里插一个题外话，很多人认为Vue2.x中数组不能实现全方位监听是Object.defineProperty不能监听数组下标的改变，这可就冤枉人家了，人家也能侦听数组下标变化的好吗，不信你看

constarr=["2019","云","栖","音","乐","节"];
arr.forEach((val,index)=>{
Object.defineProperty(arr,index,{
set(newVal){
console.log("赋值");
},
get(){
console.log("取值");
returnval;
}
})
})
letindex=arr[1];
//取值
arr[0]="2050";
//赋值

没毛病，一切变化都在人家的掌握中。上面这段代码，有没有人没看懂，我假装你们都不懂，贴张图

从数组的数据结构来看，数组也是一个Key-Value的键值对集合，只是Key是数字罢了，自然也可以通过Object.defineProperty来实现数组的下标访问和赋值拦截了。其实Vue2.x没有实现数组的全方位监听主要有两方面原因：

数组和普通对象相比，JS数组太"多变"了。比如：arr.length=0，可以瞬间清空一个数组；arr[100]=1又可以瞬间将一个数组的长度变为100（其他位置用空元素填充），等等骚操作。对于一个普通对象，我们一般只会改变Key对应的Value值，而不会连key都改变了,而数组就不一样了Key和Value都经常增加或减少，因此每次变化后我们都需要重新将整个数组的所有key递归的使用Object.defineProperty加上setter和getter，同时我们还要穷举每一种数组变化的可能，这样势必就会带来性能开销问题，有的人会觉得这点性能开销算个x呀，但是性能问题都是由小变大的，如果数组中存的数据量大而且操作频繁时，这就会是一个大问题。React16.x在就因为在优化textNode的时候，移除了无意义的span标签，性能据说都提升了多少个百分点，所以性能问题不可小看。
数组在应用中经常会被操作，但是通常push,pop,shift,unshift,splice,sort,reverse这7种操作就能达到目的。因此，出于性能方面的考虑Vue2.x做出了一定的取舍。

那么Vue3.0怎么又走回头路去实现了数组的全面监听了呢？答案就是Proxy和Reflet这一对原生CP的出现，Vue3.0使用Proxy作为响应式数据实现的核心，用Proxy返回一个代理对象，通过代理对象来收集依赖和触发更新。大概的原理像这段代码一样：

constarr=["2019","云","栖","音","乐","节"];
letProxyArray=newProxy(arr,{
get:function(target,name,value,receiver){
console.log("取值")
returnReflect.get(target,name);
},
set:function(target,name,value,receiver){
console.log("赋值")
Reflect.set(target,name,value,receiver);;
}
})
constindex=ProxyArray[0];
//取值
ProxyArray[0]="2050"
//赋值

效果和Object.defineProperty一样一样的，又显得清新脱俗有没有？而且Proxy只要是对象都能代理，后面还会提到。当然Vue3.0是虽然有了新欢，但也没忘记旧爱，对于在之前版本中数组的几种方法的监听还是照样支持的。

惰性监听

什么是"惰性监听"?

简单讲就是"偷懒"，开发者可以选择性的生成可观察对象。在平时的开发中常有这样的场景，一些页面上的数据在页面的整个生命周期中是不会变化的，这时这部分数据不需要具备响应式能力，这在Vue3.0以前是没有选择余地的，所有在模板中使用到的数据都需要在data中定义，组件实例在初始化的时候会将data整个对象变为可观察对象。

惰性监听有什么好处？

提高了组件实例初始化速度

Vue3.0以前组件实例在初始化的时候会将data整个对象变为可观察对象，通过递归的方式给每个Key使用Object.defineProperty加上getter和settter，如果是数组就重写代理数组对象的七个方法。而在Vue3.0中，将可响应式对象创建的权利交给了开发者，开发者可以通过暴露的reactive,compted,effect方法自定义自己需要响应式能力的数据，实例在初始化时不需要再去递归data对象了，从而降低了组件实例化的时间。

降低了运行内存的使用

Vue3.0以前生成响应式对象会对对象进行深度遍历，同时为每个Key生成一个def对象用来保存Key的所有依赖项，当Key对应的Value变化的时候通知依赖项进行update。但如果这些依赖项在页面整个生命周期内不需要更新的时候，这时def对象收集的依赖项不仅没用而且还会占用内存，如果可以在初始化data的时候忽略掉这些不会变化的值就好了。Vue3.0通过暴露的reactive方法，开发者可以选择性的创建可观察对象，达到减少依赖项的保存，降低了运行内存的使用。

Map、Set、WeakSet、WeakMap的监听

前面提到Proxy可以代理所有的对象，立马联想到了ES6里面新增的集合Map、Set，聚合类型的支持得益于Proxy和Reflect。讲真的这之前还真不知道Proxy这么刚啥都能代理，二话不说直接动手用Proxy代理了一个map试试水

letmap=newMap([["name","zhengcaiyun"]])
letmapProxy=newProxy(map,{
get(target,key,receiver){
console.log("取值:",key)
returnReflect.get(target,key,receiver)
}
})
mapProxy.get("name")

UncaughtTypeError:MethodMap.prototype.getcalledonincompatiblereceiver[objectObject]

一盆凉水泼来，报错了。原来Map、Set对象赋值、取值和他们内部的this指向有关系，但这里的this指向的是其实是Proxy对象，所以得这样干

letmap=newMap([['name','wangyangyang']])
letmapProxy=newProxy(map,{
get(target,key,receiver){
varvalue=Reflect.get(...arguments)
console.log("取值:",...arguments)
returntypeofvalue=='function'?value.bind(target):value
}
})
mapProxy.get("name")

当获取的是一个函数的时候，通过作用域绑定的方式将原对象绑定到Map、Set对象上就好了。

Vue3.0是如何实现集合类型数据监听的？

眼尖的同学看完上面这段代码会发现一个问题，集合是没有set方法，集合赋值用的是add操作,那咋办呢？来看看那么Vue3.0是怎么处理的，上一段简化后的源码

functionreactive(target:object){
returncreateReactiveObject(
target,
rawToReactive,
reactiveToRaw,
mutableHandlers,
mutableCollectionHandlers
)
}

functioncreateReactiveObject(
target:any,
toProxy:WeakMap,
toRaw:WeakMap,
baseHandlers:ProxyHandler,
collectionHandlers:ProxyHandler
){
//collectionTypes=newSet([Set,Map,WeakMap,WeakSet])
consthandlers=collectionTypes.has(target.constructor)
?collectionHandlers
:baseHandlers
//生成代理对象
observed=newProxy(target,handlers)
toProxy.set(target,observed)
toRaw.set(observed,target)
if(!targetMap.has(target)){
targetMap.set(target,newMap())
}
returnobserved
}

根据target类型适配不同的handler，如果是集合（Map、Set）就使用collectionHandlers，是其他类型就使用baseHandlers。接下来看看collectionHandlers

exportconstmutableCollectionHandlers:ProxyHandler={
get:createInstrumentationGetter(mutableInstrumentations)
}
exportconstreadonlyCollectionHandlers:ProxyHandler={
get:createInstrumentationGetter(readonlyInstrumentations)
}

没有意外只有get，骚就骚在这儿:

//可变数据插桩对象，以及一系列相应的插桩方法
constmutableInstrumentations:any={
get(key:any){
returnget(this,key,toReactive)
},
getsize(){
returnsize(this)
},
has,
add,
set,
delete:deleteEntry,
clear,
forEach:createForEach(false)
}
//迭代器相关的方法
constiteratorMethods=['keys','values','entries',Symbol.iterator]
iteratorMethods.forEach(method=>{
mutableInstrumentations[method]=createIterableMethod(method,false)
readonlyInstrumentations[method]=createIterableMethod(method,true)
})
//创建getter的函数
functioncreateInstrumentationGetter(instrumentations:any){
returnfunctiongetInstrumented(
target:any,
key:string|symbol,
receiver:any
){
target=
hasOwn(instrumentations,key)&&keyintarget?instrumentations:target
returnReflect.get(target,key,receiver)
}
}

由于Proxy的traps跟Map|Set集合的原生方法不一致，因此无法通过Proxy劫持set，所以作者在在这里进行了"偷梁换柱"，这里新创建了一个和集合对象具有相同属性和方法的普通对象，在集合对象get操作时将target对象换成新创建的普通对象。这样，当调用get操作时Reflect反射到这个新对象上，当调用set方法时就直接调用新对象上可以触发响应的方法，是不是很巧妙？所以多看源码好处多多，可以多学学人家的骚操作。

IE怎么办？

这是个实在不想提但又绕不开的话题，IE在前端开发者眼里和魔鬼没什么区别。在Vue3.0之前，响应式数据的实现是依赖ES5的Object.defineProperty，因此只要支持ES5的浏览器都支持Vue，也就是说Vue2.x能支持到IE9。Vue3.0依赖的是Proxy和Reflect这一对出生新时代的CP，且无法被转译成ES5，或者通过Polyfill提供兼容，这就尴尬了。开发者技术前线获悉的信息，官方在发布最终版本之前会做到兼容IE11，至于更低版本的IE那就只有送上一曲凉凉了。

其实也不用太纠结IE的问题，因为连微软自己都已经放弃治疗IE拥抱Chromium了，我们又何必纠结呢？

结语

在使用开源框架时不要忘了，我们之所以能免费试用他，靠的维护者投入的大量精力。希望我们多去发现它带来的优点和作者想通过它传递的编程思想。最后期待Vue3.0正式版本的早日到来。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

茶余饭后聊聊Vue3.0响应式数据那些事儿

热门推荐

随机推荐