pageClass | sidebarDepth | title | description |
---|---|---|---|
rule-details |
0 |
vue/no-ref-object-destructure |
disallow destructuring of ref objects that can lead to loss of reactivity |
disallow destructuring of ref objects that can lead to loss of reactivity
- ❗ This rule has not been released yet.
This rule reports the destructuring of ref objects causing the value to lose reactivity.
import { ref } from 'vue'
const count = ref(0)
const v1 = count.value /* ✗ BAD */
const { value: v2 } = count /* ✗ BAD */
const v3 = computed(() => count.value /* ✓ GOOD */)
const v4 = fn(count.value) /* ✗ BAD */
const v5 = fn(count) /* ✓ GOOD */
const v6 = computed(() => fn(count.value) /* ✓ GOOD */)
This rule also supports Reactivity Transform, but Reactivity Transform is an experimental feature and may have false positives due to future Vue changes.
See the RFC for more information on Reactivity Transform.
const count = $ref(0)
const v1 = count /* ✗ BAD */
const v2 = $computed(() => count /* ✓ GOOD */)
const v3 = fn(count) /* ✗ BAD */
const v4 = fn($$(count)) /* ✓ GOOD */
const v5 = $computed(() => fn(count) /* ✓ GOOD */)
Nothing.