Vue3 Composition API的使用简介

Vue3 Composition API的使用简介攻略

什么是Composition API

Composition API是Vue3的新增特性之一，它是一种基于函数的API，可以使得Vue的逻辑组成更加清晰、模块化，并且像React中的Hooks一样，可以在函数组件中处理更加复杂的逻辑。这是相对于Options API而言的，Options API则是基于对象的API。

如何使用Composition API

首先，我们需要在Vue3项目中安装Vue3。安装方式如下：

npm install vue@next

创建组件

我们在创建组件之前，需要先引入Vue的库

import { defineComponent } from 'vue';

接下来就可以创建一个使用Composition API的组件了：

export default defineComponent({
  setup() {
     //代码写在这里
  }
})

setup函数是Composition API主要使用的函数。在这个函数中，我们可以定义状态、计算属性、方法等。

定义状态

在setup函数中，我们通常会定义状态。可以使用ref函数定义单个状态，或reactive函数定义一个状态对象。

import {ref, reactive} from 'vue';

export default defineComponent({
  setup() {
     const count = ref(0); //定义一个状态
     const state = reactive({name: 'Tom', age: 18}); //定义一个状态对象
  }
})

使用状态

与Options API不同，我们无法通过this来引用状态，需要使用以下的方式引用：

const count = ref(0);
console.log(count.value); //0
count.value = 1;
console.log(count.value); //1

const state = reactive({name: 'Tom', age: 18});
console.log(state.name); //'Tom'
state.age = 20;

定义计算属性

在setup函数中，我们还可以定义计算属性。可以使用computed函数，也可以使用自定义函数实现计算属性。

import {ref, computed} from 'vue';

export default defineComponent({
  setup() {
     const count = ref(0); 
     const doubleCount = computed(() => count.value * 2); //computed函数
     function sum() { //自定义函数
        return count.value + doubleCount.value;
     }
  }
})

定义方法

在setup函数中，我们也可以定义方法。除了普通方法之外，还可以定义生命周期方法、watch方法等。

import {ref, onMounted, watch} from 'vue';

export default defineComponent({
  setup() {
     const count = ref(0); 
     function increment() {
        count.value += 1;
     }
     onMounted(() => {
        console.log('mounted'); //生命周期方法
     });
     watch(count, (newVal, oldVal) => {
        console.log(`updated from ${oldVal} to ${newVal}`); //watch方法
     });

     return {count, increment};
  }
})

示例1：使用Composition API实现一个计数器

计数器组件中，我们需要定义一个数字状态，并且有增加、减少、重置功能。

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="reset">reset</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value += 1;
    };

    const decrement = () => {
      count.value -= 1;
    };

    const reset = () => {
      count.value = 0;
    };

    return { count, increment, decrement, reset };
  },
});
</script>

示例2：使用Composition API实现一个可搜索的列表

列表组件中，我们需要定义一个状态表示当前列表中的数据，以及一个状态表示搜索框中的值，还要定义一个方法用于过滤列表。

<template>
  <div>
    <input type="text" v-model="filterText" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const state = reactive({
      filterText: '',
    });

    const filteredItems = computed(() => {
      return props.items.filter((item) =>
        item.text.toLowerCase().includes(state.filterText.toLowerCase())
      );
    });

    return {
      ...toRefs(state),
      filteredItems,
    };
  },
});
</script>

以上是“Vue3 Composition API的使用简介”攻略的详细讲解。