组合式 API 包括那几部分, 各有什么功能

reactive 和 ref

reactive 和 ref 是用来创建响应式数据的 API。reactive 可以将一个对象转化为响应式对象，而 ref 可以将一个基本类型的值转化为响应式数据。响应式数据的特点是：当响应式数据发生变化时，与之相关联的视图也会自动更新。

使用方法如下：

import {
    
     reactive, ref } from 'vue'

const state = reactive({
    
    
  count: 0,
  name: 'Vue 3.0'
})

const count = ref(0)

computed 和 watch

computed 和 watch 用来监听响应式数据的变化。computed 可以计算出一个响应式数据，而 watch 可以监听一个响应式数据的变化，从而执行一些副作用。

使用方法如下：

import {
    
     computed, watch } from 'vue'

const doubleCount = computed(() => state.count * 2)

watch(() => {
    
    
  console.log(state.count)
})

provide 和 inject

provide 和 inject 是用来实现组件之间依赖注入的 API。在一个组件中，我们可以使用 provide 来提供一些数据，然后在子组件中使用 inject 来注入这些数据。

使用方法如下：

const app = createApp({
    
    
  provide: {
    
    
    name: 'Vue 3.0'
  }
})

const child = defineComponent({
    
    
  inject: ['name'],
  setup() {
    
    
    console.log(`Hello, ${
      
      name.value}!`)
  }
})

生命周期钩子函数

Vue 3.0 的生命周期钩子函数被替换成了钩子函数 API，使用方法如下：

import {
    
     onMounted, onUpdated, onUnmounted } from 'vue'

const myComponent = {
    
    
  setup() {
    
    
    onMounted(() => {
    
    
      console.log('mounted')
    })

    onUpdated(() => {
    
    
      console.log('updated')
    })

    onUnmounted(() => {
    
    
      console.log('unmounted')
    })
  }
}

setup 函数

在组件选项中使用 setup 函数来管理组件的状态。setup 函数接收一个 props 参数，用来获取组件的 props。在 setup 函数中，我们可以使用 ref 和 reactive 来创建响应式数据，然后将这些数据和一些方法一起返回，使得它们可以在模板中使用。

使用方法如下：

const myComponent = {
    
    
  props: {
    
    
    msg: String
  },
  setup(props) {
    
    
    const count = ref(0)

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

    return {
    
    
      count,
      increment
    }
  }
}