Vue 开发技巧（一）

使用计算属性代替方法：计算属性可以缓存结果，而方法每次被调用时都会计算一次。

<template>
  <div>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello, Vue!'
    }
  },
  computed: {
    reversedMessage () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

使用了一个计算属性 reversedMessage 来计算字符串的反转。在模板中，使用了双花括号语法来渲染计算属性的值。因为计算属性是基于其依赖的数据进行缓存的，所以当 message 的值发生变化时，计算属性会自动更新。