why attributes is Non-reactive object?

[tangjian1891]

i noticed that attrs is a proxy object.
docs https://vuejs.org/api/composition-api-setup.html#setup-context. "attrs and slots are stateful objects".
i don't know what is the difference between reactive object and stateful object.
i can't find them in the "Glossary"

---

#8421 Using isReactive(attrs) returns false,but attrs in watch or computed is correct.

i am very confused. why is it designed this way?

[KaloudasDev]

Hello! This is an excellent question about Vue's reactivity system. The behavior you're observing is intentional and here's why:

What "Stateful" Means vs "Reactive":

• Reactive objects: Track property access for fine-grained reactivity (using reactive())
• Stateful objects: Maintain internal state but don't trigger fine-grained updates

Why attrs is a Proxy But Not Reactive:

import { isReactive, watch } from 'vue';

console.log(isReactive(attrs));

watch(() => attrs.class, (newClass) => {
  console.log('Class changed:', newClass);
});

watch(attrs, (newAttrs) => {
});

The Design Rationale:

1. Performance: attrs can change frequently during parent re-renders
2. Simplicity: Most use cases only need to read current attribute values
3. Predictability: Avoid unnecessary reactivity overhead for transient data

Proper Usage Patterns:

<script setup>
import { useAttrs, watch } from 'vue';

const attrs = useAttrs();

watch(() => attrs.class, (newClass) => {
  console.log('Class changed:', newClass);
});

const hasDataAttribute = computed(() => 'data-test' in attrs);

watch(attrs, () => {
});

watchEffect(() => {
  console.log('Current class:', attrs.class);
  console.log('Current style:', attrs.style);
});
</script>

<template>
  <div v-bind="attrs">
    {{ hasDataAttribute }}
  </div>
</template>

When You Need Full Reactivity:

<script setup>
import { reactive, toRefs, watch } from 'vue';

const { class: className, style } = toRefs(useAttrs());

const reactiveAttrs = reactive({ ...useAttrs() });

watch(reactiveAttrs, (newAttrs) => {
});
</script>

Key Takeaways:

• attrs is stateful but not reactive for performance reasons
• It works in watch and computed because they track individual property access
• Use specific property access rather than watching the entire object
• The Proxy wrapper enables Vue's internal state management

This design strikes a balance between functionality and performance for the most common attribute use cases.