vue的计算属性与监听器

1.计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以对于任何复杂逻辑，你都应当使用计算属性。

下面的代码将演示，所得的结果一样
HTML

<div id="example">
  <p>我是直接计算的结果: "{{ message.split('').reverse().join('') }}"</p>
  <p>我是计算属性的结果: "{{ reversedMessage }}"</p>
</div>

JS

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      //split('')将message字符串中每个字符组成新数组的每一项并返回新数组，reverse()将数组反转，join('')把数组的每一项拼接为字符串
      return this.message.split('').reverse().join('')
    }
  }
})

2.监听器

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

HTML

<div id="watch-example">
  <p>我要展示响应的的异步数据: "{{ answer }}"</p>
</div>

JS

var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    answer: '我是异步的'
  },
  watch: {
    // 如果 `answer` 发生改变，这个函数就会运行，默认接受两个参数，参数一：新的监听的变量，参数二：旧的监听的变量
    answer: function (newanswer, oldanswer) {
      this.answer = newanswer
    }
  },