vue|Vue 计算属性与监听属性 JavaScript|elementui|vue.js|javascri

首先，来看一个字符串反转的例子：

{{ message.split('').reverse().join('') }}

上面这个例子，在模板中表达式包括3个操作，相对比较复杂，也不容易看懂。
所以在遇到复杂的逻辑时应该使用计算属性。
将上例进行改写：

原字符串：{{message}} 计算后反转字符串: {{reverseMessage}}

文章图片

[ 依赖缓存]
举一个更好说明computed是基于依赖缓存的例子:

原字符串：{{message}} 计算反转字符串：{{reverseMessage1}} 计算反转字符串：{{reverseMessage1}} 计算反转字符串：{{reverseMessage2()}} 计算反转字符串：{{reverseMessage2()}}

文章图片

这个例子中，num是一个独立的变量。在使用reverseMessage1这个计算属性时，num会变成2 。但是当再使用reverseMessage1属性时，num没有变化，依然是2。因为Vue实例的message数据没有发生变化于是DOM渲染就直接用这个值，不会重复执行代码。而reverseMessage2这个方法只要用一个，就要执行一次，于是每次返回的结果都不一样。
每一个计算属性都包含一个getter与一个setter，上面的实例中都是计算属性的默认用法，只是利用getter来读取。
computed属性默认只有getter，不过在需要时可以自己提供一个setter函数，当手动修改计算属性的值时，就会触发setter函数，执行自定义的操作。

{{ site }}

【vue|Vue 计算属性与监听属性】

文章图片

上面的代码，当我们执行vm.site=‘baidu http://www.baidu.com’时，数据name与url都会相对更新，视图也会更新。
监听属性 watch
通过watch来响应数据的变化。
虽然大多数情况计算属性都可以满足需要，但有时还是需要使用侦听器。当需要在数据发生变化时执行异步操作或者开销较大的操作时，就需要自定义监听器。
[实例1]：通过使用watch实现计数器：

计数器：{{ counter }}

注意：$watch是一个实例方法，后面是一个回调函数，这个回调函数将在counter值改变之后调用

文章图片

文章图片

[实例2]：千米与米之间的换算

千米：米：

文章图片

[computed与watch的区别]
简单来说：
1：computed是同步的，watch可以实现异步
2：computed中的函数都是带返回值的，wacth里面的函数可以不写返回值。
我们可以在watch属性的方法里执行异步操作，使用定时器来限制操作的频率吧，添加中间状态等等，这些操作都是无法用计算属性实现的。

{{count}}

文章图片

当watch监听到count值发生变化时，2秒之后归零

文章图片

计算属性、指令实现简单实战
实例：通过计算属性、指令等实现简单的购物车

table { border: 1px solid black; width: 100%; }th { height: 50px; } th, td { border-bottom: 1px solid #ddd; } 序号商品名称购买价格购买数量操作 {{iphone.id}} {{iphone.name}} {{iphone.price}} {{iphone.count}} 总价：${{totalPrice}}