js提取指定网站内容(Vue3CompositionAPI可以在大型项目中更好地组织代码)

　　js提取指定网站内容(Vue3CompositionAPI可以在大型项目中更好地组织代码)

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

　　这会不会更混乱，因为一切都在一种方法中

　　乍一看似乎很容易，但实际上编写可重用的模块化代码只需要一点时间。

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

　　问题

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

　　

export default {

data () {

return {

articles: [],

searchParameters: []

}

},

mounted () {

this.articles = ArticlesAPI.loadArticles()

},

methods: {

searchArticles (id) {

return this.articles.filter(() => {

// 一些搜索代码

})

}

}

}

　　问题在于，如果一个组件中有数百行代码，那么您必须在数据、方法、计算等的多个部分中为单个功能（例如搜索）添加代码。

　　这意味着只有一个函数的代码可能分散在数百行中并分布在多个不同的位置，从而导致难以阅读或调试。图片说明

　　这只是 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 的另一个新变化是这个引用的变化，这意味着我们不能再以同样的方式使用 props、attributes 或 events。

　　简而言之，我们将不得不使用 setup 方法的两个参数来访问 props、attributes、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提取和复用内容，请搜索之前的文章或继续浏览以下相关的文章 希望大家以后多多支持！