açúcar sintático de configuração de script
1. API combinada: setup()
Na série Composition API do Vue 3, uma nova função de configuração é introduzida . É uma opção de componente que é executada antes de o componente ser criado. Uma vez que os props são analisados, ele serve como ponto de entrada da API de composição.
A opção de configuração é uma função que usa props e context , e nós expomos tudo o que a configuração retorna para o restante do componente (propriedades computadas, métodos, ganchos de ciclo de vida, etc.), bem como o modelo do componente.
<script>
// 这是一个基于 TypeScript 的 Vue 组件
import { defineComponent } from 'vue'
export default defineComponent({
setup(props, context) {
// 在这里声明数据，或者编写函数并在这里执行它
return {
// 需要给 `<template />` 用的数据或函数，在这里 `return` 出去
}
},
})
</script>
A nova opção de configuração é executada antes da criação do componente e após a análise das props, que é o ponto de entrada da API combinada.
Observação:
① Você deve evitar usar isso na configuração, porque não encontrará a instância do componente. A chamada para setup acontece antes das propriedades de dados, propriedades calculadas ou métodos serem analisados, então eles não podem > ser acessados em setup.
②Na tag de script adicionada com a configuração, não precisamos declarar e método. Essa forma de escrever irá expor automaticamente todas as variáveis e funções de nível superior ao modelo (template) para uso. Aqui enfatizamos a frase "expor para o modelo não é o mesmo que expor para o mundo
exterior
.
"
Ciclo de vida do componente
Alterações no ciclo de vida do Vue podem ser intuitivamente compreendidas na tabela a seguir:
| Ciclo de vida do Vue 2 | Ciclo de vida do Vue 3 |
|---|---|
| antes de criar | setup -- executado antes da criação do componente |
| criada | setup – executado após a criação do componente |
| antes de montar | onBeforeMount – executado antes do componente ser montado no nó |
| montado | onMounted – executado após a montagem do componente |
| antes de atualizar | onBeforeUpdate – executado antes da atualização do componente |
| Atualizada | onUpdated – Executado após a atualização do componente |
| antes de destruir | onBeforeUnmount – executado antes do componente ser desmontado |
| destruído | onUnmounted – executado após a desmontagem do componente |
| erro capturado | onErrorCaptured – a função de gancho é ativada quando uma exceção de um componente descendente é capturada |
O beforeCreate e o created no ciclo de vida do Vue 2 foram substituídos por setup no Vue 3 .
Dois, açúcar sintático de configuração de script
É um novo açúcar sintático para Vue3, na função de configuração. Todas as exportações do módulo ES são consideradas valores expostos ao contexto e são incluídas no objeto de retorno setup(). Em comparação com a forma de escrita anterior, a gramática torna-se mais simples após o uso.
1. Não há necessidade de retornar as propriedades e métodos de registro automático e usá-los diretamente
①. O açúcar sintático da configuração do script não é um novo módulo funcional, apenas simplifica o método de gravação da API de composição anterior (compositionApi) que deve retornar **(return)** e tem melhor desempenho em tempo de execução.
②. Na função de configuração : Todas as exportações do módulo ES são consideradas como valores expostos ao contexto e incluídos no objeto de retorno setup(). Em comparação com a forma de escrita anterior, a gramática torna-se mais simples após o uso.
Você não precisa se preocupar com o custo de aprendizado do açúcar sintático de configuração, é uma simplificação da API combinada e não há novos pontos de conhecimento. Você só precisa entender alguns usos e diferenças sutis, ainda mais fáceis do que escrever setup() antes!
O uso também é muito simples, basta adicionar a palavra-chave setup à tag script
<script setup>
</script>
2. Usando
ref na API principal do componente Expor variáveis para template
ref é a API reativa mais comumente usada , que pode ser usada para definir todos os tipos de dados , incluindo nós e componentes do Node . Retorna um objeto responsivo , todos os valores são obtidos através da propriedade .value .
<template>
<div>{
{counter}}</div>
</template>
<script setup >
import { ref } from 'vue'
const counter = ref(0);//不用 return ，直接在 templete 中使用
const timer = setInterval(() => {
counter.value++
}, 1000)
onUnmounted(() => {
clearInterval(timer);
})
</script>
reativo
retorna um proxy reativo para um objeto.
<script setup>
import { reactive, onUnmounted } from 'vue'
const state = reactive({
counter: 0
})
// 定时器 每秒都会更新数据
const timer = setInterval(() => {
state.counter++
}, 1000);
onUnmounted(() => {
clearInterval(timer);
})
</script>
<template>
<div>{
{state.counter}}</div>
</template>
O uso de ref também pode atingir nosso 'contador' esperado e, no modelo, o vue o processou, podemos usar o contador diretamente sem escrever counter.value
A relação entre ref e reactive:
ref é uma estrutura **{value:'xxxx'} , value é um objeto reativo** A camada inferior de reactive é Proxy
, a essência de ref também é empacotada com reactive, então também é Proxy , e a essência de ref também é reativa
. ref(obj) é equivalente a reactive({value: obj}) Especifique o nome do componente atual , e ele assumirá automaticamente o nome do arquivo como nome principal, ou seja, não há necessidade de escrever o nome atributo. Exemplo:
<template>
<Child />
</template>
<script setup>
import Child from '@/components/Child.vue'
</script>
4. Defina as props do componente
defineProps—>[usado para receber as props do componente pai]
especifique o tipo de props atual através de defineProps, e obtenha o
exemplo de objeto props do contexto:
<script setup>
// defineEmits,defineProps无需导入，直接使用
const props = defineProps({
title: String,
})
</script>
<!-- 或者 -->
<script setup lang="ts">
import { ref,defineProps } from 'vue';
type Props={
msg:string
}
defineProps<Props>();
</script>
5. Defina emit
defineEmit—>[transferir eventos de componentes filho para componentes pai] use defineEmit para definir os eventos contidos no componente atual e execute o exemplo de código
de emissão por meio do contexto retornado :
<script setup>
// defineEmits,defineProps无需导入，直接使用
const emit = defineEmits(['change','delete'])
</script>
6. API defineExpose
defineExpose —> [componente expõe seus próprios atributos]
método de escrita tradicional, podemos acessar o conteúdo do componente filho através da instância ref no componente pai, mas na configuração do script , esse método não pode ser usado. A configuração é equivalente a um fechamento. Exceto pelo modelo de modelo interno , ninguém pode acessar os dados e métodos internos.
Os componentes da configuração do script não expõem nenhuma propriedade declarada internamente para o exterior por padrão. Se algumas propriedades precisam ser expostas, você pode usar defineExpose
Nota : No momento, descobriu-se que as propriedades e métodos expostos por defineExpose são todos tipos desconhecidos.Se houver um método para corrigir o tipo, adicione-o na área de comentários.
Se precisar expor os dados e métodos na configuração , você precisará usar a API defineExpose . Exemplo:
//子组件
<template>
{
{msg}}
</template>
<script setup>
import {ref} from 'vue'
let msg = ref("Child Components");
let num = ref(123);
// defineExpose无需导入，直接使用
defineExpose({
msg,
num
})
</script>
//父组件
<template>
<Child ref="child" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Child from '@/components/Child.vue'
let child = ref(null);
onMounted(() => {
console.log(child.value.msg); // Child Components
console.log(child.value.num); // 123
})
</script>
7. Comunicação do componente pai-filho
//父组件
<template>
<div class="wrapper">
<Child :page="page"
@pageFn="pageFn"
ref="childRef"
>
<button @click="doSth1"> defineExpose</button>
</div>
</template>
<script setup>
import {ref} from 'vue'
import Child from './Child.vue'
const childRef = ref();
const page = ref(1)
const pageFn = (num) => {
page.value += num
}
function doSth1() {
console.log(childRef.value)
childRef.value.doSth();
}
</script>
<style scoped>
div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>
//子组件
<template>
<!-- <p>子</p>-->
<button @click="butFn">改变page值: {
{ page }} </button>
</template>
<script setup>
// defineEmits,defineProps无需导入，直接使用
const props = defineProps({
page: Number
});//接收父组件传来的值
const emit = defineEmits(["pageFn"]); //定义一个变量来接收父组件传来的方法
const butFn = () => {
emit('pageFn', props.page)
}
function doSth(){
console.log(333,'defineExpose');
}
defineExpose({ doSth });
// 获取父组件传递过来的数据
console.log(props.page, "parent value"); // parent value
</script>
<style scoped>
button {
margin: 20px;
}
</style>
O componente filho recebe os dados passados pelo componente pai por meio de defineProps, o componente filho envia informações para o componente pai por meio do evento de definição defineEmits e usa o componente filho defineExpose para passar o componente pai