计算属性VS方法

• 计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。
• 而每当触发重新渲染时，调用方法将总会再次执行函数。

<div>计算属性方式：{{ reveres1 }}</div>
<div>方法方式：{{ reveresMethod2() }}</div>
<button @click="() => $forceUpdate()">改变</button>
<input v-model="message"></div>

export default {
  name: "aCom",
  data() {
    return {
        message: 'Hello World'
    }
  },
  computed: {
    reveres1() {
        console.log('执行了reveres1');
        return this.message.split('').reverse().join('');
    }
  },
  methods: {
    reveresMethod2() {
        console.log('执行了reveresMethod2');
        return this.message.split('').reverse().join('');
    }
  }
};