专栏首页前端全栈开发者Vue3 Composition API中的提取和重用逻辑

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 引用的变化,这一变化意味着我们不能再以相同的方式使用 propattributesevents

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

export default {
  setup (props, context) {

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

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

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 是实现这一点的好方法。

原文:https://learnvue.co/2020/03/extract-and-reuse-logic-in-the-vue-composition-api/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5:给汉字加拼音?收起展开组件?让我秀给你看

    来看看 HTML 的历史和规范常识。HTML 规范是 W3C 与 WHATWG 合作共同产出的,HTML5 因此也不例外。其中:

    张张
  • 前端要知道的RESTful API架构风格

    前端程序员在开发完页面后总是要对接口的,跟后端联调有时候还占用蛮大的时间的,那么你了解你和后端对的接口都是什么风格吗,你们公司接口设计的如何,你使用愉快吗?自己...

    张张
  • 译|你不知道的CSS国际化

    我遇到过一些人,他们根本不认为CSS与国际化有关,但如果你仔细想想,国际化不仅仅是把你网站上的内容翻译成多种语言,然后就收工了。该内容的呈现方式有各种细微的差别...

    张张
  • 分布式资本在BiYong论坛上的投资分析

    Fenbushi去年加今年一共投资了50个左右的项目,包括Keep、securitize、mykey、torus、alphawallet、messari、lon...

    区块链技术布道
  • Java枚举类型的原理

    package com.lxq.enumm;   public enum Color   {       RED{   public String ...

    汤高
  • Elasticsearch(2)PHP驱动

    安装完成composer之后。我们需要安装php的类库来对Elasticsearch进行连接。

    魔王卷子
  • python-Environment s

    #########################linux下vim基本设置############# 在 Linux 下对 vim 进行一些配置,使之支持如...

    py3study
  • 趣谈区块链系列一:区块链的出现是必然还是偶然?

    当高潮褪去,海滩上都会剩下大量死鱼,这便是不理智的弄潮儿的必然结局。当年的互联网泡沫如此,现今的区块链热亦如。对未来的把握须建立在廓清事实的基础上,对区块链这一...

    用户1310347
  • 面向视频编解码后处理的深度学习方法进展

    接前一帖(适用于视频编码帧间预测分数像素插值的卷积神经网络方法简介),今天继续介绍一类基于人工智能的视频处理技术——深度学习在视频后处理中的应用。 1 背景介绍...

    用户1324186
  • 什么?你竟然还没有用这几个chrome插件?

    其实18年之前写过一篇关于chrome插件的文章,里面安利了4个chrome插件。鉴于这已经是9102年了,之前觉得好用的chrome插件跟新了解到的比起来,还...

    SH的全栈笔记

扫码关注云+社区

领取腾讯云代金券