reactive的理解

1.ref和computed把javascript原始类型转换成响应式的对象
2.ref一般传入的是原始类型，都是一个个分散的变量，分散在各处
3.有什么办法把分散的变量包裹在一个对象中呢？一个新的API—reactive 和ref非常相似，也是一个函数，只不过里面的参数不是一个原始类型了，而是一个对象，reactive生成的响应式的对象修改里面的值得时候，不用.value 了，直接当成对象的一项操作就好了，直接修改里面的值就可以了

上面得图上发现了一个可以优化的点-----上面写了好多data,我们可以使用es6的展开运算符(spread operator)把对象展开，作用是和字面意思一样，就是把东西展开。可以用在array和object上都行，那么上面的可以写成

但是上面的写法无法运行，原因是，当我们把这些值从响应式的对象中取出来之，就变成了普通的类型，而不再是响应式的类型，失去了响应性了所以自然就不会更新了
针对这个问题vue3.0推出了一个API----toRefs(是一个函数，接收一个reactive对象作为一个参数，返回一个普通的对象，但是这个对象的每一项都变成了一个ref类型的对象)

这个时候再展开refData 展开之后的每一项都是一个响应式的对象

这次再使用这样的模板对象就可以成功的工作了

==所以要特别注意！！==你的模板中引用的是否为响应式的数据类型，这样的才能根据数据的改变做出模板更新的工作。

ref和reactive的区别：用写普通标准的javascript来类比
第一种像ref:

第二种像reactive

这里把x取出来再pos.x更新这时候x还是旧的值，也会丧失它的响应式

reactive的理解相关推荐

Vue3中reactive的理解
1.什么是reactive? reactive是Vue3中提供实现响应式数据的方法. 在Vue2中响应式数据是通过defineProperty来实现的. 而在Vue3响应式数据是通过ES6的Proxy ...
阿里雷卷：Reactive 基金会的成立将对开发方式带来哪些影响？
作者 | 赵钰莹近日,Linux 基金会宣布成立 Reactive 基金会.对于 Reactive,各位开发者应该并不陌生,尤其是 Node.js 开发者,但真正了解并意识到这件事情对开发方式带来的 ...
关于 vue3.0 实战项目 setup、 props、 reactive、ref
关于 vue3.0 实战项目中遇到的问题介绍vue3.0的特性: 亿点小知识 1.diff算法的优化增加了静态标记PatchFlag 2.按需编译,体积比Vue2.x更小(Tree shaking ...
wince支持多线程编程吗_以前面试只问多线程，现在都开始问响应式编程了！我懵了...
以前面试只问多线程,现在都开始问响应式编程了! 看完这篇文章你就能有个大体的了解了. 基本介绍目前比较流行的编程方法论有函数式编程(functional programming).响应式编程(rea ...
Reactive(3)5分钟理解 SpringBoot 响应式的核心-Reactor
目录一.前言二. Mono 与 Flux 构造器三. 流计算 1. 缓冲 2. 过滤/提取 3. 转换 4. 合并 5. 合流 6. 累积四.异常处理五.线程调度小结参考阅读一.前言 ...
理解Angular的Reactive Form
官方文档并没有说明Template-driven Form 与Reactive Form 哪一个更好.由于之前开发过一个Ionic2项目,使用的是Template-driven Form,光是校验就有 ...
第二章理解Reactive微服务和Vert.x
微服务并不是一个新的东西.它源自1970年代的研究,最近火了起来是因为微服务可以让我们更快速地改变.更方便地实现价值,提高灵活性.微服务源自actor-based系统.服务设计.自动化系统.domai ...
深入理解C#第三版部分内容
最近,粗略的读了<深入理解C#(第三版)>这本技术书,书中介绍了C#不同版本之间的不同以及新的功能. 现在将部分摘录的内容贴在下面,以备查阅. C#语言特性: 1.C#2.0 C#2的主 ...
1、Reactive Extensions for .NET（译）
本文转自:http://www.cnblogs.com/hebeiDGL/p/3403510.html 原版资料请参阅:http://download.microsoft.com/download/2 ...

reactive的理解

reactive的理解相关推荐

最新文章

热门文章