API composta

---

prefácio

A API de composição do Vue 3 (API de composição) é um conjunto de funções e açúcar sintático para organizar a lógica do código dos componentes do Vue de maneira mais flexível e combinável. Ao contrário da API de opções do Vue 2, a API de composição não existe mais na forma de opções, mas é <script setup>usada por meio de tags.

A API de composição fornece as seguintes funções principais:

• setup(): A função chamada antes da criação do componente, que é usada para definir o estado, propriedades calculadas, métodos, eventos, etc. do componente. setup()A função pode retornar um objeto, que contém os dados e métodos que precisam ser usados ​​no modelo.
• ref(): recebe um valor inicial e retorna um objeto responsivo, que pode .valueser obtido ou modificado através da propriedade.
• reactive(): Receba um objeto comum e retorne um objeto responsivo, todas as propriedades internas são responsivas.
• computed(): receba uma função de cálculo como um parâmetro e retorne uma propriedade de cálculo responsiva.
• watch(): Monitore as alterações de dados e execute a função de retorno de chamada.
• onMounted(), onUpdated(), onUnmounted(): Funções de gancho do ciclo de vida, que são chamadas quando o componente é montado, atualizado e desmontado, respectivamente.

Os benefícios de usar uma API de composição incluem:

• Melhor organização do código, organizar os códigos relacionados na mesma função, o que é mais fácil de ler e manter;
• É mais fácil reutilizar o código e você pode escrever funções reutilizáveis ​​ou funções de combinação lógica complexa;
• Melhor inferência de tipo e suporte IDE.

A API de composição pode coexistir com a API de opções, portanto, pode ser usada conforme necessário.

Noções básicas sobre APIs de composição

Depois de criar um novo projeto, gere novamente o vue no componente raiz
e exclua scripttodo o código da tag

<template>
  <div>
    {
   
   { name }}
  </div>
</template>
<!-- 加上setup就是组合式API -->
<script setup>
let name = '张三'
</script>
<style scoped>
</style>

Entre eles nameestá um atributo de dados responsivo, o valor inicial é 'Zhang San'.
Use a sintaxe de interpolação no modelo { {}}para exibir dinamicamente o valor do atributo de nome

encapsulamento de referência de tipo simples

O exemplo acima é relativamente simples, vamos ver o tipo simples mais refo encapsulamento para se tornar um dado responsivo

<template>
  <div>
    {
    
    {
    
     name }}
    <br>
    <button @click="change">换名字</button>
  </div>
</template>
<!-- 加上setup就是组合式API -->
<script setup>
let name = '张三'
function change(){
    
    
  name = '张三去打水了'
}
</script>
<style scoped>
</style>

O código não muda após a execução

Os dados definidos não suportam capacidade de resposta por padrão (assim que o código muda, ele é imediatamente sincronizado com a visualização e a API de configuração suporta por padrão)

1. Em seguida, você precisa importar algo

import {
    
    ref} from 'vue'

A API combinada deseja tornar os dados responsivos e precisa refencapsular os dados

Tipos simples precisam refser encapsulados com um tipo de objeto que não

2. .valueatributo de chamada

<template>
  <div>
    {
    
    {
    
     name }}
    <br>
    <button @click="change">换名字</button>
  </div>
</template>
<!-- 加上setup就是组合式API -->
<script setup>
import {
    
    ref} from 'vue'

let name = ref ('张三')
function change(){
    
    
  name.value = '张三去打水了'
}
</script>
<style scoped>
</style>

Em seguida, clique no botão para alterar os dados

ObjectType user.name

<template>
  <div>
    {
    
    {
    
     name }}--{
    
    {
    
     user.name }}
    <br>
    <button @click="change">换名字</button>
  </div>
</template>
<!-- 加上setup就是组合式API -->
<script setup>
import {
    
    ref} from 'vue'

let name = ref ('张三')
// 对象类型
let user = {
    
    
  name: '李四'
}
function change(){
    
    
  name.value = '张三去打水了'
  user.name = '李四去挑水'
}
</script>
<style scoped>
</style>

No código acima, o valor do atributo name do objeto user é 'Lisi', que é diferente da variável responsiva name e não tem nada a ver com eles.
No modelo, { { user.name }} é usado para exibir o valor do atributo name do objeto de usuário e { { name }} é usado para exibir o valor da variável reativa name.

Submontagem

Os subcomponentes usados ​​anteriormente foram importados, registrados e usados, e usados ​​diretamente após a importação na API combinada

importar:

import HelloWorld from '@/components/HelloWorld.vue';

usar:

    <HelloWorld></HelloWorld>

Efeito:

Encapsulamento reativo do tipo array

<template>
  <div>
    {
    
    {
    
     name }}--{
    
    {
    
     user.name }}
    <br>
    <p v-for="(item, index) in arr" :key="index">{
    
    {
    
     item }}</p>
    <button @click="change">换名字</button>
    <HelloWorld></HelloWorld>
  </div>
</template>
<!-- 加上setup就是组合式API -->
<script setup>
import {
    
    ref} from 'vue'

import HelloWorld from '@/components/HelloWorld.vue';
let name = ref ('张三')
// 对象类型
let user = {
    
    
  name: '李四'
}
//数组类型
let arr = ['a','b','c']

function change(){
    
    
  name.value = '张三去打水了'
  user.name = '李四去挑水'
  arr.splice(0,1)
}
</script>
<style scoped>
</style>

Após a execução, os primeiros dados serão excluídos,

mas se você excluí-los novamente, eles não serão excluídos.

Em seguida, envolva a matrizreactive

<template>
  <div>
    {
    
    {
    
     name }}--{
    
    {
    
     user.name }}
    <br>
    <p v-for="(item, index) in arr" :key="index">{
    
    {
    
     item }}</p>
    <button @click="change">换名字</button>
    <HelloWorld></HelloWorld>
  </div>
</template>
<!-- 加上setup就是组合式API -->
<script setup>
import {
    
    ref,reactive} from 'vue'

import HelloWorld from '@/components/HelloWorld.vue';
let name = ref ('张三')
// 对象类型
let user = {
    
    
  name: '李四'
}
//数组类型
let arr = reactive(['a','b','c'])

function change(){
    
    
  name.value = '张三去打水了'
  user.name = '李四去挑水'
  arr.splice(0,1)
}
</script>
<style scoped>
</style>

Exercício básico da API de composição

scriptCrie dois novos subcomponentes: Adicionar e Listar, e exclua os itens de configuração gerados por padrão no rótulo após gerar a estrutura básica

No componente raiz:
é usado o componente <List>, cujo código não é exibido e pode ser entendido como um componente de lista;
é introduzida a função reactivee é criado um array responsivo arrpara armazenar os dados na lista de tarefas

<template>
  <div>
    <h1>待办列表</h1>
    <List></List>
  </div>
</template>

<script setup>
import List from '@/components/List.vue'
import {
    
     reactive } from 'vue';

// 定义数组
let arr = reactive(['看电影','玩游戏'])
</script>
<style scoped>
</style>

No subcomponente List

Na lista de componentes <script setup>, a função é usada definePropspara definir as propriedades do componente, que podem ser usadas para definir o componente props. Um atributo de lista é definido aqui e seu tipo é Array.

No modelo, use para v-forpercorrer os dados na matriz de lista e, em seguida, use { { item }}para renderizar os dados de cada item. Adicionado aqui :key="index"para que o Vue possa identificar rapidamente cada item da lista e renderizar os dados corretos.

<template>
  <div>
    <ol>
        <li v-for="(item, index) in list" :key="index">{
    
    {
    
     item }}</li>
    </ol>
  </div>
</template>

<script setup>
// 组合式写法，自定义属性
let myProps = defineProps({
    
    
    list :{
    
    type: Array}
})
</script>
<style scoped>
</style>

Em seguida, passe um dado de atributo no componente pai

    <List :list="arr"></List>

Em seguida, passe o aplicativo do componente filho no componente pai

1. importar

import Add  from '@/components/Add.vue';

2. usar

    <Add @item="recive"></Add>

3. definir método

function recive(v) {
    
    
  arr.push(v)
}

Em seguida, o subcomponente Add é deixado

<template>
  <div>
    <input type="text" v-model="item">
    <button @click="send">添加</button>
  </div>
</template>

<script setup>
// 定义事件  数据名item
import {
    
    ref} from 'vue'
let item = ref('')

// 定义事件  send
// 组合式API自定义事件
let emits = defineEmits(['item'])
function send(){
    
    
    if ( item.value!='' ) {
    
    
        // 不为空 发送数据
        emits('item',item.value)
        // 清空输入框，避免重复添加
        item.value = ''
    }

}
</script>
<style scoped>
/* 输入框样式 */
input {
    
    
    padding: 8px 16px;
    font-size: 16px;
    outline:none;
    border: 1px solid black;
    border-radius: 4px;
    margin-right: 8px;
  }

  /* 按钮样式 */
  button {
    
    
    padding: 8px 16px;
    font-size: 16px;
    background-color: #409EFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>

Otimização de exercícios básicos

Aqui estão os comentários e explicações passo a passo para o código:

<template>
  <div>
    <h1>待办列表</h1>
    <Add @item="recive"></Add>
    <List @remove="del" :list="arr"></List>
  </div>
</template>

O código acima é App.vuea parte do modelo do arquivo, que apresenta principalmente Add.vuecomponentes List.vuee vincula os eventos personalizados correspondentes.

<script setup>
import List from '@/components/List.vue'
import Add from '@/components/Add.vue'
import {
    
     reactive } from 'vue'

// 定义数组
let arr = reactive(['玩游戏','看电影'])

function recive(v){
    
    
  arr.push(v)
}
function del(i){
    
    
  arr.splice(i,1)
}
</script>

O código acima é App.vuea parte lógica do arquivo. Apresente List.vuee Add.vuecomponentes e use para reactivedefinir uma matriz responsiva arrpara armazenar a lista de tarefas.

reciveA função é usada para receber Add.vueos dados passados ​​do componente e adicioná-los ao arrarray.

delA função é usada para receber List.vueos dados passados ​​do componente e arrdeletar o item da lista correspondente do array.

<template>
    <div>
      <input type="text" v-model="item">
      <button @click="send">添加</button>
    </div>
  </template>

O código acima é Add.vuea parte do modelo do arquivo, que contém principalmente uma caixa de entrada e um botão para despachar dados para o componente pai.

<script setup>
// 定义事件  数据名item
import {
    
    ref} from 'vue'
let item = ref('')

// 定义事件  send
// 组合式API自定义事件
let emits = defineEmits(['item'])
function send(){
    
    
  if ( item.value!='' ) {
    
    
        // 不为空 发送数据
        emits('item',item.value)
        // 清空输入框，避免重复添加
        item.value=''
  }
}
</script>

O código acima é Add.vuea parte lógica do arquivo, usado para defineEmitsdefinir um evento personalizado iteme refpara definir uma variável responsiva itempara obter o valor na caixa de entrada. Quando o botão Adicionar é clicado, de acordo com o valor na caixa de entrada, um evento personalizado é acionado e o valor na caixa de entrada é passado como um parâmetro para o componente pai e, finalmente, a caixa de entrada é limpa.

<template>
    <div>
      <ol>
          <li @click="send(index)" v-for="(item, index) in list" :key="index">{
   
   { item }}</li>
      </ol>
    </div>
  </template>

O código acima é List.vuea parte do modelo do arquivo, que é usado principalmente para exibir a lista de tarefas.

<script setup>
  //组合式写法 自定义属性
  let myProps = defineProps({
    
    
      list:{
    
    type: Array}
  })
  let emits = defineEmits(['remove'])
  function send(i){
    
    
   emits('remove',i)
  }
  </script>

O código acima é List.vuea parte lógica do arquivo, que definePropsdefine uma listpropriedade para receber os dados passados ​​pelo componente pai. Defina defineEmitsum evento personalizado com removeo qual é disparado quando cada item da lista é clicado e despacha uma mensagem para o componente pai.

<style scoped>
  li{
    
    
      color: #223;
      margin: 10px 0;
      font-size: 25px;
  }
  li:hover{
    
    
      cursor: pointer;
      color: #31c27c;
  }
  
  li:hover::after{
    
    
      content: "-点击已办";
      color: red;
  }
</style>

O código acima é List.vuea parte de estilo do arquivo, que é usada principalmente para embelezar o estilo da lista de tarefas.