no-setup-props-reactivity-loss.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/no-setup-props-reactivity-loss	disallow usages that lose the reactivity of `props` passed to `setup`	v9.17.0

vue/no-setup-props-reactivity-loss

disallow usages that lose the reactivity of props passed to setup

📖 Rule Details

This rule reports the destructuring, member expression or conditional expression of props passed to setup causing the value to lose reactivity.

<script>
export default {
  /* ✓ GOOD */
  setup(props) {
    watch(
      () => props.count,
      () => {
        console.log(props.count)
      }
    )

    return () => {
      return h('div', props.count)
    }
  }
}
</script>

Destructuring the props passed to setup will cause the value to lose reactivity.

<script>
export default {
  /* ✗ BAD */
  setup({ count }) {
    watch(
      () => count,
      () => {
        // not going to detect changes
        console.log(count)
      }
    )

    return () => {
      return h('div', count) // not going to update
    }
  }
}
</script>

Also, destructuring in root scope of setup() should error, but ok inside nested callbacks or returned render functions:

<script>
export default {
  setup(props) {
    /* ✗ BAD */
    const { count } = props

    watch(
      () => props.count,
      () => {
        /* ✓ GOOD */
        const { count } = props
        console.log(count)
      }
    )

    return () => {
      /* ✓ GOOD */
      const { count } = props
      return h('div', count)
    }
  }
}
</script>

Also, using a conditonal expression in root scope of setup() should error, but ok inside callbacks or returned render functions:

<script>
export default {
  setup(props) {
    /* ✗ BAD */
    const test = props.foo ? true : false

    watch(
      () => props.foo,
      () => {
        /* ✓ GOOD */
        const test = props.foo ? true : false
        console.log(test)
      }
    )

    return () => {
      /* ✓ GOOD */
      const test = props.foo ? true : false
      return h('div', test)
    }
  }
}
</script>

🔧 Options

Nothing.

📚 Further Reading

• Guide - Composition API - Setup
• Vue RFCs - 0013-composition-api

🚀 Version

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

🔍 Implementation

• Rule source
• Test source