Skip to content

Latest commit

 

History

History
121 lines (100 loc) · 2.96 KB

no-async-in-computed-properties.md

File metadata and controls

121 lines (100 loc) · 2.96 KB
Raw
pageClass sidebarDepth title description since
rule-details
0
vue/no-async-in-computed-properties
disallow asynchronous actions in computed properties
v3.8.0

vue/no-async-in-computed-properties

disallow asynchronous actions in computed properties

  • ⚙️ This rule is included in all of "plugin:vue/vue3-essential", "plugin:vue/essential", "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-recommended" and "plugin:vue/recommended".

Computed properties and functions should be synchronous. Asynchronous actions inside them may not work as expected and can lead to an unexpected behaviour, that's why you should avoid them. If you need async computed properties you might want to consider using additional plugin [vue-async-computed]

📖 Rule Details

This rule is aimed at preventing asynchronous methods from being called in computed properties and functions.

<script>
export default {
  computed: {
    /* ✓ GOOD */
    foo () {
      var bar = 0
      try {
        bar = bar / this.a
      } catch (e) {
        return 0
      } finally {
        return bar
      }
    },

    /* ✗ BAD */
    pro () {
      return Promise.all([new Promise((resolve, reject) => {})])
    },
    foo1: async function () {
      return await someFunc()
    },
    bar () {
      return fetch(url).then(response => {})
    },
    tim () {
      setTimeout(() => { }, 0)
    },
    inter () {
      setInterval(() => { }, 0)
    },
    anim () {
      requestAnimationFrame(() => {})
    }
  }
}
</script>
<script>
import {computed} from 'vue'
export default {
  setup() {
    /* ✓ GOOD */
    const foo = computed(() => {
      var bar = 0
      try {
        bar = bar / this.a
      } catch (e) {
        return 0
      } finally {
        return bar
      }
    })

    /* ✗ BAD */
    const pro = computed(() => Promise.all([new Promise((resolve, reject) => {})]))
    const foo1 = computed(async () => await someFunc())
    const bar = computed(() => {
      return fetch(url).then(response => {})
    })
    const tim = computed(() => {
      setTimeout(() => { }, 0)
    })
    const inter = computed(() => {
      setInterval(() => { }, 0)
    })
    const anim = computed(() => {
      requestAnimationFrame(() => {})
    })
  }
}
</script>

🔧 Options

Nothing.

📚 Further Reading

🚀 Version

This rule was introduced in eslint-plugin-vue v3.8.0

🔍 Implementation