计算属性和侦听器

计算属性

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

<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: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
    // 计算属性的 setter
    // reversedMessage: {
    //   get() { // 回调函数，当需要读取当前属性值时执行，根据相关数据计算并返回当前属性的值
    //     return this.message.split('').reverse().join('')
    //   },
    //   set(val) { // 监视当前属性值的变化，当属性值发生变化时执行，可以执行相关操作
    //     console.log(val);
    //   }
    // }
  }
})

计算属性和方法

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

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

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为 Date.now()不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

侦听器

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<script>
export default {
  data() {
    return {
      address: '上苍',
      person: {
        name: '荒',
        status: '祭道',
      },
    }
  },
  watch: {
    // 监听简单数据类型
    status() {
      console.log(this.status)
    },
    // 监听复杂数据类型需用深度监听
    person: {
      handler(newVal, oldVal) {
        // 监听到变化时执行的函数
        console.log(newVal)
        console.log(oldVal)
        // 打印的结果，newVal和oldVal值相同，深度监听虽然可以监听到对象的变化，但是无法监听到对象里面哪个属性的变化，newVal和oldVal值相同的原因是它们索引同一个对象/数组，Vue不会保留修改之前值的副本
      },
      deep: true, // 深度监听（一般监听不能监听到对象属性值的变化的，数组的变化可以监听到）
      // Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue，可以使用 vm.$set(vm.items, indexOfItem, newValue) 或 splice 方法来解决；当你修改数组的长度时，例如：vm.items.length = newLength 可以使用splice 方法来解决
      immediate: true, // 是否以当前的初始值执行handler的函数。
    },
    // 监听对象单个属性
    'person.name': function (newVal, oldVal) {
      console.log(newVal, oldVal)
    },
    // 使用computed间接监听对象单个属性
    personName(newVal, oldVal) {
      console.log(newVal, oldVal)
    },
  },
  computed: {
    personName() {
      return this.person.name
    },
  },
}
</script>

计算属性和侦听器

computed

1. computed是计算属性，也就是依赖某个值或者props通过计算得来得数据
2. computed的值是在getter执行之后进行缓存的，只有在它依赖的数据发生变化，会重新调用getter来计算
3. 不支持异步

watch

1. watch是侦听器，可以监听某一个数据，然后执行相应的操作
2. 不支持缓存，数据变直接会触发相应的操作
3. 支持异步操作