Composition API带你探索Vue3中的魅力商品列表组件封装之旅

2023-10-09 21:07:14

站在Vue3的前沿，Composition API将带领我们踏上商品列表组件封装之旅。这次探险中，我们将重点探索API中的ref、onMounted、watch、computed这些新鲜的面孔，在它们的陪伴下，Composition API将展现出它真正的魅力。让我们一同启航，体验Vue3组件封装的非凡旅程！

Composition API：Vue3中全新的组件开发范式

Composition API是Vue3中引入的一项重大革新，它彻底改变了Vue组件的开发方式。与Options API相比，Composition API提供了更灵活、更具可扩展性和更易于测试的组件开发体验。

实战：封装商品列表组件

现在，让我们通过一个实际的例子来探索Composition API的强大之处。我们将创建一个功能完善的商品列表组件，该组件将包含两个基本功能：商品列表的查询和按商品名称的过滤。

第一步：安装Vue3和Composition API

npm install vue@3 composition-api

第二步：创建一个新的Vue文件

<template>
  <div class="product-list">
    <input type="text" v-model="filterText">
    <ul>
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted, watch, computed } from 'composition-api';

export default {
  setup() {
    // 商品列表
    const products = ref([]);

    // 过滤文本
    const filterText = ref('');

    // 获取商品列表
    onMounted(() => {
      fetch('api/products')
        .then(res => res.json())
        .then(data => {
          products.value = data;
        });
    });

    // 过滤商品列表
    const filteredProducts = computed(() => {
      return products.value.filter(product => {
        return product.name.toLowerCase().includes(filterText.value.toLowerCase());
      });
    });

    // 返回一个对象，包含需要暴露给组件的属性和方法
    return {
      products,
      filterText,
      filteredProducts
    };
  }
};
</script>

第三步：注册组件

// main.js
import Vue from 'vue';
import ProductList from './ProductList.vue';

Vue.component('ProductList', ProductList);

new Vue({
  el: '#app'
});