vue setup的参数context的属性attr跟随父元素更新

在Vue 3中，`setup` 函数是用于函数组件的新特性，它允许组件内部像传统的自定义渲染函数一样使用 `ref` 和 `watch` 等API，同时保持轻量级和模块化。其中 `context` 参数实际上是在Composition API (组合API)下提供的组件实例上下文，包含了当前组件的一些基本属性，如 `props`, `attrs`, `emit` 等。

`context.attrs` 主要是用来接收父组件传递下来的属性（Props）。如果父组件的某个属性发生了更新，`context.attrs` 的值也会相应地更新，这得益于Vue的响应式系统。当你在父组件中设置了一个动态的属性，并将其作为 `props` 传给子组件时，子组件可以访问到这个动态的变化，因为`attrs` 属性会追踪其外部父组件的变化。

然而需要注意的是，`context.attrs` 只能读取和响应来自父组件的属性，不能直接用于修改父组件的状态。如果需要让子组件影响父组件的状态，通常需要使用 `emit` 钩子来触发事件通知父组件。

// 子组件 setup 中
import { onMounted } from 'vue'

const myAttr = ref(context.attrs.myProp)

onMounted(() => {
  // 当myAttr依赖的props变化时，这里会被重新运行
  console.log(myAttr.value)
})

// 使用 emit 更新父组件
button.on('click', () => {
  emit('update:myProp', newValue)
})