vue-计算属性和侦听器

1.计算属性

模板内的表达式很是便利，可是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板太重且难以维护。例如：

<div id="example">
 {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板再也不是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中屡次引用此处的翻转字符串时，

就会更加难以处理。因此，对于任何复杂逻辑，你都应当使用计算属性。

<div id="example">
 <p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
 el: '#example',
 data: {
 message: 'Hello'
 },
 computed: {
 // 计算属性的 getter
 reversedMessage: function () {
 // `this` 指向 vm 实例
 return this.message.split('').reverse().join('')
 }
 }
})

结果：

Original message: "Hello"

Computed reversed message: "olleH"

这里咱们声明了一个计算属性 reversedMessage。咱们提供的函数将用做属性 vm.reversedMessage 的 getter 函数：

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

你能够打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。

你能够像绑定普通属性同样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，所以当 vm.message 发生改变时，

全部依赖 vm.reversedMessage的绑定也会更新。并且最妙的是咱们已经以声明的方式建立了这种依赖关系：计算属性的 getter 函数是没有反作用 (side effect) 的，这使它更易于测试和理解。

2.计算属性缓存

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会从新求值。

这就意味着只要 message 尚未发生改变，屡次访问 reversedMessage 计算属性会当即返回以前的计算结果，而没必要再次执行函数。

3.侦听属性 （监听属性）

<div id="demo">{{ fullName }}</div>

// 侦听属性

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
 }
 }
})
4.计算属性的setter

// ...
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]
 }
 }
}
// ...
如今再运行  时，setter 会被调用， 和  也会相应地被更新。vm.fullName = 'John Doe'vm.firstNamevm.lastName