vuetify 中的 v-app-bar 和 v-toolbar 有什么区别？

Question

我刚刚开始探索vuetify。所有的 vuetify 组件都位于<v-app>。
我想为我的网站创建菜单，所以在文档中我找到了 <v-app-bar> 和 <v-toolbar>
我很困惑，如果我应该将菜单项保留在 <v-app-bar> 或 <v-toolbar> 中，就像官方文档所说的那样

关于<v-app-bar>https://vuetifyjs.com/en/components/app-bars

v-app-bar 组件对于任何图形用户界面都至关重要 (GUI)，因为它通常是网站导航的主要来源。这 app-bar 组件与 v-navigation-drawer 用于在您的应用程序中提供站点导航。

关于<v-toolbar>https://vuetifyjs.com/en/components/toolbars

v-toolbar 组件对于任何 gui 来说都是至关重要的，因为它通常是 网站导航的主要来源。工具栏组件效果很好 与 v-navigation-drawer 和 v-card 结合使用。

两者的描述几乎相同。两者有什么区别，什么时候应该使用什么？或者我们应该在v-app-bar 中使用v-toolbar？

Answer 1

根据Vuetify Migration Guide -- 'Migrating from v1.5.x to v2.0.x'：

v-toolbar：所有现有的滚动技术和应用功能 已弃用并移至 v-app-bar。

因此，从 Vuetify 2.0 开始，v-app-bar 是您可能希望在大多数典型应用程序的顶部使用的，因为您可以执行与滚动相关的效果并将 v-app-bar 指定为唯一的“顶级”application component使用 app 道具。

另一方面，v-toolbar 可用于其他“从属”情况，其中滚动绝对不会影响工具栏，也许如果 v-toolbar 被用作屏幕内小部件的一部分。

Answer 2

实际上v-app-bar 扩展了v-toolbar 以提供您可以使用的其他属性。

这些属性让您可以更精细地控制工具栏的整体布局以及它如何响应周围空间的大小和内容变化。

您可以查看每个属性，并了解 v-app-bar 如何拥有十几个或更多其他属性，您可以利用这些属性来自定义其功能和设计，而 toolbar 则固执己见地了解其用途和限制那些功能。