然后我们将此模板引用传递给useFocusTrap组合。useFocusTrap(container,{immediate:true});立即选项将自动将焦点设置到容器中的第一个可聚焦元素。示例地址：https://stackblitz.com/edit/vue3-script-setup-with-vite-eocc6w?file=src%2FApp.vue3。useHeadVueUse为我们提供了一种简单的方法来更新我们的应用程序部分的头部——页面标题、脚本和其他可能出现在这里的东西。useHead组合需要我们先设置一个插件import{createApp}from'vue'import{createHead}from'@vueuse/head'importAppfrom'./App.vue'constapp=createApp(App)consthead=createHead()app.use(head)app.mount('#app')一旦我们使用这个插件，我们就可以根据需要更新标题部分。在这个例子中，我们将在按钮上注入一些自定义样式。首先，我们创建一个ref来表示我们要注入的样式，默认为空：conststyles=ref('');其次，设置useHead将样式注入到页面中。useHead({//将样式标签注入头部样式：[{children:styles}],})然后，添加一个方法来注入这些样式：constinjectStyles=()=>{styles.value='button{background:red}'}当然，我们不局限于注入样式。我们可以在我们的中添加这些中的任何一个：.vue4.useStorageuseStorage真的很酷，因为它会自动同步ref到localstorage，例如：第一次加载时，input显示'Hello,world!'，但是最后，它会显示你最后输入的内容，因为它保存在本地存储中。除了localstorage，我们还可以指定sessionstorage：constinput=useStorage('unique-key','Hello,world!',sessionStorage)当然我们也可以自己实现存储系统，只要实现了StorageLike界面。导出接口StorageLike{getItem(key:string):string|nullsetItem(key:string,value:string):voidremoveItem(key:string):void}5.useVModelv-model指令是一个很好的语法糖，使双向数据绑定更容易。但是useVModel更进一步，摆脱了一堆没人真正想写的样板代码。在此示例中，我们首先定义要附加到v-model的道具：constprops=defineProps({count:Number,})然后我们使用v-model命名约定发出事件update::constemit=defineEmits(['update:count'])现在，我们可以使用useVModel组合来组合绑定到ref的道具和事件。constcount=useVModel(props,'count',emit)每当prop改变时，这个计数就会改变。但是每当它从这个组件发生变化时，它都会发出update:count事件，该事件通过v-model指令触发更新。我们可以像这样使用这个Input组件。这里的countref通过v-modelbinding与Input组件内部的countref同步。示例地址：https://stackblitz.com/edit/vue3-script-setup-with-vite-ut5ap8?file=src%2FApp.vue6。useImage随着时间的推移，Web应用程序中的图像变得越来越漂亮。我们已经有了带有srcset的响应式图像、一个渐进式加载库和一个仅在图像滚动到视口中时才加载的库。但是您知道我们还可以访问图像本身的加载和错误状态吗？我以前主要是通过监听每个HTML元素发出的onload和onerror事件来做到这一点，但是VueUse为我们提供了一种更简单的方法，那就是useImage组合。第一步通过useImage设置图片的src:const{isLoading,error}=useImage({src:url})获取其返回的isLoading和error引用，从而跟踪状态。这个组合是内部使用useAsyncState所以它返回与组合相同的值。一旦安排好，useImage加载我们的图像并附加一个事件处理程序。我们所要做的就是在我们的模板中使用相同的URL来使用图像.由于浏览器会重用任何缓存的图像，它会重用通过use加载的图像图像。这里我们设置了一个基本的加载和错误状态处理程序。当图像正在加载时，我们显示一个占位符。如果有错误，我们显示错误消息。否则我们可以渲染图像。UseImage还有一些其他很酷的功能！如果你想让它成为响应式图像，那么它支持srcset和sizes属性，这些属性在幕后传递给img元素。如果您想将所有内容都放在模板中，还有一个无渲染组件。它的工作原理与组合组件相同：糟糕！示例：https://stackblitz.com/edit/vue3-script-setup-with-vite-d1jsec?file=src%2FApp.vue7.暗模式使用DarkRecent实际上，每个网站和应用程序似乎都有暗模式。最困难的部分是改变样式。但是一旦你有了这些，来回切换就很简单了。如果您使用的是Tailwind，则只需将dark类添加到html元素，它就会在整个页面上启用。但是，在深色模式和浅色模式之间切换时需要考虑一些事项。首先，我们必须考虑用户的系统设置。其次，我们必须记住他们是否覆盖了选项。VueUse的useDarkcomposition为我们包装了所有这些。默认情况下，它会查看系统设置，但任何更改都会保存到localStorage，因此设置会被记住。深色模式style:.dark.container{background:slategrey;白颜色;border-color:black;}.darkbutton{背景:lightgrey;color:black;}.darkbody{background:darkgrey;}如果你没有使用Tailwind，你可以传入一个选项对象来完全自定义暗模式的应用方式。这是默认的Tailwind：constisDark=useDark({selector:'html',attribute:'class',valueDark:'dark',valueLight:'',})还可以提供一个onChanged处理程序，这样你就可以编写任何你喜欢的Javascript需要。这两种方法允许您使其与您已有的任何样式系统一起使用。总结Vueuse有一个巨大的组合库，我们在这里只介绍了其中的一小部分。我强烈建议您花一些时间浏览文档以查看可用的所有内容。这是一个非常好的资源，可以让您免于大量的样板代码和不断地重新发明轮子。作者：Noveo译者：小智来源：vuemastery原文：https://www.vuemastery.com/blog/best-vueue-composables