Vue3 Composition API能够在大型项目中更好地安排代码。然儿，随着运用几种不同的选项特点切换到单一的setup 办法，许多开发人员面对的问题是……
这会不会更混乱，因为一切都在一个办法中
乍一看可能很容易，可是实际上只需要花一点点时间来编写可重用的模块化代码。
让咱们来看看如何做到这一点。
问题
Vue.js 2.x 的 Options API 是一种非常直观的分隔代码的办法
export default {
data () {6 h G W P n e | K
return {
articles: [],
searchParameters: []
}
},
mos x s Zunted () {
thi { H #is.articles = ArticlesAPI~ P R L ; T 8 _ 7.loadArticles()
},
methods: {
searchArticles (id) {
return thi{ ? q t _ ) } ]s.articles.filter(() =&g% m _t; {
//j q v ] f / k $ & 一些查找o R O代码
})
}
}
}
问题是，假如一个组件中有数百行代码，那么就有必要在多个部分data、methods、co T r _ P dmputed等中为单h z g ) 6 & ; = A个特性(例如查找)添加代码。
这意味着仅一项功用的代码可能会分散散布在M V @数百行中，并散布在几个不同的位置，从而使其难以阅读或调试。
这只是Vue Composition API RFC中的一个示例，展示了现在如何按功用安排代码。
现在，Z ; R e v U ) R W这是运用新的Composition API的等效代码。
import { ref, onMounted } from 'v^ f 5 ^ X % ^ Rue'
export default {
setup () {
const articles = ref([])
const searchParameters = ref(X + N H t ; 8[])
onMounted(() => {
this.arE 7 p N h H T lticles = ArticlesAPI.loadArticles()
})
const searchArticles = (id) => {
return articles.filter(() => {
// 一些查| 8 3 b找代码
})
}
return {
articles,
searchParameters,
searchArticles
}
}
}
现在，为了处理前j [ , h u面关于安排的问题，咱们来看看一个提取逻辑的好办法。
提取逻辑
咱们的最终目标是将每个功用提取到自己的办法中。这样一来，假如咱们想调试它，一切的代码都在一个地方。
这非常简单，可是最W B U !终咱们有必要记住，假如咱们期望能够在模板中拜访数据，则仍然有必要运用咱们的 setup 办法来回来数据。
咱们来创建新办法 useSearchArticles] k d 并让它回来咱们r ` x a j g I / `在 setup 办法中回来的一切东西。
const useSearchArticlS 7 - ) % = c ) tes = () => {
const a` # 4 u / } g O ^rticles = ref([])
const searco T 4 D 3hParameters = ref([])
onMounted(() => {a * / B l N w j q
this.articles = ArticlesAPI.loadArticles()
})
const searchArticles = (id) => {
return articles.filter(() => {
// 一些查找代码
})
}
return {
articles,
searchParameters,
searchArticles
}
}D ^ [ 3 w C ^
现在，在咱们的 setup 办法中，咱们能够经过调用咱们的办法来拜访特点。并且，= a {当然，咱们还有必要记住从设 setup 法中回来它们。
export default {
setu? h Q f w . r 3p () {
const { articn 9 Q s oles, searchParameters, searchArticles } = useSearchArticles()
return {
articles,
searchParameters,
searchArtA O bicles
}
}
}
在提取的逻W P ^ 6 [ * 3 ? n辑中拜: @ _ d访组件特点
Composition APIY y C ` g 中的另一b d N L个新变化是 this 引用的变s z C 6化，这一变化意味着咱们不能再以相同的办法运用 prop、attributes 或 events。
简而言之，咱们将有必要运用 setup 办法的两个参数来拜访 props，attribute，slot 或 emit 办法。假如咱们只运用 setup 办法，M g w一个快速的虚拟组件可能是这样的。
export default {
setup (pc g 9 R - Erops, context) {
onMounted(() => {
consolH _ I [ e ;e.log(props)
context.emit('event', 'payload')
})
}
}
可是现在咱们要提取咱们的逻辑，咱们要把咱们的逻辑包装器办法也承受参数。经过这种办法，咱们能够从 setup 办法传递咱们的 props 和 context 特点，逻辑代码能够拜访它们。
const checkProps = (props, context) =># ` 5 K 6 1 b p ]; {
onMounted(() => {
console.log(props)
context.emD = M jit('event', 'payload')
})
}
export default {
setG @ ~ U k N }up (props, context) {
checkProps(props, context)
}
}
重用逻辑
最终，假如咱们要编写一些逻辑，期y 4 ? 1 v望能够在多个组件中运用，则能够将逻辑提取到其自己的文件中，并将其导入到咱们的组件中。
然后，咱们能够像之前一样调用该办法。假设咱们m + 8 d /将咱们的 useSearR Z chArticles] ` 6 w V m Z 办法移至) j @ % ( i C名为 use-search-articles-logic.js 的文件中，如下所示
import { ref, onMounted } from 'vue'
export function usr c j q & 7 S 6eSearchArtf s @ n icles () {
const articles = ref([])
const searchParameters = ref([])
onMounted(() => {
this.articles = ArticlesAPI.loadArticles()
})
const searchArticles = (id) =>? , Z {
return arv & | { J .ticles.filtA g ; 1 |er(() => {
// 一些查找代码
})
}
return {
articles,
search: X w J 8Parameters,
searchArticles
}
}
运用这个新文0 c x :件，咱们的原始组件将看起来像这样
im) # 5 Aport { useSearchArticles } from './logic/use-search-articles-logic'
export default {
setu/ { y lp (props,) {
const { articles, searchParameters, searchArticles } = useSearchArticles()
return {
articles,
searchParameters,
searchArticles
}
}
}
最终
期望本文能帮助你更好地了解 Composition API 将如何改变咱们的编码A c ^ j Q 8办法。
可是，与平常一A { ]样，项目的安排取决于开发k c Y u人员规划超卓的组件代码并创建可重用逻辑的志愿。
请记住，咱们的目标是提高可读性E z g S (，而在Vue中，Composition API 是完成这一点的好办法。
原文：learnvue.co/2020/03/ext…
作者：Matt Marih s fbojoc
公众号会优先发布两到三天，赶忙重视吧！还有大礼包哦！
