4种方案带你探索Vue代码复用的前世今生

　　目录

　　前言

　　在我们平时开发中，不论你使用什么语言，当遇到了大量的重复代码，我们可能会去将重复代码提取出来，独立一个模块，在多个地方引用，这是一个好习惯，是值得推荐的！当然也有些同学不感冒，使用到了直接，撇开代码规范，设计模式这些不谈，往往会给你带来更大的工作量（比如用了很多地方，你要去很多地方，如果后续有变动，你又要重复到很多地方......，当然不推荐）。我们所熟知的也在如何提取公共代码复用方面也一直在探索优化，本文笔者就来和各位聊聊Vue.js代码复用的前世今生。

　　在Vue.js中我们可通过以下4种方案来实现代码逻辑复用：

　　可能各位常用的是，没关系，其他几种也很好理解。笔者会通过一个实际的案例分别使用以上的方案实现，并分析各种方案的优缺点来带各位掘友体会在代码逻辑复用方面的优化历程。

　　案例：就以大家所熟知的 鼠标位置 来吧

　　Vue.js 代码逻辑复用

　　我们先不考虑复用，先来看看如何实现鼠标位置这个功能，功能十分简单，大家肯定都会，笔者就不废话了，直接看下代码吧：

　　基础实现

　　看完这个实现，首先它肯定是没有以上的各种问题的，同时Composition API也是的一个重大更新，能够让我们更轻松的组织我们的逻辑代码，更轻松的达到逻辑复用，可谓是完美方案！

　　可能你还有点小问题，比如为啥要先解构，再返回 。

　　能直接返回useMouseMove()吗

　　const App = {

　　setup() {

　　return useMouseMove()

　　},

　　template: `{{x}} {{y}}`,

　　}

　　答：如果你没有其他变量需要暴露出去，你当然可以直接返回。但是直接返回，那又回到了之前的问题，又不能清晰地看出哪个变量是哪个组合式函数注入的。

　　我能不能在return的对象里解构

　　const App = {

　　setup() {

　　return {

　　...useMouseMove()

　　}

　　},

　　template: `{{x}} {{y}}`,

　　}

　　答：可以，但不推荐，这么写还是又回到了之前的问题。

　　最佳实践

　　const App = {

　　setup() {

　　const { x, y } = useMouseMove()

　　return { x, y }

　　},

　　template: `{{x}} {{y}}`,

　　}

　　总结

　　本文用四种逻辑复用的方案实现了 鼠标位置 的例子，并且分析了每种方案的优缺点。

　　相信读完本文，你一定学到了在搭建的应用中实现代码逻辑复用的最佳姿势！

　　以上就是4种方案带你探索Vue代码复用的前世今生的详细内容，更多关于Vue代码复用的资料请关注脚本之家其它相关文章！

　　您可能感兴趣的文章: