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

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等中为单个特性(例如搜索)添加代码。

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

这只是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提取和重用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 浅谈Vue3 Composition API如何替换Vue Mixins

    想在你的Vue组件之间共享代码?如果你熟悉Vue 2 则可能知道使用mixin,但是新的Composition API 提供了更好的解决方案. 在本文中,我们将研究mixins的缺点,并了解Composition API如何克服它们,并使Vue应用程序具有更大的可伸缩性. 回顾Mixins功能 让我们快速回顾一下mixins模式,因为对于下一部分我们将要讲到的内容,请务必将其放在首位. 通常,Vue组件是由一个JavaScript对象定义的,它具有表示我们所需功能的各种属性--诸如 data,m

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

    Vue3 Composition API可以在大型项目中更好地组织代码.然儿,随着使用几种不同的选项属性切换到单一的setup 方法,许多开发人员面临的问题是-- 这会不会更混乱,因为一切都在一个方法中 乍一看可能很容易,但是实际上只需要花一点点时间来编写可重用的模块化代码. 让我们来看看如何做到这一点. 问题 Vue.js 2.x 的 Options API 是一种非常直观的分隔代码的方法 export default { data () { return { articles: [], se

  • 动画详解Vue3的Composition Api

    目录 回顾Option Api Option Api的缺陷 Composition Api 众所周知,Vue3.0带来了一个全新的特性——Composition API. 字面意思就是“组合API”,它是为了实现基于函数的逻辑复用机制而产生的. 回顾Option Api 在了解Composition Api之前,首先回顾下我们使用Option Api遇到的问题,我们在Vue2中常常会需要在特定的区域(data,methods,watch,computed...)编写负责相同功能的代码. Opti

  • 一文详解Vue3中使用ref获取元素节点

    目录 静态绑定 onMounted nextTick watchEffect watch v-for中使用 动态绑定 ref设置函数 通过getCurrentInstance方法 获取vue实例 前言: 本文介绍在vue3的setup中使用composition API获取元素节点的几种方法: 静态绑定 仅仅需要申明一个ref的引用,用来保存元素,在template中,不必bind引用(:ref="domRef"),只需要声明一个同名的ref属性(ref="domRef&qu

  • 详解vue3中渲染函数的非兼容变更

    目录 渲染函数API变更 Render函数参数 渲染函数签名更改 VNode Props 格式化 slot统一 移除$listeners $attrs现在包括class和style 渲染函数API变更 此更改不会影响到<template>用户 h现在全局导入,而非作为参数传递给渲染函数 渲染函数参数更改为在有状态组件和函数组件之间更加一致 vnode现在又一个扁平的prop结构 Render函数参数 // 2.0 渲染函数 export default { render(h) { return

  • 详解vue3中如何使用youtube-player

    目录 正文 开始使用 做成组件youtubePlayer 使用方式 注意事项 常用参数 常用API 正文 youtube-player 是 YouTube IFrame Player API (YIPA) 的封装.可以在自己网站上播放YouTube视频. 开始使用 使用 npm 下载 npm i youtube-player 做成组件youtubePlayer <script setup> import { ref, watch, onMounted, onBeforeUnmount } fr

  • 详解vue3中如何使用shaka-player

    目录 正文 开始使用 做成组件shakaPlayer 使用方式 注意事项 正文 Shaka Player 是谷歌公司对外开源的一款 JavaScript 类库,详细请看谷歌官方API文档. 开始使用 我们可以使用 npm 下载 npm i shaka-player 做成组件shakaPlayer <script setup> import { ref, watch, onMounted, onBeforeUnmount } from "vue"; import shaka

  • 详解Vue3中对VDOM的改进

    前言 vue-next 对virtual dom的patch更新做了一系列的优化,从编译时加入了 block 以减少 vdom 之间的对比次数,另外还有 hoisted 的操作减少了内存的开销.本文写给自己看,做个知识点记录,如有错误,还请不吝赐教. VDOM VDOM的概念简单来说就是用js对象来模拟真实DOM树.由于MV**的架构,真实DOM树应该随着数据(Vue2.x中的data)的改变而发生改变,这些改变可能是以下几个方面: v-if v-for 动态的props(如:class,@cl

  • Vue3新特性之在Composition API中使用CSS Modules

    在 Vue 3 Composition API 最近的一次 beta 升级中,无论是 Vue 3 本 3 库 vue-next,还是面向 Vue 2 过渡用的 @vue/composition-api 库中,都同步更新了一个 useCSSModule 函数 -- 用来在使用了 Composition API 的 Vue 实例中,支持 CSS Modules 语法. 首先来看看什么是 CSS Modules: CSS Modules CSS Modules 是一种 CSS 的模块化和组合系统.vu

  • 详解vue3中组件的非兼容变更

    函数式组件 functional attribute 在单文件组件 (SFC) <template> 已被移除 { functional: true } 选项在通过函数创建组件已被移除 // 使用 <dynamic-heading> 组件,负责提供适当的标题 (即:h1,h2,h3,等等),在 2.x 中,这可能是作为单个文件组件编写的: // Vue 2 函数式组件示例 export default { functional: true, props: ['level'], re

  • 详解Vue3中Teleport的使用

    在本文中,我们将介绍: Teleport 的目的 Teleport 的例子 一些很有意思的代码交互 Teleport 的目的 首先是什么时候以及使用这个 Teleport 功能. 在开发较大的 Vue 项目时应该以可重用的逻辑去组织代码.但是当处理某些类型的组件(如模式.通知或工具提示)时,模板 HTML 的逻辑可能不会和我们希望渲染元素处于相同的文件中. 实际上在大多数情况下,与 Vue 的 DOM 完全分开处理相比,处理这些元素要容易得多.因为嵌套组件的位置.z-index 和样式等这些东西

随机推荐