茶余饭后聊聊Vue3.0响应式数据那些事儿 - 行业资讯 - 肥雀云

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

　　<李>使用打印稿李　　<李>放弃类采用基于函数API李　　<李>重构依从者李　　<李>重构虚拟DOM李　　<李>新的响应式机制李　　　　

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

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

　　　　　　& lt; !DOCTYPE html> 　　& lt; html lang=癳n”比; 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt; title> Document 　　& lt;脚本src=" https://www.yisu.com/packages/vue/dist/vue.global.js "祝辞& lt;/script> 　　& lt;/head> 　　& lt; body> 　　& lt; div id="应用"祝辞& lt;/div> 　　& lt; script> 　　const{活性,计算效果,createApp}=Vue 　　const应用={ 　　模板: 　　& lt; div id=昂凶印北? 　　& lt;按钮@click=疤砑印痹趝{状态。数}}& lt;/button> 　　& lt;/div> 　　`，　　设置(){ 　　const状态=活性({ 　　数:0 　　}) 　　函数添加(){ 　　state.count + + 　　} 　　效果(()=比;{ 　　控制台。日志(“数改变,state.count); 　　}) 　　返回{ 　　状态, 　　添加　　} 　　} 　　} 　　createApp ()。山(App, #应用) 　　& lt;/script> 　　& lt;/body> 　　& lt;/html> 　　　　

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

　　　　　　从“进口{可观测、计算、自动运行}mobx” 　　var=数字可见([1,2,3]); 　　var=计算总和(()=比;数字。减少((a, b)=比;a + b, 0)); 　　　　var碎渣机=自动运行(()=比;console.log (sum.get ()));//输出‘6’ 　　numbers.push (4);//输出‘10’ 　　numbers.push (5); 　　　　之前　　　　

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

<强>活性(值)
　　创建可观察的变量,参数可以是JS原始类型,引用,纯对象,类实例,数组,集合(地图|设置)。

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

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

和mobx有异曲同工之妙。

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

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

<强>对数组的全面监听
　　

Vue2。x中被大家吐槽的最多的一点就是针对数组只实现了推动,流行,转变,平移,拼接,排序,逆转”这七个方法的监听,以前通过数组下标改变值的时候,是不能触发视图更新的。这里插一个题外话,很多人认为Vue2。x中数组不能实现全方位监听是Object.defineProperty不能监听数组下标的改变,这可就冤枉人家了,人家也能侦听数组下标变化的好吗,不信你看