vue中computed和watch的用法

• computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
• watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，

 

     

        <el-input v-model="firstNum"></el-input>
            +
        <el-input v-model="lastNum"></el-input>
        <span>=</span>
       <span>{{sumNum.name}}{{sumNum.price}}</span>

export default {
    data() {
        return {
       
            firstNum: 0,
            lastNum: 0,
        };
    },
    created() {},
    mounted() {},
    watch: {
        firstNum: function() {
            console.log("firstNum的值发生变化了")
        }
    },
    computed: {
        sumNum: function() {

            return {
                name:"测试",
                 price:parseInt(this.firstNum) + Number(this.lastNum)
            }
            
        }
    },

    methods: {},
    destroyed() {
        console.log("离开了页面");
    }
};

           person: {
                name: "kk",
                age: 1
            }
        };
    },
    created() {},
    mounted() {},
    watch: {
        firstNum: function() {
            console.log("firstNum的值发生变化了");
        },
        // person: {  //监听对象
        //     handler(newValue, oldValue) {
        //         console.log(newValue);
        //         console.log(oldValue);
        //     },
        //     deep: true
        // },
        "person.name": {
            //单独监听对象中的属性
            handler(newValue, oldValue) {
                console.log(newValue);
                console.log(oldValue);
            },
            deep: true
        }
    },
    computed: {
        sumNum: function() {
            return {
                name: "测试",
                price: parseInt(this.firstNum) + Number(this.lastNum)
            };
        }
    },

    methods: {
        handClick() {
            this.person.name = "里斯";
            this.person.age = 5;
        }
    },

 

本文原网址：https://www.cnblogs.com/gunelark/p/8492468.html