Já apresentei os pontos de conhecimento relevantes de vue3: ref, reactive, computed, watch, watchEffect, toRef, toRefs e essas APIs reativas. Acredito que todos tenham um certo entendimento de vue3.
Ciclo da vida
Além dessas funções, vue3 também adiciona alguns ciclos de vida e você pode importar funções diretamente da família onXXX para registrar ganchos de ciclo de vida: uma API combinada que corresponde ao ciclo de vida da versão 2.x.
1 、 beforeCreate -> 使用 setup ()
2 、 criado -> 使用 configuração ()
3 、 beforeMount -> onBeforeMount
4 、 montado -> montado
5 、 beforeUpdate -> onBeforeUpdate
6 、 atualizado -> onUpdated
7 、 beforeDestroy -> onBeforeUnmount
8 、 destruído -> onUnmounted
9 、 errorCaptured -> onErrorCaptured
import {
onMounted, onUpdated, onUnmounted } from 'vue'
const MyComponent = {
setup() {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
},
}
Essas funções de registro de gancho de ciclo de vida só podem ser usadas de forma síncrona durante setup (), porque dependem do estado global interno para localizar a instância do componente atual (a instância do componente que está chamando setup ()). Chamar essas funções sem o componente atual irá lançar um erro.
O uso do ciclo de vida não é muito diferente do vue2, mas lembre-se de importar a API ao usá-lo.
Injeção de dependência
A API composta Vue fornece funções de fornecimento e injeção para injeção de dependência, que são semelhantes ao fornecimento / injeção da API de opções vue2. As funções fornecer e injetar só podem ser chamadas no setup () da instância do componente atualmente ativa.
Fornece fornecer em componentes upstream:
setup () {
provide('Theme', 'dark')
}
Use em componentes downstream:
<template>
<div> hello </div>
</template>
<script>
import {
ref, inject } from 'vue'
export default {
setup () {
const theme = inject('Theme', 'light' /* 默认值 */)
console.log(theme, '依赖注入')
}
}
</script>
Função útil
O Vue3 também tem algumas outras APIs. As funções da ferramenta são as seguintes:
1. Readonly transforma o objeto em somente leitura.
2. isRef verifica se um valor é um objeto ref.
3. isProxy verifica se um objeto é um proxy criado pelo método reativo ou somente leitura.
4. isReactive verifica se um objeto é um proxy reativo criado por reativo.
5. isReadonly verifica se um objeto é um proxy somente leitura criado por somente leitura.
6. Se o parâmetro for um ref, unref retorna seu valor, caso contrário, retorna o próprio parâmetro
Quando extraímos e reutilizamos a lógica entre os componentes, a API combinada é muito flexível. Uma função composta depende apenas de seus parâmetros e da API exportada globalmente do Vue, não de seu contexto sutil. Você pode exportar qualquer parte da lógica no componente como uma função para reutilizá-lo. Você pode até exportar toda a função de configuração para obter o efeito equivalente de extensões.