vue3：具有定时功能的控制属性

Question

首先，我是一名新的 vuejs 开发人员，我的目的是熟悉 Vue，因此，不会使用任何外部插件或组件。

我正在编写一个简单的警报组件，如下所示：

<Alert :show="showAlert" />

我希望show 属性在 2 秒后返回 false。如何从组件内部执行此操作（即，不在使用此组件的页面中）。我试过这个：

import { computed } from 'vue';
export default {
  props: ['show'],
  setup(props) {
      const shown = computed(() => {
          if (props.show) {
              setTimeout(() => {
                  console.log("hiding the alert...")
                  props.show = false
              }, 2000);
          }
          return props.show.value
      })
      return { shown }
  }
};

编译器说：

14:15  error  Unexpected timed function in computed function  vue/no-async-in-computed-properties
16:19  error  Unexpected mutation of "show" prop              vue/no-mutating-props

我的理由是，alert 的延迟应该由 alert 组件控制（可以通过 prop 更改），而不是强迫调用者写一些类似的东西：

function Alert(delay) {
    showAlert = true
    setTimeout(() => showAlert = false, delay)
}

Answer 1

有 2 个错误。

第一个 vue/no-mutating-props，props 是只读的，所以你不应该从组件内部更改它。仍然可以从组件外部更改 props 并向下传递给它。

为此，您应该将 props 的值复制到您的 data()

data() {
  return {
    showAlert
  }
}

您应该可以毫无问题地更新showAlert。

第二个错误vue/no-async-in-computed-properties，你不能在computed()里面写异步函数，所以替代方法是用watch代替。