转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

原文参考:https://www.sitepoint.com/vue-3-reactivity-system/

在上节中我们对Vue2和Vue3中的响应式系统做了对比,带大家了解了响应式系统的工作原理,今天我们来进一步探索Vue3中的响应式系统API,为了让大家更好的理解和学习,将方法分组进行归纳。

基本方法

第一组

包括控制数据响应的最基本方法

  • ref接受一个原始值或一个普通对象,然后返回一个响应且可变的ref对象。ref对象只有一个value指向原始值或纯对象的属性。
  • reactive接收一个对象并返回该对象的反应性副本,该内容会影响所有嵌套属性。
  • readonly接受一个ref或一个对象(plain 或reactive),并将一个只读对象返回给原始对象,且会影响所有嵌套属性。
  • markRaw 返回对象本身,并防止将其转换为代理对象。

实际使用

在此示例中,我们探索了四种基本响应式方法的使用。

1.创建一个counterref对象,其值为0。然后在视图中放置两个按钮,用于增加和减少计数器的值。当使用发现计数器没有作用。

2.其次创建一个person响应对象。在视图中放置两个输入控件,分别用于编辑一个人的name和一个人的age。当我们编辑人员的属性时会立即更新。

3.创建一个math只读对象。然后在视图中设置一个按钮,用于将math的PI属性值加倍。该对象只可读,不可修改。

4.创建一个alphabetNumbers对象,将其标记为raw。取其前三位内容。设置一个按钮,将Bproperty的值更改为3。我们会发现可以修改对象,但不会导致视图重新渲染。

markRaw 方法非常适合我们不需要响应的对象,例如一长串国家/地区代码,颜色名称及其对应的十六进制数字,等等。

5.测试和确定我们创建的每个对象的类型,使用onMounted()的生命周期钩子(lifecycle hook)触发这些检查。

类型检查方法

该组包含上述所有四个类型检查器:

  • isRef 检查值是否是引用对象
  • isReactive检查对象是是由reactive创建还是readonly通过包装由创建的另一个代理而创建的反应代理reactive
  • isReadonly检查对象是否是由创建的只读代理readonly
  • isProxy检查对象是否是由reactive或创建的代理readonly

更多参考方法

该组包含其他引用方法:

  • unref 返回引用的值
  • triggerRef执行与shallowRef手动相关的任何效果
  • customRef 创建具有自定义引用的显式控件,并对其依赖项跟踪进行显式控制并更新触发

浅层方法

该组中的方法是ref,reactivity和readonly:

  • shallowRef创建一个ref,该ref仅跟踪其value属性而不会使其值具有响应性
  • shallowReactive 创建一个响应式代理,该代理仅跟踪其自身的属性(不包括嵌套对象)
  • shallowReadonly 创建一个只读代理,该代理仅使自己的属性变为只读(不包括嵌套对象)

通过以下示例来感受这些方法的使用:



本示例从创建settings浅引用对象开始,在视图中添加两个输入控件以编辑其width和height属性。但该属性却不能修改,为了解决这个问题,添加一个按钮,该按钮可以更改整个对象及其所有属性。

接着创建一个settingsA浅层反应式代理,包含width和height属性,和带有x和y属性的嵌套对象coords。在视图中为每个属性设置一个输入控件。修改width和height属性时,有响应更新,但是修改x和y属性时却没有变化。

最后创建一个settingsB浅层只读对象,属性与settingsA相同。但此处widthorheight属性只可读,不能修改,x和y属性可以正常修改。

最后两个示例中的嵌套对象coords均不受转换的影响, Vue不会跟踪它的任何修改,可以自由修改。

转换方式

接下来的三种方法用于将代理转换为ref或普通对象:

  • toRef为源响应对象上的属性创建一个引用。引用将响应性连接保持到其源属性。
  • toRefs将响应对象转换为普通对象。普通对象的每个属性都是一个指向原始对象相应属性的ref。
  • toRaw返回areactive或readonlyproxy的原始对象。

在下面的示例中,将展示这些转换是如何工作:



在此示例中

1.创建一个基础person反应对象,并将其用作源对象。

2.将name property转换为具有相同名称的ref。在视图中添加两个输入控件-一个用于name引用,另一个用于nameproperty。当其中一个被修改,另一个也会更新。

3.将其中一个人所有属性转换为personDetails对象中包含的各个引用。在视图中再次添加两个输入控件以测试刚刚创建的引用之一。发现personDetailsage与人的age属性完全同步。

4.将person响应性对象转换为rawPerson普通对象。在视图中添加一个输入控件以编辑rawPerson的hobby属性,Vue并不进行跟踪。

计算和监视方法

最后一组方法用于计算复杂值并监控某些值:

  • computed 以getter函数作为参数,并返回一个不变的响应式ref对象。
  • watchEffect 立即运行一个函数,并以响应方式跟踪其依赖关系,并在依赖关系发生更改时重新运行它。
  • watch与Options API this.$watch和相应的watch选项完全等效。它监视特定的数据源,并在监视的源发生更改时在回调函数中施加副作用。

我们继续看看以下示例:



在此示例中,我们创建了一个fullName计算变量,该变量的计算基于firstName和lastName。在视图中添加了两个输入控件,用于编辑全名的两个部分。修改任何部分fullName都会重新计算并更新结果。

接下来,我们创建一个volumeref并为其设置观看效果,每次volume修改后都将运行回调函数。为了验证流程是否这样,我们在视图中添加一个按钮,该按钮将音量增加一倍。接着在回调函数中设置一个条件,以测试该音量的值是否可以分为分成三份,当它返回true时,将显示一条警报消息。

最后,我们创建一个stateref并设置一个watch函数来跟踪它的更改。state改变执行函数。此外我们添加了一个按钮,用于在playing和paused之间切换状态。状态发生切换,则有提示。

watchEffect与watch一些区别:

  • watchEffect将回调函数中包含的所有响应性属性视为依赖项。因此,如果回调包含三个属性,则会隐式跟踪所有属性的更改。
  • watch仅跟踪我们作为回调参数包含的属性。此外,它还提供了watched属性的先前值和当前值。

我们会发现,Vue 3响应式API为各种用例提供了许多方法,API内容很多,在本教程中我们仅探讨了基础知识。有关更深入的探索,详细信息和边缘案例,请访问Reactivity API文档。

结论

在本文中,我们介绍了什么是响应系统以及如何在Vue 2和Vue 3中实现该系统。一些Vue 2具的缺陷已经在Vue3中被很好的解决。最后让我们总结一下Vue3响应式系统的优缺点。

好处

  • 可以用作独立程序包。例如,您可以将其与React一起使用
  • 凭借其功能丰富的API,可以实现很多功能,灵活性很高
  • 支持更多的数据结构(Map,WeakMap,Set,WeakSet)
  • 具有更好的性能,仅使所需的数据具有响应性
  • 解决了Vue 2中的数据操作警告

缺点

  • 仅适用于支持ES6 +的浏览器
  • 在比较(===)方面,响应式代理不等于原始对象
  • 与Vue 2“自动”反应性相比,需要更多的代码

前端必读:Vue响应式系统大PK(下)的更多相关文章

  1. 前端必读:Vue响应式系统大PK

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://www.sitepoint.com/vue-3-reactivity-system ...

  2. 一些vue 响应式系统的底层的细节

    当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/ ...

  3. 深入探讨vue响应式原理

    现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接,不过理解其工作 ...

  4. 你是如何理解Vue的响应式系统的

    1.响应式系统简述: 任何一个 Vue Component 都有一个与之对应的 Watcher 实例. Vue 的 data 上的属性会被添加 getter 和 setter 属性. 当 Vue Co ...

  5. vue原理探索--响应式系统

    Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defi ...

  6. Vue 及框架响应式系统原理

    个人bolg地址 全局概览 Vue运行内部运行机制 总览图: 初始化及挂载 在 new Vue()之后. Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周期. ...

  7. Vue的响应式系统

    Vue的响应式系统 我们第一次使用Vue的时候,会感觉有些神奇,举个例子: <div id="app"> <div>价格:¥{{price}}</di ...

  8. 【js】vue 2.5.1 源码学习 (七) 初始化之 initState 响应式系统基本思路

    大体思路(六) 本节内容: 一.生命周期的钩子函数的实现 ==> callHook(vm , 'beforeCreate') beforeCreate 实例创建之后 事件数据还未创建 二.初始化 ...

  9. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

随机推荐

  1. 全面了解Vue3的 reactive 和相关函数

    Vue3的 reactive 怎么用,原理是什么,官网上和reactive相关的那些函数又都是做什么用处的?这里会一一解答. ES6的Proxy Proxy 是 ES6 提供的一个可以拦截对象基础操作 ...

  2. CodeForces CF862E题解

    \(Part\ 1:\) 我们发现每次修改动的是\(a\)串,所以对于这个答案的公式,\(b_{i+j}\)的部分是可以求出来的.所以我们可以把公式改成如下所示: \(f(j)=|\sum_{i=1} ...

  3. java面试一日一题:java线程池

    问题:请讲下java中的线程池 分析:在面试中经常问到线程池的问题,要掌握其基本概念,使用方法,注意事项等,引申下tomcat中默认的线程数是多少 回答要点: 主要从以下几点去考虑, 1.为什么要使用 ...

  4. 学习WEB前端是应该自学还是参加培训机构?

    先说观点,我强烈建议每个人都要自学,不要参加培训班. 我干web前端工程师这个职位已经有6年多的时间,之前在蚂蚁金服做过2年,后来离开是因为加班实在熬不住才走的,像这些已经上市的互联网公司几乎没有不加 ...

  5. electron项目踩坑--A JavaScript error occurred in the main process:document is not defined

    前言 记录electron-vue项目开发中遇到的一个错误,运行时报错如图: 控制台报错如下: ReferenceError: document is not defined at Object.&l ...

  6. Spring-Gateway与Spring-Security在前后端分离项目中的实践

    前言 网上貌似webflux这一套的SpringSecurity操作资料貌似很少. 自己研究了一波,记录下来做一点备忘,如果能帮到也在迷惑的人一点点,就更好了. 新项目是前后端分离的项目,前台vue, ...

  7. C++ sort()函数使用简介

    Sort函数简介 ​   sort()函数是C++的一个排序函数,可以对传入参数给定的区间的所有元素进行排序,默认是升序,也可以是降序,如果需要其他排序规则需要自行编写compare()函数作为参数. ...

  8. SAMBA 文件共享服务

    samba 通过简单配置就能够实现Linux系统与Windows系统之间的文件共享工作,也可实现Linux与Linux之间的文件共享. 在配置samba前,有个小建议:虚拟机的ip地址最好配置成静态的 ...

  9. HTTP 基础(特性、请求方法、状态码、字段)

    1. HTTP 简介(含义.特性.缺点) 2. HTTP 报文 3. GET 和 POST 4. 状态码 5. HTTP 头字段 1. HTTP 简介 HTTP 的含义 HTTP (HyperText ...

  10. Java | 使用OpenFeign管理多个第三方服务调用

    背景 最近开发了一个统一调度类的项目,需要依赖多个第三方服务,这些服务都提供了HTTP接口供我调用. 服务多.接口多,如何进行第三方服务管理和调用就成了问题. 常用的服务间调用往往采用zk.Eurek ...