关于vue.js:手把手教你使用-Vue3-中的-Composition-API-来封装一个商品列表组件

5次阅读

共计 22651 个字符，预计需要花费 57 分钟才能阅读完成。

<section id=”nice” data-tool=”mdnice 编辑器 ” data-website=”https://www.mdnice.com” style=”padding: 0 10px; line-height: 1.6; word-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, ‘PingFang SC’, Cambria, Cochin, Georgia, Times, ‘Times New Roman’, serif; font-size: 15px; letter-spacing: 0.05em; color: #595959;”> 本文咱们将应用 Composition API 来封装一个商品列表组件，性能分为两块逻辑：列表查问和按商品名称过滤，波及到新的 API 有 setup 中的 ref、onMounted、watch、computed，看完后你将把握 Composition API 的根本用法。
<h3 data-tool=”mdnice 编辑器 ” style=”margin-top: 30px; margin-bottom: 15px; font-size: 20px; margin: 1.2em 0 1em; padding: 0; font-weight: bold; color: #35b378;”> 为什么应用 composition API 封装组件？</h3>
<ul data-tool=”mdnice 编辑器 ” style=”margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; list-style-type: disc;”>
<li><section style=”margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; margin: 10px 0;”> 当组件越来越宏大时，组件内的代码逻辑也越来越混淆，导致前期保护艰难，应用 Composition API 能够将组件内的各个业务逻辑分来到。
</section></li><li><section style=”margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; margin: 10px 0;”> 分来到的代码逻辑点能够复用，比方获取商品列表代码逻辑片段能够在任何组件中去复用。
</section></li><li><section style=”margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; margin: 10px 0;”> 应用 Composition API 编写的代码更易读，逻辑点清晰，更不便前面接手开发者保护。
</section></li></ul>
<h3 data-tool=”mdnice 编辑器 ” style=”margin-top: 30px; margin-bottom: 15px; font-size: 20px; margin: 1.2em 0 1em; padding: 0; font-weight: bold; color: #35b378;”>setup 办法是什么？</h3>
 简而言之，setup 就是用来整合各个代码逻辑片段的容器，在这里申明所有的响应式属性、计算属性、watchers 和生命周期钩子，而后裸露进来，在其它组件中应用。
<blockquote class=”multiquote-1″ data-tool=”mdnice 编辑器 ” style=”border: none; display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 10px 5px; border-left: 3px solid #35b378; border-right: 0px solid #35b378; color: #616161; quotes: none; background: #FBF9FD;”>
WARNING：
因为在执行 setup 时尚未创立组件实例，因而在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中申明的任何属性——本地状态、计算属性或办法。
</blockquote>
<h3 data-tool=”mdnice 编辑器 ” style=”margin-top: 30px; margin-bottom: 15px; font-size: 20px; margin: 1.2em 0 1em; padding: 0; font-weight: bold; color: #35b378;”> 开始吧 </h3>
 咱们先将列表查问和按名字过滤两端代码逻辑都写在 setup 中，最初再做拆分重组至新组件应用。
<h3 data-tool=”mdnice 编辑器 ” style=”margin-top: 30px; margin-bottom: 15px; font-size: 20px; margin: 1.2em 0 1em; padding: 0; font-weight: bold; color: #35b378;”> 商品列表逻辑 </h3>
<h5 data-tool=”mdnice 编辑器 ” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”>1、ref</h5>
 首先咱们用 ref 创立一个商品列表 
<pre class=”custom” data-tool=”mdnice 编辑器 ” style=”margin-top: 10px; margin-bottom: 10px;”>import {ref} from 'vue' setup () { const goodsList = ref([]) } </pre>
<blockquote class=”multiquote-1″ data-tool=”mdnice 编辑器 ” style=”border: none; display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 10px 5px; border-left: 3px solid #35b378; border-right: 0px solid #35b378; color: #616161; quotes: none; background: #FBF9FD;”>
ref 对咱们的值创立了一个响应式援用，相似于 
</blockquote>
<pre class=”custom” data-tool=”mdnice 编辑器 ” style=”margin-top: 10px; margin-bottom: 10px;”>data() { return { goodsList: { value: [] } } } </pre>
<h5 data-tool=”mdnice 编辑器 ” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”>2、props</h5>
 咱们须要调用获取商品列表接口须要晓得是哪个用户调用的，所以须要一个参数 user，从内部传入，props 接管。
<pre class=”custom” data-tool=”mdnice 编辑器 ” style=”margin-top: 10px; margin-bottom: 10px;”>import {ref} from 'vue' import {fetchGoodsList} from '@/api/fetchGoodsList' setup (props) { const goodsList = ref([]) const getGoodsList = async () => { goodsList.value = await fetchGoodsList(props.user) } // 将商品列表和数据获取办法裸露进来 return { goodsList, fetchGoodsList } } </pre>
<h5 data-tool=”mdnice 编辑器 ” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”>3、onMounted</h5>
onMounted 相似于咱们以往应用的生命周期钩子函数 mounted，简略来说就是 setup 中的钩子函数，咱们用此函数来调用 getGoodsList 办法获取商品列表。
<pre class=”custom” data-tool=”mdnice 编辑器 ” style=”margin-top: 10px; margin-bottom: 10px;”>import {ref, onMounted} from 'vue' import {fetchGoodsList} from '@/api/fetchGoodsList' setup (props) { const goodsList = ref([]) const getGoodsList = async () => { goodsList.value = await fetchGoodsList(props.user) } onMounted(getGoodsList) return { goodsList, getGoodsList } } </pre>
<h5 data-tool=”mdnice 编辑器 ” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”>4、watch</h5>
 在应用 watch 之前咱们先要理解 toRefs，该函数就是为了确保咱们的侦听器可能对 user prop 所做的更改做出反馈。
watch 也就是 setup 中的监听器，和以往应用的 wacth 一样 
<blockquote class=”multiquote-1″ data-tool=”mdnice 编辑器 ” style=”border: none; display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 10px 5px; border-left: 3px solid #35b378; border-right: 0px solid #35b378; color: #616161; quotes: none; background: #FBF9FD;”>
watch(user, (newValue, oldValue) => {})
</blockquote>
<pre class=”custom” data-tool=”mdnice 编辑器 ” style=”margin-top: 10px; margin-bottom: 10px;”>import {ref, onMounted, toRefs, watch} from 'vue' import {fetchGoodsList} from '@/api/fetchGoodsList' setup (props) { // 应用 toRefs 创立对 prop 的 user property 的响应式援用 const {user} = toRefs(props) const goodsList = ref([]) const getGoodsList = async () => { goodsList.value = await fetchGoodsList(user.value) // 留神这里的 props.user 改为了 user.value } onMounted(getGoodsList) // 监听 user 变动 watch(user, getGoodsList) return { goodsList, getGoodsList } } </pre>
 至此，获取商品列表的逻辑点写完了。
<h3 data-tool=”mdnice 编辑器 ” style=”margin-top: 30px; margin-bottom: 15px; font-size: 20px; margin: 1.2em 0 1em; padding: 0; font-weight: bold; color: #35b378;”> 商品过滤逻辑 </h3>
 接下来就是商品列表按商品名称进行过滤了，定义名称搜寻变量 goodsName，写入搜寻办法 searchByGoodsName，这里咱们应用到 computed 办法，和以前应用的 computed 用法也基本一致。
<pre class=”custom” data-tool=”mdnice 编辑器 ” style=”margin-top: 10px; margin-bottom: 10px;”>import {ref, onMounted, toRefs, watch} from 'vue' import {fetchGoodsList} from '@/api/fetchGoodsList' setup (props) { const {user} = toRefs(props) const goodsList = ref([]) const getGoodsList = async () => { goodsList.value = await fetchGoodsList(user.value) } onMounted(getGoodsList) watch(user, getGoodsList) // 商品过滤逻辑 const goodsName = ref('') const searchByGoodsName = computed(() => { return goodsList.value.filter( goods => goods.name.includes(goodName.value) ) }) return { goodsList, getGoodsList, goodsName, searchByGoodsName } } </pre>
<h3 data-tool=”mdnice 编辑器 ” style=”margin-top: 30px; margin-bottom: 15px; font-size: 20px; margin: 1.2em 0 1em; padding: 0; font-weight: bold; color: #35b378;”> 拆分并重组 </h3>
 当初咱们要把这两个逻辑的代码别离拆分到两个文件中去保护，而后再援用重组到一个新的组件中去应用。
<h5 data-tool=”mdnice 编辑器 ” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”> 拆分商品列表逻辑 </h5>
<pre class=”custom” data-tool=”mdnice 编辑器 ” style=”margin-top: 10px; margin-bottom: 10px;”>// src/composables/useGoodsList.js import {ref, onMounted, toRefs, watch} from 'vue' import {fetchGoodsList} from '@/api/fetchGoodsList' export default function useGoodsList(user) { const goodsList = ref([]) const getGoodsList = async () => { goodsList.value = await fetchGoodsList(user.value) } onMounted(getGoodsList) watch(user, getGoodsList) return { goodsList, getGoodsList } } </pre>
<h5 data-tool=”mdnice 编辑器 ” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”> 拆分商品过滤逻辑 </h5>
<pre class=”custom” data-tool=”mdnice 编辑器 ” style=”margin-top: 10px; margin-bottom: 10px;”>// src/composables/useSearchByGoodsName.js import {ref, onMounted, watch, toRefs} from 'vue' export default function useSearchByGoodsName(goodsList) { const goodsName = ref('') const searchByGoodsName = computed(() => { return goodsList.value.filter( goods => goods.name.includes(goodName.value) ) }) return { goodsName, searchByGoodsName } } </pre>
<h5 data-tool=”mdnice 编辑器 ” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”> 重组至新组件应用 </h5>
<pre class=”custom” data-tool=”mdnice 编辑器 ” style=”margin-top: 10px; margin-bottom: 10px;”>// src/components/goodsListAndSearch.vue import useGoodsList from '@/composables/useGoodsList' import useSearchByGoodsName from '@/composables/useSearchByGoodsName' import {toRefs} from 'vue' export default { props: { user: {type: String} }, setup(props) { const {user} = toRefs(props) const {goodsList, getGoodsList} = useGoodsList(user) const {goodsName, searchByGoodsName} = useSearchByGoodsName(goodsList) return { goodsList getGoodsList, goodsName, searchByGoodsName } } } </pre>
 至此组件一个商品列表 + 过滤的组件就封装实现了，咱们能够在新组件 goodsListAndSearch 中任意去调用 setup 裸露进去的办法了。
 总而言之，Composition API 的外围就是将组件的逻辑性能点拆分复用。
<blockquote class=”multiquote-1″ data-tool=”mdnice 编辑器 ” style=”border: none; display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 10px 5px; border-left: 3px solid #35b378; border-right: 0px solid #35b378; color: #616161; quotes: none; background: #FBF9FD;”>
 参考：vue3js.cn/docs/zh/guide/composition-api-introduction.html
</blockquote>