Vue 3 Composition API 实战前瞻
Posted InfoQ
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 3 Composition API 实战前瞻相关的知识，希望对你有一定的参考价值。
作者丨Mateusz Rybczonek
译者丨王强
策划丨王文婧
我最近得到了机会，在一个真实的项目中试用了 Vue 中全新的 Composition API ，进而对它可能的用途以及未来的用法探索了一番。
现在，当我们创建一个新组件时使用的是 Options API 。使用这个 API 时，我们必须通过选项将组件的代码分离开来，这意味着我们需要将所有响应性数据放在一个地方，所有计算的属性放在一个位置，所有方法也都放在一个位置，依此类推。
这个 API 在处理较小的组件时比较易读和顺手，而当组件变得更加复杂，需要处理多种功能时，它用起来就很痛苦了。一般来说，与一个特定功能相关的逻辑会包含一些响应性数据、一些计算属性，还有一种或一些方法。有时还会用到组件生命周期 hooks。于是在处理单个逻辑问题时，需要不断在代码中的不同选项之间来回切换。
使用 Vue 时，可能遇到的另一个问题是设法提取可被多个组件复用的通用逻辑。Vue 已经提供了一些方案可供选择，但它们都有各自的缺点（例如 mixins 和作用域插槽）。而新的 Composition API 带来了一种创建组件、分离代码和提取可复用代码段的全新方式。
首先来看组件内的代码构成。
假设你有一个核心组件，为整个 Vue 应用设置了一些内容（就像 Nuxt 中的布局）。它负责处理以下内容：
设定区域；
检查用户是否处于登录状态，如果没有，则将其重定向；
防止用户重新加载应用程序太多次数；
跟踪用户活动，并在用户静默一段时间后做出反应；
使用 EventBus 监听事件（或窗口对象事件）。
这些只是这个组件可以做的事情的一些例子。你可能会设想出一个更复杂的组件，不过这里的这些已经足够本文举例说明了。为了便于阅读，我只用了 props 的名称，而没有实际实现。
下面是使用 Options API 时组件的样子：
<template><div id="app">...</div></template><script>export default {name: 'App',data() {return {userActivityTimeout: null,lastUserActivityAt: null,reloadCount: 0}},computed: {isAuthenticated() {...}locale() {...}},watch: {locale(value) {...},isAuthenticated(value) {...}},async created() {const initialLocale = localStorage.getItem('locale')await this.loadLocaleAsync(initialLocale)},mounted() {EventBus.$on(MY_EVENT, this.handleMyEvent)this.setReloadCount()this.blockReload()this.activateActivityTracker()this.resetActivityTimeout()},beforeDestroy() {this.deactivateActivityTracker()clearTimeout(this.userActivityTimeout)EventBus.$off(MY_EVENT, this.handleMyEvent)},methods: {activateActivityTracker() {...},blockReload() {...},deactivateActivityTracker() {...},handleMyEvent() {...},async loadLocaleAsync(selectedLocale) {...}redirectUser() {...}resetActivityTimeout() {...},setI18nLocale(locale) {...},setReloadCount() {...},userActivityThrottler() {...},}}</script>
由此可见，解开这团乱麻有多复杂。
以上是关于Vue 3 Composition API 实战前瞻的主要内容，如果未能解决你的问题，请参考以下文章
如何跨多个文件中的多个 Vue 实例正确使用 Vue 3 composition-api
vue2升级vue3: TSX Vue 3 Composition API Refs
为啥在 Vue 3 的 Composition API 中使用“API”这个词？