vue监听三个属性值_Vue的计算属性和监听属性

Vue 中的计算属性

使用计算属性(computed)有一个好处在于它有一个缓存机制，因此它不需要每次都重新计算。当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的 DOM 部分也会同步自动更新。在处理一些复杂逻辑时计算属性是很有用的。

在 Vue 中我们可以使用模板语法 {{}} 来展示一些数据，而当在模板中放入太多的逻辑会让模板过重且难以维护。这种情况下，Vue 给我们提供了一个特别好的解决方法，就是使用计算属性。我们可以将一些需要计算的过程写入到一个计算属性中去，然后让它动态的计算就可以了。

示例：

下面我们通过一个例子来看一下计算属性的使用，下面是一个用于求和的小例子：

Vue的属性_侠课岛(9xkd.com)

创建第一个Vue应用

大侠的体重为：{{a}}千克

水星仔的体重为：{{b}}千克

小师妹的体重为: {{c}} 千克

它们的体重之和为:{{a + b +　ｃ}}千克

此时我们要对数据求和，是不是需要在模板中将 a、b、c 等属性都加起来，例如上述的 {{a + b + c}}，这样会很不方便，且会让模板过重且难以维护。

但是如果我们使用计算属性，如下所示：

Vue的属性_侠课岛(9xkd.com)

创建第一个Vue应用

大侠的体重为：{{a}}千克

水星仔的体重为：{{b}}千克

小师妹的体重为: {{c}} 千克

它们的体重之和为:{{sum}}千克

这样在 computed 中定义一个计算属性 sum 后，就不用在模板中进行复杂的计算了。效果图如下所示：

Vue中的监听属性

监听属性(watch)可以监听一个函数或者是一个变量，通过 watch 来响应数据的变化。虽然大多数情况计算属性都可以满足需要，但有时还是需要使用侦听器。当需要在数据发生变化时执行异步操作或者开销较大的操作时，就需要自定义监听器。

示例：

例如我们想实现一个计数器，我们可以通过 watch 来响应数据的变化：

Vue的属性、方法和生命周期_侠课岛(9xkd.com)

计数器的实现

计算器：{{num}}

点我加一

watch 这个对象里面是一个函数，函数的名称是 data 中的属性名称(即num)，且 watch 中的函数不需要调用。

当属性 num 发生改变，就会触发 watch 函数(num 所对应的函数)，每个函数都会接受两个值，一个是新值(navl)，一个是旧值(oval)。

我们来看代码在浏览器中的演示效果：

当我们点击 点我加一 按钮时，会弹出上图中的弹出层，告诉我们“计数器的值从 1 变为 2”，然后我们点击弹出层的 “确认” 按钮，计数器显示会变成 2。