<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>