有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
1. Vue 3和Composition API的状况
Vue 3已经发布了一年,它的主要新功能是:Composition API。从2021年秋季开始,推荐新项目使用Vue 3的 script setup
语法,所以希望我们能看到越来越多的生产级应用程序建立在Vue 3上。
这篇文章旨在展示一些有趣的方法来利用Composition API,以及如何围绕它来构造一个应用程序。
2. 可组合函数和代码重用
新的组合API释放了许多有趣的方法来重用跨组件的代码。复习一下:以前我们根据组件选项API分割组件逻辑:data、methods、created 等。
// 选项API风格
data: () => ({
refA: 1,
refB: 2,
}),
// 在这里,我们经常看到500行的代码。
computed: {
computedA() {
return this.refA + 10;
},
computedB() {
return this.refA + 10;
},
},
有了Composition API,我们就不会受限于这种结构,可以根据功能而不是选项来分离代码。
setup() {
const refA = ref(1);
const computedA = computed(() => refA.value + 10);
/*
这里也可能是500行的代码。
但是,这些功能可以保持在彼此附近!
*/
const computedB = computed(() => refA.value + 10);
const refB = ref(2);
return {
refA,
refB,
computedA,
computedB,
};
},
Vue 3.2引入了语法,这只是
setup()
函数的语法糖,使代码更加简洁。从现在开始,我们将使用 script setup 语法,因为它是最新的语法。
在我看来,这是一个比较大想法。我们可以把这些功能分成自己的文件,而不是用通过放置 在script setup中的位置来保持它们的分离。下面是同样的逻辑,把文件分割开来的做法。
// Component.vue
// featureA.js
import { ref, computed } from "vue";
export default function () {
const refA = ref(1);
const computedA = computed(() => refA.value + 10);
return {
refA,
computedA,
};
}
// featureB.js
import { ref, computed } from "vue";
export default function () {
const refB = ref(2);
const computedB = computed(() => refB.value + 10);
return {
refB,
computedB,
};
}
注意,featureA.js
和featureB.js
导出了Ref
和ComputedRef
类型,因此所有这些数据都是响应式的。
然而,这个特定的片段可能看起来有点矫枉过正。
- 想象一下,这个组件有500多行代码,而不是10行。通过将逻辑分离
到use__.js
文件中,代码变得更加可读。 - 我们可以在多个组件中自由地重复使用
.js
文件中的可组合函数 不再有无渲染组件与作用域槽的限制,也不再有混合函数的命名空间冲突。因为可组合函数直接使用了Vue的ref
和computed
,所以这段代码可以与你项目中的任何.vue
组件一起使用。