Question

这可能是一个简单的问题，但是有人可以澄清以下javascript代码吗？

// 'response' is the JSON data gotten from the backend:
....then(response => {
  this.myVar = response.data;
});

// 'myVar' is initialised here:
data: function() {
  return {
    myVar: null
  };
}

我可以看到我们如何声明一个指向返回初始化变量“ myVar”的函数的“数据”属性。我不太了解如何将“ myVar”设置为响应值。我认为这是一种JS技术？有人可以解释一下还是给我提供这样的链接？

*编辑* 从响应中看，我似乎没有提供足够的信息（很抱歉，我假设这是一个简单的JS问题）。我从一个教程中提取了此代码，并且可以正常工作。代码摘录来自.vue文件。所以我在这里提供整个文件。问题还是一样。

<template>
  <div>
    <button class="my-button" v-text="myVar.name" :type="type">My Button</button>
  </div>
</template>

<script>
export default {
  mounted() {
      // The "api/vue" route calls a controller that supplies a JSON object with a single name=>value pair
      axios.post("api/vue", {}).then(response => {
      // ?? How exactly does myVar get allocated the JSON data?
      this.myVar = response.data;
    });
  },

  // initiate the 'myVar' variable 
  data: function() {
    return {
        // ?? this object is delared here and somehow accessible to the whole file?
      myVar: null
    };
  },

};
</script>

Answer 1

整个代码构成了Vue组件。在Vue组件中，初始data应该是一个函数，在创建组件时将调用该函数。由data()返回的对象是该组件的初始数据，并且是可观察的（observable表示，如果您进行更改，则其他内容也会更改）。这里使用的javascript技术是Object.defineProperty：https://vuejs.org/v2/guide/reactivity.html

根据您的代码，它说您有一个名为“ myVar”的初始数据，如果更改“ myVar”的值，则与“ myVar”绑定的dom将自动更改。在您的代码中，它是button的文本。

已安装

这是一个生命周期挂钩，它将在组件安装到dom后被调用。

您在此处调用了AJAX，然后使用箭头功能处理AJAX的结果。 arrow function表示this不会改变（此处this等于Vue组件）。

我们已经在该组件上有了一个初始数据“ myVar”，现在我们对其进行更改：

this.myVar = response.data;

由于它是可观察/可反应的，因此模板中button的文本将被更改。

顺便说一句，您的初始myVar为空，因此您的初始文本myVar.name将导致错误

Answer 2

....then(response => {
  this.myVar = response.data;
});

在上面的代码中，您使用fetch方法从某个端点调用数据，并将该调用的结果分配给名为myVar的变量

data: function() {
  return {
    myVar: null
  };
}

myVar是来自上述函数结果的变量：我认为此方法负责存储从API提取的数据。如果在同一个对象/类中调用这些方法，则可能可以一起使用它们，但我看不到整个组件，因此很难猜测。为了对此有更多的了解，您需要深入研究函数和对象内的“范围”主题

Answer 3

// 'response' is the JSON data gotten from the backend:
....then(response => {
    this.myVar = response.data;
});

在第一种方法中，您正在从服务器中获取数据，并为其分配this.myVar（而不是myVar）。因此它在组件本地，但是... 在下面的代码中，每当调用data（）时，都将返回一个封装了myVar属性的对象。它与this.myVar不同。

// 'myVar' is initialised here:
data: function() {
   return {
      myVar: null
   };
}

我不确定您要在这里实现什么，但是这些变量无关。也许命名也需要做一些工作，所以对于我们来说，更容易看出这段代码的目的。无论哪种方式，如果this.myVar是您的组件所拥有的变量，则从data（）方法返回的对象都不会对其产生任何影响，因为它的结构不同。您要在数据中返回的对象中的myVar是该对象本地的新变量。

以下变量分配如何工作？

3 个答案: