简单的 VueJS 问题（在挂载中设置 $data）

Question

编辑

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

有以下区别：

mounted() {
    // ....
}

和：

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

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

题

我可能只是累了，但在睡觉前我想在这里寻求帮助，看看是否有人能找到我的问题。我有一个非常简单的 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>

项目.json

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

这些段落永远不会呈现。经过检查_this.items，在 AJAX 处理程序中设置它之前它看起来不存在（我希望它是一个空数组）并且_this.$data也不存在

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

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

Answer 1

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

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

...没有自己的this, arguments, super, 或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 {...}

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

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