计算属性
对于任何复杂逻辑，都应该使用计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo1</title>
<script type="text/javascript" src='vue.js'></script>
</head>
<body>
<div id="app">
<p>Original message: "{{ message }}" </p>
<p>Computed reversed message: "{{ reversedMessage }}" </p>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function(){
// 计算属性的 getter
return this.message.split('').reverse().join('');
}
}
});
app.message = 'goodBye'
</script>
</body>
</html>
我们声明了一个reversedMessage计算属性。提供的函数将作用于 property，vm.reversedMessage的getter函数.
vm.reversedMessage 的值，始终取决于vm.message的值。
可以像绑定普通property一样在模板中绑定计算属性。vue知道vm.reversedMessage 依赖于vm.message，vm.message发生改变时，vm.reversedMessage 的绑定也会更新。
计算属性的getter函数时没有副作用的（side effect)的，易于测试和理解。
- 计算属性和方法
上面的计算属性可以通过方法达到同样的效果：
<p>Reversed message: "{{ reversedMessage() }}"</p>
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
完全可以达到相同的效果，但是不同的是，计算属性是基于他们的响应式以来进行缓存的。只是在响应式依赖发生改变时，才会重新求值。这就是意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前计算的结果， 不必多次执行函数
如果不希望缓存， 则可以使用方法来替代
- 计算属性vs侦听属性
未避免滥用watch，vue提供了侦听属性来监控vue实例数据的变动。
<div id="demo">{{ fullName }}</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
// 上面代码命令式且重复，可以替换为下面
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
- 计算属性的setter
<script>
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
</script>
现在在运行 vm.fullName='John Doe' 时， setter就会被调用， vm.firstName和 vm.lastName也会响应的被更新
侦听器
计算属性在大多数情况下是合适的， 但有时也需要一个字对应的侦听器。当在数据变化时需要执行异步，或者执行开销较大的操作时，这种方式最有用。
watch选项允许我们执行异步操作（访问一个api），限制我们执行该操作的频率，在我们得到最终结果钱，设置中间状态， 这是计算属性无法做到的。
除了watch选项之外， 还可以使用命令式的vm.$watch API
网友评论