vue的計算屬性computed和監聽器watch

 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>

View Code

代碼如上圖！