Vue.js: What is the difference between useAttrs and $attrs in Vue?

1<script setup>
2import { useAttrs } from "vue"
3
4const attrs = useAttrs()
5console.log(attrs)  // All non-prop attributes
6</script>
7
8<template>
9    <div v-bind="attrs">Content</div>
10</template>

1export default {
2    inheritAttrs: false,
3    mounted() {
4        console.log(this.$attrs)
5    }
6}