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

🔧 Options

Nothing.

🔍 Implementation

• Rule source
• Test source