计算机属性和侦听器

对于任何复杂逻辑，你都应当使用计算属性。

    <button @click="changeN">只要改变message1，就会改变reversedMessage</button>
    <div>{{ reversedMessage }}</div>

export default {
  data() {
    return {
      message1: "Hello",
    };
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message1.split("").reverse().join("");
    },
  },
  methods: {
    changeN() {
      this.message1 = "world";
    },
  },
};

在这里，只要 改变this.message1 的值，就会改变reversedMessage

vuejs官网是这样说的：

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

计算属性：计算属性有缓存、并且是响应式依赖缓存，调用不加小括号

侦听器：侦听器无缓存，侦听模型数据变化，不能调用

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