详解Vue3 Composition API中的提取和重用逻辑


Posted in Javascript onApril 29, 2020

Vue3 Composition API可以在大型项目中更好地组织代码。然儿,随着使用几种不同的选项属性切换到单一的setup 方法,许多开发人员面临的问题是……

这会不会更混乱,因为一切都在一个方法中

乍一看可能很容易,但是实际上只需要花一点点时间来编写可重用的模块化代码。

让我们来看看如何做到这一点。

问题

Vue.js 2.x 的 Options API 是一种非常直观的分隔代码的方法

export default {
 data () {
  return {
   articles: [],
   searchParameters: []
  }
 },
 mounted () {
  this.articles = ArticlesAPI.loadArticles()
 },
 methods: {
  searchArticles (id) {
   return this.articles.filter(() => {
    // 一些搜索代码
   })
  }
 }
}

问题是,如果一个组件中有数百行代码,那么就必须在多个部分data、methods、computed等中为单个特性(例如搜索)添加代码。

这意味着仅一项功能的代码可能会分散分布在数百行中,并分布在几个不同的位置,从而使其难以阅读或调试。图片描述

详解Vue3 Composition API中的提取和重用逻辑

这只是Vue Composition API RFC中的一个示例,展示了现在如何按功能组织代码。

现在,这是使用新的Composition API的等效代码。

import { ref, onMounted } from 'vue'

export default {
 setup () {
  const articles = ref([])
  const searchParameters = ref([])

  onMounted(() => {
   this.articles = ArticlesAPI.loadArticles()
  })

  const searchArticles = (id) => {
   return articles.filter(() => {
    // 一些搜索代码
   })
  }

  return {
   articles,
   searchParameters,
   searchArticles
  }
 }
}

现在,为了解决前面关于组织的问题,我们来看看一个提取逻辑的好方法。

提取逻辑

我们的最终目标是将每个功能提取到自己的方法中。这样一来,如果我们想调试它,所有的代码都在一个地方。

这非常简单,但是最后我们必须记住,如果我们希望能够在模板中访问数据,则仍然必须使用我们的 setup 方法来返回数据。

我们来创建新方法 useSearchArticles 并让它返回我们在 setup 方法中返回的所有东西。

const useSearchArticles = () => {
 const articles = ref([])
 const searchParameters = ref([])

 onMounted(() => {
  this.articles = ArticlesAPI.loadArticles()
 })

 const searchArticles = (id) => {
  return articles.filter(() => {
   // 一些搜索代码
  })
 }

 return {
  articles,
  searchParameters,
  searchArticles
 }
}

现在,在我们的 setup 方法中,我们可以通过调用我们的方法来访问属性。而且,当然,我们还必须记住从设 setup 法中返回它们。

export default {
 setup () {
  const { articles, searchParameters, searchArticles } = useSearchArticles()

  return {
   articles,
   searchParameters,
   searchArticles
  }
 }
}

在提取的逻辑中访问组件属性

Composition API 中的另一个新变化是 this 引用的变化,这一变化意味着我们不能再以相同的方式使用 prop、attributes 或 events。

简而言之,我们将必须使用 setup 方法的两个参数来访问 props,attribute,slot 或 emit 方法。如果我们只使用 setup 方法,一个快速的虚拟组件可能是这样的。

export default {
 setup (props, context) {

  onMounted(() => {
   console.log(props)
   context.emit('event', 'payload')
  })
 }
}

但是现在我们要提取我们的逻辑,我们要把我们的逻辑包装器方法也接受参数。通过这种方式,我们可以从 setup 方法传递我们的 props 和 context 属性,逻辑代码可以访问它们。

const checkProps = (props, context) => {
 onMounted(() => {
  console.log(props)
  context.emit('event', 'payload')
 })
}
export default {
 setup (props, context) {
  checkProps(props, context)
 }
}

重用逻辑

最后,如果我们要编写一些逻辑,希望能够在多个组件中使用,则可以将逻辑提取到其自己的文件中,并将其导入到我们的组件中。

然后,我们可以像之前一样调用该方法。假设我们将我们的 useSearchArticles 方法移至名为 use-search-articles-logic.js 的文件中,如下所示

import { ref, onMounted } from 'vue'
export function useSearchArticles () {
 const articles = ref([])
 const searchParameters = ref([])

 onMounted(() => {
  this.articles = ArticlesAPI.loadArticles()
 })

 const searchArticles = (id) => {
  return articles.filter(() => {
   // 一些搜索代码
  })
 }

 return {
  articles,
  searchParameters,
  searchArticles
 }
}

使用这个新文件,我们的原始组件将看起来像这样

import { useSearchArticles } from './logic/use-search-articles-logic'
export default {
 setup (props,) {
  const { articles, searchParameters, searchArticles } = useSearchArticles()

  return {
   articles,
   searchParameters,
   searchArticles
  }
 }
}

最后

希望本文能帮助你更好地了解 Composition API 将如何改变我们的编码方式。

但是,与往常一样,项目的组织取决于开发人员设计出色的组件代码并创建可重用逻辑的意愿。

请记住,我们的目标是提高可读性,而在Vue中,Composition API 是实现这一点的好方法。

到此这篇关于详解Vue3 Composition API中的提取和重用逻辑的文章就介绍到这了,更多相关Vue3 Composition提取和重用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 #Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 #Javascript
JavaScript实现放大镜效果代码示例
Apr 29 #Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 #Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 #Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 #Javascript
JS实现手写 forEach算法示例
Apr 29 #Javascript
You might like
php4的session功能评述(一)
2006/10/09 PHP
php5.2时间相差8小时
2007/01/15 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
JavaScript delete操作符应用实例
2009/01/13 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
幼儿园老师辞职信
2014/01/20 职场文书
装修五一活动策划案
2014/01/23 职场文书
财务科科长岗位职责
2014/03/10 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang