Vue3$Data-InAction

在 Vue 中定义数据有多种方式，在实际使用中需要思考两个问题：

• Which：使用什么样的数据
• Where：数据放到哪里

Which

有些类型非常明显，只要知道它们的用处，就不需要思考在哪里使用了。

• 常量：既可以在组件内定义，也可以在单独的文件重定义
• computed Vue3$Data-Computed：衍生出来的数据——不是“源”数据
• fallthrough attributes Vue3$Data-FallthroughAttributes：一般用来接受 class、style、id等
• TemplateRef Vue3$Data-TemplateRef：想要获取子组件 / DOM元素的信息

Where

1. ref 和 reactive Vue3$Data-RefAndReactive：组件内的响应式数据
   1. 如果多个组件使用时，需要“状态提升”（提升到共同的祖先组件）
      1. 提升到父组件时：可使用 props 或 v-model 接住
      2. 提升到父组件以上时：可使用 provide + inject
      3. 太多组件使用时：可使用 store
2. props Vue3$Data-Props：如果当前组件只是展示内容，或者 props 只是提供初始值（消费者）
   1. 也可以将操作 props 的方法也传入组件内，这样就形成了“双向绑定”
3. v-model Vue3$Data-V-Model：当前组件需要处理父组件的数据（表单）
4. provide 和 inject Vue3$Data-ProvideAndInject：如果当前组件的“源数据”在祖父组件以上（虽然也可以是父组件）
5. store Vue3$Data-Pinia：多个页面使用时可以使用pinia