Vue computed 和 watch

computed 計算屬性：經過屬性計算得來的屬性

計算屬性,是在相關聯的屬性發生變化才計算，計算過一次，若是相關屬性沒有變化，下一次就不須要計算了，直接去緩存的值

a:<input type="number" v-model.number="a" />
  b:<input type="number" v-model.number="b" />
 <!--c:<input type="number" v-model.number="c" />-->
 總和：{{sum()}}
 總和：{{count}}
 平均值：{{avg}}

 <p v-once>單價：{{price}}</p>
 <p>數量：<input type="number" v-model.number="count"/></p>
 <p>總價：{{sum}}</p>
 <p>運費：{{free}}</p>
 <p>應付：{{pay}}</p>

    data: {
            a: '',
            b:'',
            c:'',
            price: 28.8,
            count: '',
            free: 10
    },
    computed: {
        count(){
            console.log('計算屬性觸發了');
                return this.a+this.b;
        },
        avg(){
            return this.count/2;
        },
       sum(){
            return this.price * this.count;
        },
      pay(){
        if(this.count>0){
            if(this.sum>=299){
                return this.sum;
        }else{
            return this.sum + this.free;
        }
          }else{
                return 0;
        }
        }
     }

watch
屬性變化，就會觸發監聽的函數。
監聽屬性變化，通常是用於跟數據無關的業務邏輯操做。
計算屬性，適用於屬性發生變化後，須要計算獲得新的數據。

<div id="app">
            a: <input type="number" v-model.number="a" /><br />
            b: <input type="number" v-model.number="b" /><br />
            總和：{{count}}
            
            <br /><br /><br />
            
            name: <input type="text" v-model="obj.name" /><br />
            age: <input type="text" v-model.number="obj.age" /><br />
            
        </div>
        
        <script src="vue.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    a: '',
                    b: '',
                    count: '',
                    obj: {
                        name: '',
                        age: ''
                    }
                },
                watch: {
                    a(newVal, oldVal){
                        console.log('觸發了a-watch');
                        this.count = this.a + this.b;
                    },
                    b(newVal){
                        console.log('觸發了b-watch');
                        this.count = this.a + this.b;
                    },
//                    obj(newVal, oldVal){
//                        console.log('觸發了obj的監聽');
//                    }
//
                    obj: {
                        //監聽對象中的每個值
                        handler(newVal, oldVal){
                            console.log('觸發了obj的監聽');
                        },
                        deep: true//深度監聽
                    },
                    //監聽對象中的某個屬性
                    'obj.name': function(){
                        console.log('觸發了obj.name的監聽');
                    }
                }
            })
            
        </script>

watch 也能夠在methods裏面進行監聽配置

<div id="app">
            a: <input type="number" v-model.number="a" /><br />
            b: <input type="number" v-model.number="b" /><br />
            總和：{{count}}
            
            <br /><br /><br />
            
            name: <input type="text" v-model="obj.name" /><br />
            age: <input type="text" v-model.number="obj.age" /><br />
            
            <button @click="btnAction()">開始監聽</button>
            
        </div>
        
        <script src="vue.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    a: '',
                    b: '',
                    count: '',
                    obj: {
                        name: '',
                        age: ''
                    }
                },
                methods: {
                    btnAction(){
                        this.$watch('a', (newVal, oldval)=>{
                            console.log('監聽到了a的變化');
                            console.log(newVal, oldval);
                        })
                        
                        this.$watch('obj.name', (newVal, oldval)=>{
                            console.log('監聽到了obj.name的變化');
                            console.log(newVal, oldval);
                        })
                        
                        this.$watch('obj', (newVal, oldval)=>{
                            console.log('監聽到了obj的變化');
                            console.log(newVal, oldval);
                        }, {
                            deep: true
                        })
                    }
                }
            })
            
            
//            vm.$watch('a', (newVal, oldval)=>{
//                console.log('監聽到了a的變化');
//                console.log(newVal, oldval);
//            })
//            
//            vm.$watch('obj.name', (newVal, oldval)=>{
//                console.log('監聽到了obj.name的變化');
//                console.log(newVal, oldval);
//            })
//            
//            vm.$watch('obj', (newVal, oldval)=>{
//                console.log('監聽到了obj的變化');
//                console.log(newVal, oldval);
//            }, {
//                deep: true
//            })
            
        </script>