Vue computed 和 watch

最新推荐文章于 2025-09-09 08:37:13 发布

转载最新推荐文章于 2025-09-09 08:37:13 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015190941

文章标签：

#javascript #ViewUI

本文介绍了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>