Diretório de artigos da série
| contente | Link |
|---|---|
| De Vue2 para Vue3 [zero] | Introdução ao Vue3 |
| De Vue2 para Vue3 [1] | API de composição (Capítulo 1) |
| De Vue2 para Vue3 [2] | API de composição (capítulo 2) |
| De Vue2 para Vue3 [3] | API de composição (capítulo 3) |
| De Vue2 para Vue3 [4] | API de composição (capítulo 4) |
Diretório de artigos
prefácio
Como a versão mais recente da estrutura Vue.js, o Vue3 apresenta muitos novos recursos e melhorias interessantes. Entre eles, a API combinada é um dos recursos mais marcantes do Vue3 . Neste artigo, vamos mergulhar na API de composição do Vue3 e explorar seus benefícios e uso durante o desenvolvimento . Quer você seja um iniciante ou um desenvolvedor Vue experiente, aprendendo a usar a API de composição, podemos criar aplicativos complexos com mais eficiência e melhorar a capacidade de manutenção e reutilização do código .
1. Ciclo de vida
Quando se trata de ciclo de vida, todos devem estar familiarizados com ele, mas como o Vue 3 apresenta uma nova API combinada, no Vue 3, algumas mudanças ocorreram na função de gancho do ciclo de vida .
Diagrama do ciclo de vida de vue2
-
beforeCreate : Chamado antes da criação da instância, quando os dados e métodos do componente não foram inicializados.
-
created : Chamado imediatamente após a criação da instância, dados e métodos podem ser acessados, mas ainda não foram montados no DOM.
-
beforeMount : chamado antes de o componente ser montado no DOM, o modelo foi compilado, mas ainda não foi renderizado na página.
-
montado : Chamado depois que o componente é montado no DOM. Neste momento, o componente foi renderizado na página e operações como as operações DOM podem ser executadas.
-
beforeUpdate : Chamado antes que os dados sejam atualizados, antes que o DOM virtual seja renderizado novamente e corrigido.
-
atualizado : Chamado depois que os dados foram atualizados, depois que o DOM virtual foi renderizado novamente e corrigido.
-
beforeDestroy : Chamado antes que a instância seja destruída, algum trabalho de limpeza pode ser feito aqui, como limpar temporizadores, desvincular eventos, etc.
-
destroy : Chamado depois que a instância é destruída, o componente foi removido da página e todos os ouvintes de eventos e vinculações de dados são automaticamente limpos.
-
ativado (disponível apenas em componentes keep-alive): Chamado quando o componente é ativado, aplicável apenas a componentes keep-alive.
-
deactivated (disponível apenas em componentes keep-alive): Chamado quando o componente está desativado, aplicável apenas a componentes keep-alive.
O diagrama do ciclo de vida do vue3
Não é difícil ver pela comparação das duas imagens que não há grande mudança na função do gancho do ciclo de vida na forma de itens de configuração. O único ponto a se prestar atenção é -
beforeDestroyrenomear parabeforeUnmount -
destroyedrenomear paraunmounted
在vue3中通过配置项形式使用生命周期钩子函数
<script>
export default {
name: 'Demo',
setup(){
},
//通过配置项的形式使用生命周期钩子
beforeCreate() {
console.log('---beforeCreate---')
},
created() {
console.log('---created---')
},
beforeMount() {
console.log('---beforeMount---')
},
mounted() {
console.log('---mounted---')
},
beforeUpdate(){
console.log('---beforeUpdate---')
},
updated() {
console.log('---updated---')
},
beforeUnmount() {
console.log('---beforeUnmount---')
},
unmounted() {
console.log('---unmounted---')
}
}
</script>
在vue3中通过组合式API形式使用生命周期钩子函数
<script>
// 导入使用的钩子函数
import {
ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
name: 'Demo',
setup(){
let sum = ref(0)
console.log('---setup---')
//通过组合式API的形式去使用生命周期钩子
onBeforeMount(()=>{
console.log('---onBeforeMount---')
})
onMounted(()=>{
console.log('---onMounted---')
})
onBeforeUpdate(()=>{
console.log('---onBeforeUpdate---')
})
onUpdated(()=>{
console.log('---onUpdated---')
})
onBeforeUnmount(()=>{
console.log('---onBeforeUnmount---')
})
onUnmounted(()=>{
console.log('---onUnmounted---')
})
return {
sum}
}
}
</script>
-
Os ganchos de ciclo de vida na forma de API de composição correspondem aos ganchos em Vue2.x da seguinte forma:
beforeCreate===>setup()created=======>setup()beforeMount===>onBeforeMountmounted=======>onMountedbeforeUpdate===>onBeforeUpdateupdated=======>onUpdatedbeforeUnmount==>onBeforeUnmountunmounted=====>onUnmounted
beforeCreate e created, vue3 não fornece a função hook correspondente, que é substituída por setup
Dois, gancho
vue3中使用了hooks的概念，使得组件逻辑更加模块化、可复用———— Encapsule a API de composição usada na função setup
No diretório src, crie uma nova pasta hooks, extraia o código da lógica reutilizável no setup e encapsule no arquivo js/ts Nos componentes que precisam usar essa lógica, importe essa função e use-
a
<script>
import {
ref} from 'vue'
import usePoint from '../hooks/usePoint'
export default {
name: 'Demo',
setup(){
//数据
let sum = ref(0)
// 封装起来的hooks函数
let point = usePoint()
//返回一个对象（常用）
return {
sum,point}
}
}
</script>
código usePoint.js
import {
reactive,onMounted,onBeforeUnmount} from 'vue'
//需要导出该函数 默认导出、按需导出都可以
export default function (){
//实现鼠标“打点”相关的数据
let point = reactive({
x:0,
y:0
})
//实现鼠标“打点”相关的方法
function savePoint(event){
point.x = event.pageX
point.y = event.pageY
console.log(event.pageX,event.pageY)
}
//实现鼠标“打点”相关的生命周期钩子
onMounted(()=>{
window.addEventListener('click',savePoint)
})
onBeforeUnmount(()=>{
window.removeEventListener('click',savePoint)
})
return point
}
Três, toRef e toRefs
-
função toRef:
- A função toRef converte uma propriedade de um objeto reativo em uma única referência reativa.
- São necessários dois parâmetros: o primeiro parâmetro é um objeto reativo e o segundo parâmetro é o nome da propriedade a ser referenciada.
const name = toRef(person,'name') - A função toRef retorna uma nova referência responsiva, que ficará sempre associada à propriedade do objeto, ou seja, quando a propriedade do objeto mudar, a referência também mudará.
<script>
import {
ref,reactive,toRef} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
return {
name:toRef(person,'name'),
age:toRef(person,'age'),
salary:toRef(person.job.j1,'salary'),
}
}
}
</script>
-
função toRefs:
- A função toRefs converte um objeto reativo em um objeto normal com nomes de propriedade como chaves e valores de propriedade como valores, onde cada valor de propriedade é uma referência reativa separada.
- Ele recebe um objeto reativo como parâmetro.
- A função toRefs retorna um novo objeto simples no qual cada valor de propriedade é uma nova referência reativa que permanece associada às propriedades do objeto reativo original.
- Use toRefs para converter facilmente um objeto reativo em várias referências reativas separadas em um componente, para que as propriedades nele possam ser usadas e atualizadas com mais flexibilidade.
<script>
import {
reactive,toRefs} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
return {
// toRefs会将person里面的所有属性转换为多个响应式引用 只转换出来一层 想解多层的还是去使用toRef吧
...toRefs(person)
}
}
}
</script>
使用toRef和toRefs可以在组件中更灵活地操作响应式数据Por exemplo, você pode usar toRef para criar uma referência reativa que se refere a uma propriedade específica e usá-la diretamente no modelo; ou você pode usar toRefs para converter a propriedade de todo o objeto reativo em várias referências reativas e acessar e atualizar essas referências separadamente no componente. Essas funções podem ajudar a simplificar a lógica do código, proporcionando melhor legibilidade e manutenção .
Resumir
Até agora nesta série, concluímos a explicação das APIs combinadas comumente usadas em vue3 . Os artigos subsequentes trarão a você outras APIs combinadas , bem como novos componentes e algumas pequenas alterações em vue3 . Obrigado por seu apoio~ Bem-vindo a assinar esta série de artigos!