likes
comments
collection
share

Vue3 组合式最佳实践（三）

作者站长头像
站长
· 阅读数 58

Vue3 组合式最佳实践（三）

本文为翻译文章，部分内容难免理解有偏差，如有错误欢迎大家指正。原文链接见文章末尾。

如果我们实现的组合式方法可以根据使用情况来返回不同的值，一个值或者是一个完整的对象，我们该如何来实现呢。本篇文章我们将讲述一种实现组合式方法动态返回的模式，我们将了解何时使用此模式，如何实现它，并查看正在使用该模式的一些示例。

本篇是这个系列文章的第三篇，全部涵盖内容如下：

动态返回值模式

我们在上篇文章末尾给大家提供了一个小例子

// Returns a single value 
const isDark = useDark(); 

// Returns an object of values 
const { 
    counter, 
    pause, 
    resume, 
} = useInterval(1000, { controls: true });

我们发现在使用组合式方法时，有的是返回一个值，有的是返回一个完整的对象内容。如果我们希望可以在两者之间动态切换，例如，当需要时返回单个值，或者在需要更多控制和更深粒度时返回整个对象。我们该如何实现呢？

在VueUse中，useInterval完美的诠释了这个不错的功能。

// 默认情况 
const counter = useInterval(1000);

// 更多的控制场景
const { counter, pause, resume, } = useInterval(1000, { controls: true }); 
// 1... 
// 2... 
pause(); 
// ... 
resume(); 
// 3... 
// 4...

在组合式方法中实现动态返回值模式

在上面的例子中我们可以看出，它通过增加控制参数的方式来实现这个功能。

要实现此模式，我们需要做两件事：

  • 在我们的选项对象中添加一个选项控制其功能开启
  • 使用该选项更改返回行为

下面是个简单的示例代码

export default useComposable(input, options) { 
    // 1. Add in the `controls` option 
    const { controls = false } = options; 
    
    // ... 
    
    // 2. Either return a single value or an object 
    if (controls) { 
        return { singleValue, anotherValue, andAnother }; 
    } else { 
        return singleValue; 
    } 
}

当然，上面这个只是一个简单的示例，也许我们在实际的代码开发过程中会有各种情况来让我们返回不同的值，并不仅仅是根据一个控制变量来进行if else判断。这种模式最重要的是实现动态返回的这种思想，具体实现大家根据自己的实际情况处理即可。

接下来，让我们看看 VueUse 中的一些组合式方法是如何实现这种模式的。

举例-useInterval

首先，让我们更深入地了解一下useInterval是如何工作的。这个组合式方法将在每个时间间隔更新一个计数器：

// Updates `counter` every 500 milliseconds 
const counter = useInterval(500);

它会在方法内部最顶层解构我们传入的选项对象，并且将controls重命名为exposeControls，默认是false：

const { 
    controls: exposeControls = false, 
    immediate = true, 
} = options;

最后会有一个根据exposeControls的判读情况，是返回包括counter ref在内的对象，还是仅仅是counter ref：

if (exposeControls) { 
    return { counter, ...controls, }; 
} else { 
    return counter; 
}

举例-useNow

useNow可以让我们响应式获取当前 Date 实例

const now = useNow();

默认情况下，它将每秒刷新一次。我们可以更改更新频率，也可以暂停和恢复更新过程：

const { now, pause, resume } = useNow({ controls: true });

useNow和useInterval使用方式非常相似，他们的实现方式也很类似，他们在内部都使用了useIntervalFn这个公共辅助方法。

首先，我们解构选项对象以获取选项，再次重命名以避免命名冲突：

const { 
    controls: exposeControls = false, 
    interval = 'requestAnimationFrame', 
} = options;

然后在末尾，使用条件语句进行动态化切换：

if (exposeControls) { 
    return { now, ...controls, }; 
} else { 
    return now; 
}

在 VueUse 中所有实现此模式的组合式方法都是以这种特定方式完成的：

  • useInterval 使用间隔 
  • useTimeout 使用超时 
  • useNow 使用现在 
  • useTimestamp 使用时间戳 
  • useTimeAgo 使用时间前

小结

我们看到，动态返回值模式允许我们选择如何更灵活地使用组合式方法。根据我们的使用场景，我们可以取回一个值；我们还可以获得包含值、方法和我们可能想要的任何其他内容的整个对象。我们不仅仅看这个模式本身，我们还通过分析VueUse中的useNow和useInterval来看这种模式该如何来实现，这样我们在实际开发场景中可以根据我们的业务场景来实现符合我们需要的组合式方法。

原文链接： # Coding Better Composables (3/5)

转载自:https://juejin.cn/post/7249538922677387323
评论
请登录