vue/no-setup-props-destructure
disallow usages that lose the reactivity of
propspassed tosetup
- ⛔ This rule was removed in eslint-plugin-vue v10.0.0 and replaced by vue/no-setup-props-reactivity-loss rule.
📖 Rule Details
This rule reports the destructuring 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>
🔧 Options
Nothing.
📚 Further Reading
🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0