修改

Question

修改

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

之间有区别：

mounted() {
    // ....
}

和

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

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

问题

我可能只是累了，但在睡觉前我想在这里寻求帮助，看看有人能找到我的问题。我有一个非常简单的Vue组件，它不起作用：

Component.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"}
]

段落永远不会呈现。在检查之后看起来_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变量）

Answer 2

安装挂钩通常是最常用的挂钩，无论好坏。它们允许您在第一次渲染之前和之后立即访问组件。但是，它们不会在服务器端呈现期间运行。

使用if：您需要在初始渲染之前或之后立即访问或修改组件的DOM。

不要使用if：您需要在初始化时为组件获取一些数据。为此使用created（）（或为保持活动组件创建+激活），尤其是在服务器端呈现期间需要该数据时。

因此尝试将mounted（）更改为created（）并查看它是否有效。此外，我建议你看看axios发送请求，这是$ .ajax（）的更好的替代方案。确保从正确的路径请求json文件。

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

修改

问题

2 个答案: