vue的计算属性computed和监听器watch

<template>
    <div>
      this is A.vue <br>
      <!--计算属性-->
      <label for="msg">输入message:</label>
      <input type="text" v-model="message" id="msg">
      <div>this is the reversedMessage: {{reversedMessage}}</div>
      <input type="text" v-model="test">
      <div>show something {{sth}}</div>
    </div>
</template>

<script>
export default {
  name: 'A',
  data () {
    return {
      message: '',
      test: '',
      sth: ''
    }
  },
  // computed计算属性，它是依赖缓存的，换句话说，只要this.message不变化，那么this.reversedMessage会立即得出结果，不会重新进行this.message.split('').reverse().join('')运算
  // 而如果是在methods中定义的，尽管this.message未发生变化，当再次调用reversedMessage()函数时，依然会重新计算一遍。
  // 所以在大量的逻辑运算的情况下，使用computed是有必要的
  computed: {
    reversedMessage () {
      return this.message.split('').reverse().join('')
    }
  },
  // computed是计算属性（属性）；watch监听器只要数据发生变化就会执行
  // 大多数情况下，使用computed计算属性更好；watch监听器适合数据变化时执行异步操作或者开销较大的操作
  watch: {
    test () {
      this.sth = this.test + ',hello'
    }
  }

}
</script>

<style lang="scss" scoped>

</style>

代码如上图！