no-ref-object-destructure.md

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

vue/no-ref-object-destructure

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

📖 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.

🚀 Version

This rule was introduced in eslint-plugin-vue v9.5.0

🔍 Implementation

• Rule source
• Test source