no-ref-object-destructure.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/no-ref-object-destructure	disallow destructuring of ref objects that can lead to loss of reactivity

vue/no-ref-object-destructure

disallow destructuring of ref objects that can lead to loss of reactivity

• ❗ This rule has not been released yet.

📖 Rule Details

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.

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 */)

🔧 Options

Nothing.

🔍 Implementation

• Rule source
• Test source