然后我们将此模板引用传递给useFocusTrap组合。useFocusTrap(container,{immediate:true});immediate选项会自动将焦点设置到容器内的第一个可聚焦元素。示例地址：https://stackblitz.com/edit/v...3.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}'}当然，我们不局限于注入样式。我们可以在我们的中添加这些中的任何一个：到本地存储，例如：第一次加载时，input显示'Hello,world!'，但最后，它会原样显示您在input内容中最后输入的内容保存在本地存储中。除了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'])参考。constcount=useVModel(props,'count',emit)只要prop改变，这个计数就会改变。但是每当它从该组件发生更改时，它都会发出update:count事件，该事件会通过v-model指令触发更新。我们可以像这样使用这个Input组件。这里的countref通过v-model绑定与Input组件内部的countref同步。案例地址：https://stackblitz.com/edit/v...6.useImage随着时间的推移，Web应用中的图像变得越来越漂亮。我们已经有了带有srcset的响应式图像、一个渐进式加载库和一个仅在图像滚动到视口中时才加载的库。但是您知道我们还可以访问图像本身的加载和错误状态吗？我以前主要是通过监听每个HTML元素发出的onload和onerror事件来做到这一点，但是VueUse为我们提供了一种更简单的方法，那就是useImage组合。第一步是通过useImage设置图片的src:const{isLoading,error}=useImage({src:url})获取isLoading和它返回的errorreferences来跟踪状态。这个组合在内部使用useAsyncState，因此它返回与该组合相同的值。一旦安排好，useImage加载我们的图像并为其附加一个事件处理程序。我们所要做的就是在我们的模板中使用相同的URL来使用图像。由于浏览器重用任何缓存的图像，它将重用由useImage加载的图像。这里我们设置了一个基本的加载和错误状态处理程序。当图像正在加载时，我们显示一个占位符。如果有错误，我们显示一条错误消息。否则我们可以渲染图像。UseImage还有一些其他很酷的功能！如果你想让它成为响应式图像，那么它支持srcset和sizes属性，这些属性传递给幕后的img元素。有如果您想将所有内容都放在模板中，它也是一个无渲染组件。它与组合组件的工作方式相同：糟糕！示例：https://stackblitz.com/edit/v...7.深色模式useDark最近，似乎每个网站和应用程序都有深色模式，最难的是样式更改。但是一旦你有了这些，来回切换就很容易了。如果您使用的是Tailwind，则只需将dark类添加到html元素，它将在整个页面中启用。但是，在深色模式和浅色模式之间切换时需要考虑一些事项。首先，我们必须考虑用户的系统设置。其次，我们必须记住他们是否覆盖了选项。VueUse的useDark组合性为我们包装了所有这些。默认情况下，它会查看系统设置，但任何更改都会保存到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有一个巨大的组合库，我们在这里只介绍了其中的一小部分。我强烈建议您花一些时间浏览文档以查看可用的所有内容。这是一个非常好的资源，可以让您免于大量的样板代码和不断地重新发明轮子。编辑过程中可能存在的BUG无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。作者：Noveo译者：小智来源：vuemastery原文：https://www.vuemastery.com/bl...交流有梦想，有干货，微信搜索【大千世界】关注这位还在洗碗的清晨擦碗。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。