计算属性和侦听器

计算属性

---

在插值语法中，一些比较复杂的逻辑可以使用计算属性处理之后再使用。

例如:将如下字符串翻转代码用计算属性求值后，就比较简单明了

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

<div id="example">
  <p>原始 message: "{{ message }}"</p>
  <p>翻转后 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('')
    }
  }
})

这里声明一个计算属reversedMessage。提供函数将用作property vm.reversedMessage的geter函数：

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

我们也可以通过在表达式中调用方法来达到同样的效果：

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

这两种区别：

• 结果最终是完全相同的。
• 不同是：计算属性是基于他们的响应式依赖进行缓存的。只有在相关响应式依赖发生改变时他们才会重新求值。而方法调用则每次都会重新计算（性能较差）。

侦听属性：通过来观察和响应vue实例上的数据变动，有些数据需要随着他的数据变动而变动时，很容易滥用watch。

下面的例子是用watch侦听器来监听各个属性的变化

<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
    }
  }
})

上面代码是命令式且重复的，将他与计算属性的版本进行比较：(简洁明了了好多，所以要合理使用watch)

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

计算属性默认只有getter，不过在需要时也可以提供一个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]
    }
  }
}

现在运行vm.fullName = 'john Doe'时，setter会被调用，vm.firstName和vm.lastName也会相应的被更新。

侦听器

---

Vue通过watch选项提供了一个更通用的方法，来响应数据的变化，当需要在数据变化时执行异步或者开销较大时，这个方式是最有效的。