Vue 中同时监听多个变量

435 阅读1分钟

通过computed计算属性返回一个包含多个变量的对象,然后使用watch监听这个计算属性

export default {
    data() {
        return {
            name: '张三',
            age: '18',
            sex: '男'
        }
    },
    computed: {
        changeAgeSex() {
            let { age, sex } = this;
            return { age, sex };
        }
    },
    watch: {
        changeAgeSex(value) {
            let { age, sex } = value;
            console.log(age, sex);
        }
    }
}

使用$watch同时监听多个变量

export default {
    data() {
        return {
            name: '张三',
            age: '18',
            sex: '男'
        }
    },
    created() {
        this.$watch(()=> [this.age, this.sex], (value) => {
            let { age, sex } = value;
            console.log(age, sex);
        }, { deep: true });
    }
}