Vue.js：触发后立即执行Watcher处理函数的实现方法

Vue的响应式更新和watch回调都是异步执行的。当你在mounted里修改this.data1 = 2后，Vue并不会立刻执行watch的handler，而是把这次更新放到异步队列中。同步代码里的console.log(this.data2)会先执行，所以拿到的还是旧值2。

immediate: true的作用是组件初始化时立刻执行一次watch的handler，和修改数据时的同步执行无关，所以对你的场景不起作用。

以下几种方法都能实现修改data1后立刻获取更新后的data2，且不需要改用computed：

方案1：使用$nextTick #

把console.log放到$nextTick回调中，它会在Vue的异步更新队列执行完成后触发，此时watch的handler已经执行完毕：

export default {
    data() {
        return {
            data1: 1,
            data2: 2
        }
    },
    mounted() {
        this.data1 = 2
        this.$nextTick(() => {
            console.log(this.data2) // 输出6
        })
    },
    watch: {
        data1: {
            handler(newData1) {
                this.data2 = newData1 * 3
            }
        }
    }
}

方案2：手动调用watch的handler #

修改data1后，直接手动调用watch的handler函数，强制同步执行更新逻辑：

export default {
    data() {
        return {
            data1: 1,
            data2: 2
        }
    },
    mounted() {
        this.data1 = 2
        // 手动调用handler，注意绑定this上下文
        this.$options.watch.data1.handler.call(this, this.data1)
        console.log(this.data2) // 输出6
    },
    watch: {
        data1: {
            handler(newData1) {
                this.data2 = newData1 * 3
            }
        }
    }
}

方案3：抽离更新逻辑到方法中 #

把watch里的更新逻辑抽成独立的方法，修改data1后直接调用该方法，同时watch依然监听data1的变化自动执行：

export default {
    data() {
        return {
            data1: 1,
            data2: 2
        }
    },
    methods: {
        updateData2(newData1) {
            this.data2 = newData1 * 3
        }
    },
    mounted() {
        this.data1 = 2
        this.updateData2(this.data1)
        console.log(this.data2) // 输出6
    },
    watch: {
        data1: {
            handler: 'updateData2'
        }
    }
}

内容的提问来源于stack exchange，提问作者ezegyfa