Vue.js实现数据响应的方法


Posted in Javascript onAugust 13, 2018

许多前端JavaScript框架(例如Angular,React和Vue)都有自己的数据相应引擎。通过了解相应性及其工作原理,您可以提高开发技能并更有效地使用JavaScript框架。在视频和下面的文章中,我们构建了您在Vue源代码中看到的相同类型的Reactivity。

如果您观看此视频而不是阅读文章,请观看系列中的下一个视频,与Vue的创建者Evan You讨论反应性和代理。

? The Reactivity System

当你第一次看到它时,Vue的响应系统看起来很神奇。拿这个简单的Vue应用程序:

Vue.js实现数据响应的方法

Vue.js实现数据响应的方法

不知何故,Vue只知道如果价格发生变化,它应该做三件事:

  • 更新我们网页上的价格值。
  • 重新计算乘以price * quantity的表达式,并更新页面。
  • 再次调用totalPriceWithTax函数并更新页面。

但是等等,你应该会觉得奇怪,当价格变化时,Vue如何知道要更新什么,以及它如何跟踪所有内容?

Vue.js实现数据响应的方法

这不是JavaScript编程常规的工作方式。

如果你不明白,那我们试着看看常规的JavaScript是怎么运行的。例如,如果我运行此代码:

Vue.js实现数据响应的方法

你觉得它打印什么?由于我们没有使用Vue,它将打印10。

Vue.js实现数据响应的方法

在Vue,我们希望每当价格或数量更新时,总计都会得到更新。我们想要:

Vue.js实现数据响应的方法

不幸的是,JavaScript是程序性的,而不是被动的,所以这在现实生活中不起作用。为了使数据变化得到相应,我们必须使用JavaScript来使事情表现不同。

⚠️ 问题

我们需要保存计算总数的方式,以便在价格或数量变化时重新运行。

✅ 解决方案

首先,我们需要一些方法告诉我们的应用程序,“我即将运行的代码,存储它,我可能需要你在另一个时间运行它。”然后我们将要运行代码,如果价格或数量变量得到更新,再次运行存储的代码。

Vue.js实现数据响应的方法

请注意,我们在目标变量中存储了一个匿名函数,然后调用了一个记录函数。使用ES6箭头语法我也可以这样写:

Vue.js实现数据响应的方法

请注意,我们在目标变量中存储了一个匿名函数,然后调用了一个记录函数。使用ES6箭头语法我也可以这样写:

Vue.js实现数据响应的方法

记录的方法:

Vue.js实现数据响应的方法

我们正在存储目标(在我们的例子中是{total = price * quantity}),所以我们可以稍后运行它。

Vue.js实现数据响应的方法

这将遍历存储阵列中存储的所有匿名函数并执行它们中的每一个。

然后在我们的代码中,我们可以:

Vue.js实现数据响应的方法

很简单吧?如果您需要阅读并尝试再次掌握它,这里的代码就完整了。仅供参考,如果您想知道原因,我会以特定的方式对此进行编码。

Vue.js实现数据响应的方法

Vue.js实现数据响应的方法

⚠️ 问题

我们可以根据需要继续记录目标,但是有一个更强大的解决方案可以扩展我们的应用程序。那就是一个负责维护目标列表的类,当我们需要它们重新运行时,这些目标列表会得到通知。

✅ 解决方法: 使用Class

我们可以开始解决这个问题的一种方法是将这种行为封装到它自己的Class中,这是一个实现标准编程观察者模式的依赖类。

因此,如果我们创建一个JavaScript类来管理我们的依赖项(它更接近Vue处理事物的方式),它可能看起来像这样:

Vue.js实现数据响应的方法

让它运行:

Vue.js实现数据响应的方法

它仍然有效,现在我们的代码感觉更可靠了。只有仍然感觉有点奇怪的是target()的设置和运行。

⚠️ 问题

我们将为每个变量设置一个Dep类,并且很好地封装了创建需要监视更新的匿名函数的行为。也许观察者功能可能是为了处理这种行为。

Vue.js实现数据响应的方法

(这只是上面的代码)

我们可以改为:

Vue.js实现数据响应的方法

✅ 解决方案:观察者功能

在我们的Watcher功能中,我们可以做一些简单的事情:

Vue.js实现数据响应的方法

如您所见,watcher函数接受myFunc参数,将其设置为我们的全局目标属性,调用dep.depend()以将目标添加为订阅者,调用目标函数并重置目标。

现在,当我们运行以下内容时:

Vue.js实现数据响应的方法

Vue.js实现数据响应的方法

您可能想知道为什么我们将target实现为全局变量,而不是将其传递到我们需要的函数中。这有一个很好的理由,这将在我们的文章结尾处揭晓。

⚠️ 问题

我们有一个Dep类,但我们真正想要的是每个变量都有自己的Dep。在我们继续之前,先存储一下数据。

Vue.js实现数据响应的方法

让我们假设我们的每个属性(价格和数量)都有自己的内部Dep类。

Vue.js实现数据响应的方法

当我们运行时:

Vue.js实现数据响应的方法

由于访问了data.price值,我希望price属性的Dep类将我们的匿名函数(存储在目标中)推送到其订阅者数组(通过调用dep.depend())。由于访问了data.quantity,我还希望quantity属性Dep类将此匿名函数(存储在目标中)推送到其订阅者数组中。

Vue.js实现数据响应的方法

如果我有另一个匿名函数,只访问data.price,我希望只推送到价格属性Dep类。

Vue.js实现数据响应的方法

我什么时候想要在价格订阅者上调用dep.notify()?我希望在设定价格时调用它们。在文章的最后,我希望能够进入控制台并执行:

Vue.js实现数据响应的方法

我们需要一些方法来挂钩数据属性(如价格或数量),所以当它被访问时我们可以将目标保存到我们的订阅者数组中,当它被更改时,运行存储在我们的订阅者数组中的函数。

✅ 解决方案:Object.defineProperty()

我们需要了解Object.defineProperty()函数,它是简单的ES5 JavaScript。它允许我们为属性定义getter和setter函数。在我向您展示如何在Dep类中使用它之前,先简单展示一下改函数的用法。

Vue.js实现数据响应的方法

Vue.js实现数据响应的方法

如您所见,它只记录两行。但是,它实际上并没有获取或设置任何值,因为我们过度使用了该功能。我们现在加回来吧。 get()期望返回一个值,而set()仍然需要更新一个值,所以让我们添加一个internalValue变量来存储我们当前的价格值。

Vue.js实现数据响应的方法

既然我们的get和set工作正常,您认为将打印到控制台的是什么?

Vue.js实现数据响应的方法

因此,当我们获取并设置值时,我们可以获得通知。通过一些递归,我们可以为数组中的所有项运行它

FYI,Object.keys(data)返回对象键的数组。

Vue.js实现数据响应的方法

现在一切都有getter和setter,我们在控制台上看到了这一点。

Vue.js实现数据响应的方法

? Putting both ideas together

Vue.js实现数据响应的方法

当像这样的一段代码运行并获得价格的价值时,我们希望价格记住这个匿名函数(目标)。这样,如果价格变化,或者设置为新值,它将触发此函数以重新运行,因为它知道此行依赖于它。所以你可以这样想。

Get =>记住这个匿名函数,当我们的值发生变化时,我们会再次运行它。

Set =>运行保存的匿名函数,我们的值刚改变。

或者就我们的Dep Class而言

Price accessed (get) => 调用dep.depend()来保存当前目标

Price set => 在价格上调用dep.notify(),重新运行所有目标

让我们结合这两个想法,并完成我们的最终代码。

Vue.js实现数据响应的方法

现在看看会发生什么。

Vue.js实现数据响应的方法

正是我们所希望的!价格和数量都确实是得到了实时的响应的!只要价格或数量的价值得到更新,我们的总代码就会重新运行。

Vue文档中的这个插图现在应该开始有意义了。

Vue.js实现数据响应的方法

你看到那个漂亮的紫色数据圈了吗?看起来应该很眼熟!每个组件实例都有一个从getter(红线)收集依赖项的服务观察器实例(蓝色)。当稍后调用设置程序时,它会通知监视程序,它将导致组件重新呈现。下面是我自己的一些注释的图片。

Vue.js实现数据响应的方法

是的,现在是不是觉得更有意义了。

显然,Vue做的可能更复杂更惊喜,但你现在知道了基础知识。

⏪ 总结:所以我们学了什么?如何创建一个Dep类来收集依赖项(依赖)并重新运行所有依赖项(notify)。如何创建一个观察程序来管理我们正在运行的代码,这些代码可能需要作为依赖项添加(target)。如何使用Object.defineProperty()创建getter和setter。

总结

以上所述是小编给大家介绍的Vue.js实现数据响应的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
简述ES6新增关键字let与var的区别
Aug 23 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 #jQuery
Bootstrap Table实现定时刷新数据的方法
Aug 13 #Javascript
angular2实现统一的http请求头方法
Aug 13 #Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 #Javascript
vue后台管理之动态加载路由的方法
Aug 13 #Javascript
jQuery中$原理实例分析
Aug 13 #jQuery
Angular服务Request异步请求的实例讲解
Aug 13 #Javascript
You might like
php 多关键字 高亮显示实现代码
2012/04/23 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
如何用python整理附件
2018/05/13 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
在django模板中实现超链接配置
2019/08/21 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
什么是python的id函数
2020/06/11 Python
Python 实现进度条的六种方式
2021/01/06 Python
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
迟到检讨书900字
2014/01/14 职场文书
校庆筹备方案
2014/03/30 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
2014年教学工作总结
2014/11/13 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
Python编写冷笑话生成器
2022/04/20 Python