javascript - 在 for 循环中设置 vue.js 观察者

Question

尝试在 Vue.js 中动态添加观察者。期望/实际结果之间的脱节显示在下面的评论部分。偶尔/业余编码员在这里；我怀疑我的问题不在于 Vue，而在于对 JavaScript 基础知识的理解。提前致谢!

new Vue({
    el: '#app',
    data: {
        a: 1,
        b: 2,
        c: 3
    },
    methods: {
        setUpWatchers(array) {
            for (var i in array) {
                var key = array[i];

                this.$watch(key, function(newValue) {
                    console.log(key + ': ' + newValue);

                    //desired output is:
                    //  a: 4
                    //  b: 5
                    //  c: 6

                    //actual output is:
                    //  c: 4
                    //  c: 5
                    //  c: 6

                });
            }
        }
    },
    created() {
        this.setUpWatchers(['a', 'b', 'c']);

        this.a = 4;
        this.b = 5;
        this.c = 6;
    }
});

Answer 1

你是对的，这是一个经典的 javascript“陷阱”。

用 var 声明的变量有一个函数作用域。当使用 var 时，所有 在循环中声明的函数(您正在声明 3；$watch 的处理程序)使用的是 same 变量，在循环完成后，它指向 c。

一个快速的修复方法是使用 let 声明变量。 let 具有 block 作用域，因此循环中声明的每个函数都只能访问创建函数时存在的变量副本。

这是一个工作示例。

new Vue({
    el: '#app',
    data: {
        a: 1,
        b: 2,
        c: 3
    },
    methods: {
        setUpWatchers(array) {
            for (let i in array) {
                let key = array[i];

                this.$watch(key, function(newValue) {
                    console.log(key + ': ' + newValue);
                });
            }
        }
    },
    created() {
        this.setUpWatchers(['a', 'b', 'c']);

        this.a = 4;
        this.b = 5;
        this.c = 6;
    }
});

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app"></div>

理想情况下，现在您应该使用 let 或 const 而几乎从不使用 var。有许多资源可以描述这些差异。