Javascript 关于vuejs示例中承诺的解释请求

我有一个有两个组件的小沙箱。对象列表（例如“组”）和确认模式。单击删除按钮时会触发模式。（这个沙箱是从中提取出来的，我在沙箱中要求以不同的方式将模态的结果发送到父组件

GroupList

）

以下是模态组件：

<template>
  <b-modal
    id="modalConfirmation"
    title="Confirmation"
    ok-variant="danger"
    @cancel="resolvePromise(false)"
    @ok="resolvePromise(true)"
    @close="resolvePromise(false)"
  >Are you sure you want to delete this row ?</b-modal>
</template>

<script>
export default {
  name: "ModalConfirmation",
  data() {
    return {
      group: null,
      resolvePromise: null,
      rejectPromise: null
    };
  },
  methods: {
    show(group) {
      return new Promise((resolve, reject) => {
        this.group = group;
        this.$bvModal.show("modalConfirmation");
        this.resolvePromise = resolve;
        this.rejectPromise = reject;
      });
    }
  }
};
</script>

因为当显示模式时会调用承诺构造函数，仅此而已

再者，如果我评论一下

  resolvePromise: null,
  rejectPromise: null

---

在模态组件中，它仍然有效。有人能给我解释一下这种情况下的承诺解决流程吗？

模板中的

数据是Vue组件方法中的
this

下面是发生的情况：

调用
show
时，传递到
new Promise
中的函数（Promise executor函数）将与
resolve
和
reject
特定于该承诺的函数同步调用：调用时，它们将解析或拒绝承诺。
show
中的承诺执行者将它们存储在Vue组件数据中，作为
resolvePromise
和
rejectPromise
：

this.resolvePromise = resolve;
this.rejectPromise = reject;


show
返回承诺

使用这些函数作为单击处理程序渲染组件：

@ok="resolvePromise(true)"
@cancel="resolvePromise(false)"
@close="resolvePromise(false)"

这些函数在模板中可用，就像
data
对象上的任何其他函数一样

单击其中一个按钮时，它会解析或拒绝通过这些函数返回的承诺
show
您可以在调试器（推荐）中看到该流，或者通过添加日志语句，例如（）：

没有任何改变的是，它们在那里并不是真正必要的。在一开始就指定它们可以防止数据对象的形状（属性和原型）在以后调用
show
时发生更改，这有助于JavaScript引擎优化。但是，正如您注意到的那样，您不必这样做。
模板中的
数据是Vue组件方法中的
数据

下面是发生的情况：

调用
show
时，传递到
new Promise
中的函数（Promise executor函数）将与
resolve
和
reject
特定于该承诺的函数同步调用：调用时，它们将解析或拒绝承诺。
show
中的承诺执行者将它们存储在Vue组件数据中，作为
resolvePromise
和
rejectPromise
：

this.resolvePromise = resolve;
this.rejectPromise = reject;


show
返回承诺

使用这些函数作为单击处理程序渲染组件：

@ok="resolvePromise(true)"
@cancel="resolvePromise(false)"
@close="resolvePromise(false)"

这些函数在模板中可用，就像
data
对象上的任何其他函数一样

单击其中一个按钮时，它会解析或拒绝通过这些函数返回的承诺
show
您可以在调试器（推荐）中看到该流，或者通过添加日志语句，例如（）：

没有任何改变的是，它们在那里并不是真正必要的。在一开始就指定它们可以防止数据对象的形状（属性和原型）在以后调用
show
时发生更改，这有助于JavaScript引擎优化。但是，正如您注意到的那样，您不必这样做。
resolvePromise
是Vue实例上的属性，承诺执行者存储了与承诺关联的
resolve
函数。为了更清楚一点，我编辑了上面的#1。（FWIW：我的新书将于6月出版，我将在第8章深入探讨承诺：-）查看我的个人资料以获取链接等）就这样！这是我不明白的事情，这就是为什么我不能弄清楚它实际上是如何解决承诺的。谢谢现在真的很清楚了@lbris我认为他的意思是，虽然预先定义了它们，但这并不重要。将它们放在那里将优化JS引擎的代码，因此预定义它们而不是简单地删除它们有实际的好处。@lbris-Hiws上面说的基本上就是它。对象形状更改的次数越少，优化效果越好。这就是说，在这种情况下，它是一个小优化（相对于整个组件而言），并且它不是免费的（更多的源文本，在两个地方有名称是一件维护的事情…）。谢谢你花时间给我这个非常清楚的答案
resolvePromise
是Vue实例上的属性，承诺执行者将与承诺关联的
resolve
函数存储在该实例中。为了更清楚一点，我编辑了上面的#1。（FWIW：我的新书将于6月出版，我将在第8章深入探讨承诺：-）查看我的个人资料以获取链接等）就这样！这是我不明白的事情，这就是为什么我不能弄清楚它实际上是如何解决承诺的。谢谢现在真的很清楚了@lbris我认为他的意思是，虽然预先定义了它们，但这并不重要。将它们放在那里将优化JS引擎的代码，因此预定义它们而不是简单地删除它们有实际的好处。@lbris-Hiws上面说的基本上就是它。对象形状更改的次数越少，优化效果越好。这就是说，在这种情况下，它是一个小优化（相对于整个组件而言），并且它不是免费的（更多的源文本，在两个地方有名称是一件维护的事情…）。谢谢你花时间给我这个非常清楚的答案！
resolvePromise: null,
rejectPromise: null