Javascript 如何在使用vue资源时使用data（）{}而不是mounted（）{}启动函数

这是可行的，但我需要使用

mounted（）{}

来启动我认为可以避免但不确定如何避免的函数

<script>
  export default {
    data () {
      return {
        domains: [],
      }
    },

    methods: {
      fetchDomains() {
        let _this = this;

        api._get({url: 'api/domains'})
          .then(function (response) {
            _this.domains = response.data;
          })
      }
    },

    mounted() {
      this.fetchDomains()
    }
  }
</script>

---

提前感谢。

您的第一个代码片段就是正确的方法

您无法使用API响应中的数据初始化

域

，因为这是一个异步操作，在将来的某个时间点，以及在安装组件之后，可能会成功解决，也可能不会成功解决。您可能还想做其他事情，比如在请求期间使用

load

属性跟踪异步操作，该属性设置为

true

---

您的组件最初将处于加载状态，并且还没有任何

域

数据，您需要对此进行说明。在此期间显示加载微调器或其他内容。

您的第一个代码段是正确的方法

您无法使用API响应中的数据初始化

域

，因为这是一个异步操作，在将来的某个时间点，以及在安装组件之后，可能会成功解决，也可能不会成功解决。您可能还想做其他事情，比如在请求期间使用

load

属性跟踪异步操作，该属性设置为

true

---

您的组件最初将处于加载状态，并且还没有任何

域

数据，您需要对此进行说明。在此期间显示加载微调器或其他内容。

我同意Deced Moon的观点，即您的第一种方法是更好的方法（尽管您可以使用创建的

而不是安装的
）

第二种方法不起作用的原因是，返回一个数组，然后用另一个数组替换局部变量的值。您需要做的是填充返回的数组


newvue({
el:“#应用程序”，
数据（）{
返回{item:this.getItem（）}
},
方法：{
getItem（）{
设val=[]；
设置超时（（）=>{
常量结果=[‘第一’、‘第二’、‘第三’]；
val.push（…结果）；
}, 800);
返回val；
}
}
});

{{item}
我同意Decade Moon的观点，即您的第一种方法是更好的方法（尽管您可以使用创建的
而不是装入的
）

第二种方法不起作用的原因是，返回一个数组，然后用另一个数组替换局部变量的值。您需要做的是填充返回的数组


newvue({
el:“#应用程序”，
数据（）{
返回{item:this.getItem（）}
},
方法：{
getItem（）{
设val=[]；
设置超时（（）=>{
常量结果=[‘第一’、‘第二’、‘第三’]；
val.push（…结果）；
}, 800);
返回val；
}
}
});

{{item}
我可能稍微偏离了这个问题（因为它明确提到了
数据
属性），但我认为这可能会有所帮助。就个人而言，如果我想提供一些具有更复杂逻辑的数据，我会使用
computed
属性。在我看来，这很好，你可以在中阅读更多关于它的内容。这种情况下的问题是，它不能完全像异步操作预期的那样工作

然而，有一个可爱的小模块称为vue async computed，可以找到它。它通过提供
asyncComputed
属性来解决这个特定的问题，并保持代码真正干净
 我可能稍微偏离了这个问题（因为它明确提到了
数据
属性），但我认为这可能会有所帮助。就个人而言，如果我想提供一些具有更复杂逻辑的数据，我会使用
computed
属性。在我看来，这很好，你可以在中阅读更多关于它的内容。这种情况下的问题是，它不能完全像异步操作预期的那样工作

然而，有一个可爱的小模块称为vue async computed，可以找到它。它通过提供
asyncComputed
属性来解决这个特定的问题，并保持代码真正干净
 正确的建议，技术上不太正确的答案。他的第二个方法可以工作，因为它返回一个将异步填充的变量，但诀窍是填充他将其设置为的数组，而不是替换它。正确的建议，技术上不完全正确的答案。他的第二个方法可以工作，因为它返回一个将异步填充的变量，但诀窍是填充他设置的数组，而不是替换它。
<script>
  export default {
    data () {
      return {
        domains: this.fetchDomains(),
      }
    },

    methods: {
      fetchDomains() {
        let data = [];

        api._get({url: 'api/domains'})
          .then(function (response) {
            data = response.data;
          })

        return data
      }
    }
  }
</script>