¿Qué partes incluye la API combinada y qué funciones tienen?

reactivo y ref

reactivo y ref son API para crear datos reactivos. reactivo puede convertir un objeto en un objeto reactivo, y ref puede convertir un tipo básico de valor en datos reactivos. La característica de los datos receptivos es que cuando los datos receptivos cambian, la vista asociada a ellos también se actualizará automáticamente.

El método de uso es el siguiente:

import {
    
     reactive, ref } from 'vue'

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

const count = ref(0)

calculado y mira

Computed y watch se utilizan para monitorear los cambios en los datos de respuesta. Computed puede calcular datos reactivos, y el reloj puede monitorear el cambio de datos reactivos para realizar algunos efectos secundarios.

El método de uso es el siguiente:

import {
    
     computed, watch } from 'vue'

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

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

proporcionar e inyectar

provide e inject son API utilizadas para implementar la inyección de dependencia entre componentes. En un componente, podemos usar provide para proporcionar algunos datos y luego usar inject para inyectar los datos en los subcomponentes.

El método de uso es el siguiente:

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

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

función de gancho de ciclo de vida

La función de gancho del ciclo de vida de Vue 3.0 se reemplaza por la API de función de gancho, que se puede usar de la siguiente manera:

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

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

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

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

función de configuración

Utilice la función de configuración en las opciones del componente para administrar el estado del componente. La función de configuración recibe un parámetro de accesorios, que se utiliza para obtener los accesorios del componente. En la función de configuración, podemos usar ref y reactivo para crear datos receptivos y luego devolver los datos con algunos métodos para que puedan usarse en la plantilla.

El método de uso es el siguiente:

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

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

    return {
    
    
      count,
      increment
    }
  }
}