一篇文章看懂Vue组合式API

什么是Vue组合式API

Vue组合式API是Vue 3中新增的语法特性，它提供了一种新的组件编写方式，能够更加优化组件的可复用性、可维护性和可测试性。与Vue 2.x的Options API相比，Vue 3.x的组合式API更加灵活且容易理解使用。本文将介绍Vue组合式API的使用方法。

setup函数

在使用Vue组合式API时，我们需要在组件的script标签中使用setup函数来声明组件的代码逻辑。

import { ref } from 'vue';

export default {
  name: 'HelloWorld',
  setup() {
    const count = ref(0);

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

    return {
      count,
      handleClick
    }
  }
}

在setup函数中，我们可以声明响应式数据和方法，并通过return语句将它们的引用返回。这些响应式数据和方法可以在组件的template标签中直接使用。

reactive和ref

在Vue 3中，reactive和ref是最基本的两种响应式数据类型。其中，ref用于声明基本数据类型的响应式数据，而reactive用于声明复杂数据类型的响应式数据。

import { reactive, ref } from 'vue';

export default {
  name: 'HelloWorld',
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello World!'
    })

    const count = ref(0);

    const handleClick = () => {
      state.count++;
      count.value++;
    }

    return {
      state,
      count,
      handleClick
    }
  }
}

钩子函数

Vue组合式API中也提供了一些钩子函数，用于实现组件的生命周期管理。

import { reactive, ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'HelloWorld',
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello World!'
    })

    const count = ref(0);

    const handleClick = () => {
      state.count++;
      count.value++;
    }

    const handleResize = () => {
      console.log('resized!');
    }

    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });

    return {
      state,
      count,
      handleClick
    }
  }
}

当组件被挂载到页面上时，onMounted钩子函数会被调用；当组件被卸载时，onUnmounted钩子函数会被调用。

使用示例

响应式数据的使用

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <button @click="handleClick">Add Count</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  name: 'HelloWorld',
  setup() {
    const state = reactive({
      count: 0
    })

    const handleClick = () => {
      state.count++;
    }

    return {
      state,
      handleClick
    }
  }
}
</script>

在上述示例中，我们声明了一个响应式对象state，它包含了一个count属性。在template标签中，我们使用了{{ state.count }}来绑定这个数据，使其能够同步更新到页面上。

响应式数据的更新

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="handleClick">Add Count</button>
  </div>
</template>

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

export default {
  name: 'HelloWorld',
  setup() {
    const count = ref(0);

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

    return {
      count,
      handleClick
    }
  }
}
</script>

在上述示例中，我们声明了一个ref对象count，表示当前计数器的值。在template标签中，我们使用了{{ count }}来绑定这个数据，使其能够同步更新到页面上。当用户点击Add Count按钮时，我们调用handleClick方法来更新count的值，从而触发页面中绑定的数据更新。