vue的计算属性computed和监听器watch-CSDN博客

 1 <template>
 2     <div>
 3       this is A.vue <br>
 4       <!--计算属性-->
 5       <label for="msg">输入message:</label>
 6       <input type="text" v-model="message" id="msg">
 7       <div>this is the reversedMessage: {{reversedMessage}}</div>
 8       <input type="text" v-model="test">
 9       <div>show something {{sth}}</div>
10     </div>
11 </template>
12 
13 <script>
14 export default {
15   name: 'A',
16   data () {
17     return {
18       message: '',
19       test: '',
20       sth: ''
21     }
22   },
23   // computed计算属性，它是依赖缓存的，换句话说，只要this.message不变化，那么this.reversedMessage会立即得出结果，不会重新进行this.message.split('').reverse().join('')运算
24   // 而如果是在methods中定义的，尽管this.message未发生变化，当再次调用reversedMessage()函数时，依然会重新计算一遍。
25   // 所以在大量的逻辑运算的情况下，使用computed是有必要的
26   computed: {
27     reversedMessage () {
28       return this.message.split('').reverse().join('')
29     }
30   },
31   // computed是计算属性（属性）；watch监听器只要数据发生变化就会执行
32   // 大多数情况下，使用computed计算属性更好；watch监听器适合数据变化时执行异步操作或者开销较大的操作
33   watch: {
34     test () {
35       this.sth = this.test + ',hello'
36     }
37   }
38 
39 }
40 </script>
41 
42 <style lang="scss" scoped>
43 
44 </style>