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>

代码如上图！