javascript - 简单的VueJS问题(在mounted中设置$data)

Question

编辑

提供的 Component.vue 是一个更大的 Web 应用程序的一部分，因此我删除了这个问题的相关代码。我没有注意到的是，我在删除代码时所做的一个非常微小的更改产生了很大的影响。

两者之间有区别:

mounted() {
    // ....
}

和:

mounted: () => {
    // ....
}

今天早上经过仔细调查，我在代码中发现了这个错误，并且我更新了问题以反射(reflect)失败的实际代码。

问题

我可能只是累了，但在 sleep 之前我想在这里寻求帮助，看看是否有人能找到我的问题。我有一个非常简单的 Vue 组件无法正常工作:

组件.vue:

<template>
    <div>
        <p v-for="item in items">{{ item.text }}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: []
            };
        },
        mounted: () => {
            var _this = this;
            $.ajax("/items.json").done(result => {
                _this.items = result;
            });
        }
    };
</script>

items.json

[
    {"text": "ABC"},
    {"text": "XYZ"}
]

这些段落永远不会呈现。经检查，在 AJAX 处理程序中设置 _this.items 之前，它似乎不存在(我希望它是一个空数组)，并且 _this.$data 也是如此不存在

~mounted 方法中的 this 值与 Vue 中其他地方的值不同吗？~ 还是我犯了一个简单的错误？

以这种方式(使用冒号)编写 mounted 函数会导致 this 的值不同。这是为什么？

Answer 1

经过进一步的研究，我了解到普通函数和箭头函数之间的细微差别。我之前认为后者只是一种简写，但它也没有自己的上下文。

方法 mounted: () => {} 使用箭头函数，因此

...does not have its own this, arguments, super, or new.target

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

这是一个简单的示例，演示了可以在 Chrome 控制台中测试的差异

let testFunc = function() { console.log(this); }
testFunc(); // Window {...}
testFunc.bind("test")(); // String {"test"}
testFunc = () => { console.log(this); }
testFunc(); // Window {...}
testFunc.bind("test")(); // Window {...}

使用箭头函数时，无法将值绑定(bind)到 this。这意味着在 Vue 内部，他们无法将 Vue 实例绑定(bind)到 this。

方法 mounted() { } 仅利用对象的 ES6 简写，而不是箭头函数(因此它确实有自己的上下文，您可以使用可以绑定(bind)this变量)