详解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 相关文章推荐
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
浅谈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
sphinx增量索引的一个问题
2011/06/14 PHP
php继承的一个应用
2011/09/06 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
webpack3之loader全解析
2017/10/26 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
vue实现登录功能
2020/12/31 Vue.js
Python的Flask框架中web表单的教程
2015/04/20 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
python selenium xpath定位操作
2020/09/01 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
个人简历中的自我评价范例
2013/10/29 职场文书
会计专业自荐信
2013/12/02 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
2015年女工委工作总结
2015/07/27 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
成人成长感言如何写?
2019/08/16 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python
Python中time标准库的使用教程
2022/04/13 Python
Java使用HttpClient实现文件下载
2022/08/14 Java/Android