一,效果图。

一,效果图。

Vue.js是如何做到数据响应的?

2018/08/07 · JavaScript
· Vue

原文出处: [Gregg

澳门微尼斯人手机版 1

澳门微尼斯人手机版 2

Pollack]()   译文出处:[众成翻译

_小生_]()   

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

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

二,代码。

二,代码。

The Reactivity System

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

澳门微尼斯人手机版 3

澳门微尼斯人手机版 4

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

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

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

澳门微尼斯人手机版 5

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

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

澳门微尼斯人手机版 6

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

JavaScript

>> total is 10

1
>> total is 10

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

JavaScript

>> total is 40

1
>> total is 40

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

澳门微尼斯人手机版 7

澳门微尼斯人手机版 8

问题

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件,由 Cordova/PhoneGap 提供,(开发过程中显示 404) -->
    <script src="js/app2.js"></script>
    <script src="cordova.js"></script>
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head>

<body>
    <!--同等大小网格-->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <!--指定列宽-->
    <div class="row">
        <div class="col col-50">.col.col-50</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <div class="row">
        <div class="col col-75">.col.col-75</div>
        <div class="col">.col</div>
    </div>
    <div class="row">
        <div class="col">.col</div>
        <div class="col col-75">.col.col-75</div>
    </div>
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <!--有偏移量的网格-->
    <div class="row">
        <div class=‘col col-33 col-offset-33’>.col</div>
        <div class="col">.col</div>
    </div>
    <div class="row">
        <div class="col col-33">.col</div>
        <div class='col col-33 col-offset-33'>.col</div>
    </div>
    <div class="row">
        <div class="col col-33 col-offset-67">.col</div>
    </div>
    <!--纵向对齐网格-->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">1
            <br>2
            <br>3
            <br>4</div>
    </div>
    <div class="row">
        <div class="col col-top">.col</div>
        <div class="col col-center">.col</div>
        <div class="col col-bottom">.col</div>
        <div class="col">1
            <br>2
            <br>3
            <br>4</div>
    </div>
    <div class="row row-top">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">1
            <br>2
            <br>3
            <br>4</div>
    </div>
    <div class="row row-center">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">1
            <br>2
            <br>3
            <br>4</div>
    </div>
    <div class="row row-bottom">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">1
            <br>2
            <br>3
            <br>4</div>
    </div>
    <!--响应式网格-->
    <div class="row responsive-sm">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
</body>

</html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件,由 Cordova/PhoneGap 提供,(开发过程中显示 404) -->
    <script src="js/app2.js"></script>
    <script src="cordova.js"></script>
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head>

<body>
    <div class="range">
        <i class="icon ion-volume-low"></i>
        <input type="range" name="volume">
        <i class="icon ion-volume-high"></i>
    </div>
    <div class="list" style="margin-top:13px">
        <div class="ltem item-divider">
            Range In A List.
        </div>
        <div class="item range range-positive">
            <i class="icon ion-ios-sunny-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="12">
            <i class="icon ion-ios-sunny"></i>
        </div>
        <div class="item range range-calm">
            <i class="icon ion-ios-lightbulb-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="25">
            <i class="icon ion-ios-lightbulb"></i>
        </div>
        <div class="item range range-balanced">
            <i class="icon ion-ios-bolt-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="38">
            <i class="icon ion-ios-bolt"></i>
        </div>
        <div class="item range range-energized">
            <i class="icon ion-ios-moon-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="50">
            <i class="icon ion-ios-moon"></i>
        </div>
        <div class="item range range-assertive">
            <i class="icon ion-ios-partlysunny-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="63">
            <i class="icon ion-ios-partlysunny"></i>
        </div>
        <div class="item range range-royal">
            <i class="icon ion-ios-rainy-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="75">
            <i class="icon ion-ios-rainy"></i>
        </div>
        <div class="item range range-dark">
            <i class="icon ion-ios-lightbulb-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="88">
            <i class="icon ion-ios-lightbulb"></i>
        </div>
    </div>
</body>

</html>

解决方案

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

澳门微尼斯人手机版 9

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

澳门微尼斯人手机版 10

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

澳门微尼斯人手机版 11

记录的方法:

澳门微尼斯人手机版 12

澳门微尼斯人手机版,我们正在存储目标(在我们的例子中是{total = price *
quantity}),所以我们可以稍后运行它。

澳门微尼斯人手机版 13

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

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

澳门微尼斯人手机版 14

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

澳门微尼斯人手机版 15

JavaScript

10 40

1
2
10
40

发表评论

电子邮件地址不会被公开。 必填项已用*标注