Javascript Vue.js和异步函数调用

我有以下Vue.js组件：

module.exports = {
    data: function () {
        return { 
             searchText: "",
             searchResult: []
        }
    },
    watch:
    {
        searchText: function() {
            this.searchResult = this.search()
        }
    },
    methods:
    {
        search: function()
        {
            var result = [];
            var _self = this;

            $.getJSON("data/data.json", function(json) {                   
                $.each(json, function(index, obj) {
                    if (_self.searchText.length > 0 && obj.text.indexOf(_self.searchText) != -1)
                        result.push(obj);
                }, this);
            });

            return result;
        }
    }
}

这段代码运行良好，但我不明白为什么：

---

为什么

search（）

在不等待异步函数

$.getJSON（）

的结果的情况下不返回空数组？令人惊讶的是（对我来说），它只在回调函数完成后返回。

它实际上只返回一个空数组

---

但是，由于JS中的数组是通过引用传递的，因此从方法中获取的数组与从方法中获取的数组完全相同。因此，当AJAX请求解析时，项目被添加到该数组中，这就是您随后看到的内容。

它实际上只返回一个空数组

---

但是，由于JS中的数组是通过引用传递的，因此从方法中获取的数组与从方法中获取的数组完全相同。因此，当AJAX请求解析时，这些项将添加到该数组中，这就是您随后看到的。

@JosephSilber已经给出了正确的答案，但作为一点额外的内容，您可以返回

result.slice（）

，它创建了数组的副本，在这种情况下，它将是您的快照。然后你应该看到它确实是空的：）@JosephSilber已经给出了正确的答案，但是作为额外的一点，你可以返回

result.slice（）

，它创建了数组的一个副本，在这里它将是你的快照。然后你应该看到它确实是空的：）