Um guia completo para codificação, otimização de desempenho e melhorias de ecossistema em Vue 3 e Vue 2

Resumo: Vue.js é uma estrutura JavaScript popular e sua versão mais recente, Vue 3, difere de sua versão anterior, Vue 2, em muitos aspectos. Este blog se concentrará nos métodos de codificação do Vue 3 que são inconsistentes com o Vue 2. Exploraremos os novos recursos, alterações de sintaxe e otimizações introduzidas no Vue 3. Comparando essas mudanças em detalhes, entenderemos como migrar e usar melhor o Vue 3.

1. Introdução

No Vue 3, a API Composition foi introduzida como um complemento e extensão da API Options. A API Composition foi projetada para fornecer uma maneira mais flexível e combinável de organizar o código. As inconsistências entre a API de composição e a API de opções são detalhadas abaixo.

1. API de composição

API de composição é um novo recurso do Vue 3. Ela fornece um conjunto de APIs funcionais para organizar e reutilizar a lógica do código. Em comparação com a API de opções, a API de composição é mais flexível e de fácil manutenção e é especialmente adequada para processar lógica de negócios complexa e lógica compartilhada entre componentes.

Os principais recursos da API Composition incluem:

• Use funções para organizar a lógica: Encapsule a lógica relevante de acordo com as funções e reutilize-as por meio de funções.
• Combinação precisa de lógica: A lógica de diferentes funções pode ser combinada conforme necessário, sem seguir uma ordem fixa de declaração.
• Melhor reutilização de código: a lógica pode ser extraída em funções personalizadas e referenciada e chamada em componentes.
• Melhor inferência de tipos e suporte ao editor: Graças à programação funcional, o editor pode inferir melhor os tipos e fornecer conclusão de código.

Aqui está um exemplo usando a API Composition:

import {
    
     reactive, computed } from 'vue';

export default {
    
    
  setup() {
    
    
    const state = reactive({
    
    
      count: 0,
    });

    const increment = () => {
    
    
      state.count++;
    };

    const doubledCount = computed(() => {
    
    
      return state.count * 2;
    });

    return {
    
    
      state,
      increment,
      doubledCount,
    };
  },
};

2. API de opções

A API de opções é uma forma comumente usada para escrever componentes no Vue 2. Ela define várias propriedades, métodos e ganchos de ciclo de vida do componente, declarando um objeto de opções. Comparada com a API Composition, a API Options é mais adequada para escrever componentes simples ou para iniciantes.

Os principais recursos da API de opções incluem:

• Baseado no objeto de opções: Use um objeto contendo várias opções para definir vários aspectos do componente.
• Ganchos de ciclo de vida declarativos: manipulam eventos de ciclo de vida de componentes por meio de funções de gancho de ciclo de vida predefinidas.
• Os dados e métodos são definidos no mesmo objeto: os dados e métodos do componente são definidos nas propriedades do objeto de opções.
• Acesso ao contexto dentro do objeto: O contexto do componente pode ser acessado dentro do componente através da palavra-chave this.

Aqui está um exemplo usando a API Options:

export default {
    
    
  data() {
    
    
    return {
    
    
      count: 0,
    };
  },
  methods: {
    
    
    increment() {
    
    
      this.count++;
    },
  },
  computed: {
    
    
    doubledCount() {
    
    
      return this.count * 2;
    },
  },
};

Resumo:
A API Composition foi introduzida no Vue 3 como um complemento à API Options. A API Composition fornece uma maneira mais flexível e combinável de escrever código, adequada para lidar com lógica de negócios complexa e lógica compartilhada entre componentes. E API de opções

É mais adequado para escrever componentes simples ou para iniciantes. Em projetos de migração ou novos projetos, você pode escolher a API apropriada para escrever componentes Vue de acordo com suas necessidades.

2. Sintaxe do modelo

No Vue 3, também existem algumas inconsistências com o Vue 2 em termos de sintaxe do modelo. A seguir será apresentada a diretiva v-model, a vinculação de atributos no modelo e as alterações nos componentes dinâmicos, respectivamente.

1. Diretiva do modelo v:

No Vue 2, a diretiva v-model é usada para implementar a ligação bidirecional entre elementos e componentes do formulário. No Vue 3, o comportamento da diretiva v-model mudou. A diretiva v-model no Vue 3 é usada principalmente para ligação bidirecional entre adereços e emissão de componentes.

Ao usar a diretiva v-model, você precisa definir um atributo modelValue nas props do componente e usar update:modelValue no evento emit para atualizar o atributo. O uso específico é o seguinte:

<template>
  <custom-input v-model="value"></custom-input>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput,
  },
  data() {
    return {
      value: '',
    };
  },
};
</script>

No componente CustomInput, você precisa receber o modelValue por meio de props e usar $emit('update:modelValue', newValue) no evento de entrada da caixa de entrada para atualizar o valor no componente pai.

2. Vinculação de atributos no modelo:

No Vue 2, a vinculação de propriedades pode ser obtida usando a diretiva v-bind ou a sintaxe abreviada de dois pontos. No Vue 3, a sintaxe de dois pontos é escrita de maneira um pouco diferente e você precisa usar a diretiva v-bind para vincular propriedades explicitamente.

Exemplo de ligação de propriedade para Vue 2:

<template>
  <div :class="{ active: isActive }"></div>
  <input :value="message">
</template>

Exemplo de ligação de propriedade para Vue 3:

<template>
  <div v-bind:class="{ active: isActive }"></div>
  <input v-bind:value="message">
</template>

Deve-se notar que no Vue 3, você também pode usar a forma abreviada de vinculação de atributos, abreviando v-bind como um símbolo de prefixo (como: @,:, #, etc.) e escolher o símbolo de prefixo apropriado de acordo com o propósito específico.

3. Componentes dinâmicos:

No Vue 2, você pode usar elementos e atributos is para obter a troca dinâmica de componentes. No Vue 3, a forma de escrever componentes dinâmicos sofreu algumas mudanças.

Exemplo de componente dinâmico em Vue 2:

<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

Exemplo de componente dinâmico no Vue 3:

<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: ComponentA,
    };
  },
  components: {
    ComponentA

,
    ComponentB,
  },
};
</script>

No Vue 3, você pode usar diretamente o objeto componente como o valor de currentComponent sem usar a string de nome do componente.

Resumo:
No Vue 3, o uso da diretiva v-model mudou e ela é usada principalmente para ligação bidirecional entre adereços e emissão de componentes. A vinculação de propriedades em modelos requer vinculação de propriedades explícita usando a diretiva v-bind, e você pode optar por usar diferentes símbolos de prefixo para simplificar a sintaxe. O método de escrita de componentes dinâmicos permanece consistente no Vue 3. Você só precisa atribuir o objeto componente diretamente ao atributo is. Essas mudanças tornam a sintaxe do template mais flexível e fácil de usar no Vue 3.

3. Sistema responsivo

No Vue 3, o sistema reativo também apresenta algumas inconsistências com o Vue 2. A seguir apresentaremos Ref e Reactive, Computed e Watch, e mudanças nas propriedades estáticas, respectivamente.

1. Ref e Reativo:

No Vue 2, use o método Vue.observable() para converter um objeto normal em um objeto reativo. No Vue 3, duas novas APIs reativas, Ref e Reactive, foram introduzidas.

• Ref: Ref é um novo tipo no Vue 3 que agrupa dados normais e os torna reativos. Dados comuns podem ser agrupados em objetos Ref por meio da função ref(). Ao usar objetos Ref, você precisa acessar e modificar o valor por meio da propriedade .value.

import {
    
     ref } from 'vue';

const count = ref(0);

console.log(count.value); // 访问值

count.value = 1; // 修改值

• Reativo: Reativo é uma nova função no Vue 3 que recebe um objeto normal e retorna um objeto proxy reativo. Ao usar funções reativas, não há necessidade de chamar manualmente Vue.observable() para converter objetos como no Vue 2.

import {
    
     reactive } from 'vue';

const state = reactive({
    
    
  count: 0,
});

console.log(state.count); // 访问值

state.count = 1; // 修改值

2. Calculado e observado:

No Vue 3, o uso de Computed e Watch é basicamente o mesmo que no Vue 2, mas há algumas mudanças sutis.

• Computado: No Vue 3, você pode usar a função computada() para criar propriedades computadas. A função computada() recebe uma função como parâmetro e retorna um objeto Ref. Deve-se observar que no Vue 3, você não precisa mais usar get e set para definir propriedades calculadas, mas retornar diretamente os resultados calculados.

import {
    
     computed, ref } from 'vue';

const count = ref(0);

const doubledCount = computed(() => count.value * 2);

console.log(doubledCount.value); // 访问计算属性的值

• Watch: No Vue 3, você pode usar a função watch() para criar um ouvinte para executar uma função de retorno de chamada quando os dados reativos mudam. A função watch() recebe dois parâmetros: os dados a serem monitorados e a função de retorno de chamada. Deve-se notar que no Vue 3, a função watch() não suporta mais expressões de string.

import {
    
     watch, ref } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
    
    
  console.log(`count changed from ${
      
      oldValue} to ${
      
      newValue}`);
});

3. Atributos estáticos:

No Vue 2, as propriedades estáticas de um componente podem ser acessadas através da propriedade $options da instância do Vue. No Vue 3, as propriedades estáticas foram removidas e não podem ser acessadas diretamente através de instâncias de componentes. Isso ocorre porque o Vue 3 usa uma nova implementação interna baseada em Proxy e as propriedades estáticas não fazem mais parte da instância.

Resumo:
No Vue 3, Ref e Reactive fornecem uma maneira mais flexível e intuitiva de criar dados responsivos. Computed e Watch são basicamente usados ​​da mesma maneira.

Mas há algumas mudanças nos detalhes gramaticais. Deve-se observar que as propriedades estáticas dos componentes foram removidas no Vue 3 e não podem ser acessadas diretamente através de instâncias. Essas mudanças tornam o sistema responsivo mais intuitivo e fácil de usar.

4. DOM Virtual

No Vue 3, o DOM virtual (Virtual DOM) também apresenta algumas inconsistências com o Vue 2. A seguir serão apresentadas três mudanças relacionadas ao DOM virtual: Fragment, Teleport e Suspense.

1. Fragmento:

No Vue 2, é inválido usar vários elementos raiz em um modelo, eles devem ser agrupados em um elemento pai. No Vue 3, você pode usar Fragment para resolver este problema. Fragment é um espaço reservado especial usado para agrupar vários elementos em um modelo, mas não gera elementos DOM adicionais no resultado da renderização.

Exemplo usando Fragmento:

<template>
  <Fragment>
    <div>Element 1</div>
    <div>Element 2</div>
  </Fragment>
</template>

<></>Os fragmentos podem ser representados usando uma sintaxe abreviada :

<template>
  <>
    <div>Element 1</div>
    <div>Element 2</div>
  </>
</template>

2. Teletransporte:

Teleporte é um novo recurso do Vue 3, usado para renderizar o conteúdo de componentes em qualquer lugar do DOM. Teleport fornece uma maneira concisa de lidar com a necessidade de renderizar conteúdo fora do componente, como renderizar o componente em um modal, caixa de diálogo ou menu pop-up.

Exemplo usando Teletransporte:

<template>
  <Teleport to="body">
    <div class="modal">
      Modal Content
    </div>
  </Teleport>
</template>

No exemplo acima, too atributo especifica o local de destino para renderizar o Teleport, aqui body, mas pode ser qualquer outro seletor DOM legal.

3. Suspense:

Suspense é outro recurso introduzido no Vue 3 que é usado para exibir um espaço reservado durante o carregamento de um componente assíncrono até que o componente assíncrono seja carregado e esteja pronto para ser renderizado. O Suspense oferece uma melhor experiência do usuário e um controle mais granular.

Exemplo usando Suspense:

<template>
  <Suspense>
    <template #default>
      <div>Loading...</div>
    </template>
    <template #fallback>
      <div>Error! Failed to load component.</div>
    </template>
    <AsyncComponent />
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));

export default {
  components: {
    AsyncComponent,
  },
};
</script>

No exemplo acima, #defaulto conteúdo do slot será exibido antes do carregamento do componente assíncrono e #fallbacko conteúdo do slot será exibido quando o componente assíncrono falhar ao carregar.

Resumo:
No Vue 3, o Fragment fornece uma maneira de resolver o problema de vários elementos raiz, o Teleport fornece um controle de posição de renderização de componentes mais flexível e o Suspense fornece uma melhor experiência de carregamento assíncrono de componentes. Esses

As mudanças enriquecem a funcionalidade do Virtual DOM, proporcionando mais opções de desenvolvimento e uma melhor experiência do usuário.

5. Otimização de desempenho

No Vue 3, também existem alguns novos recursos e melhorias na otimização de desempenho. A seguir apresentaremos a promoção estática e a otimização de compilação, dois aspectos relacionados à otimização de desempenho.

1. Elevação estática:

No Vue 2, o conteúdo estático nos modelos é recriado a cada nova renderização, o que pode causar algumas penalidades de desempenho. No Vue 3, por meio da tecnologia de promoção estática, o compilador pode detectar e otimizar conteúdo estático e promovê-lo para constantes estáticas, reduzindo o custo de recriação.

A elevação estática pode trazer as seguintes vantagens:

• Ele reduz o número de criações e comparações de DOM virtual e melhora o desempenho de renderização.
• Ao reduzir operações DOM desnecessárias, o custo de refluxo e redesenho de página é reduzido.

2. Otimização da compilação:

O Vue 3 melhorou o compilador e introduziu algumas medidas de otimização para melhorar a eficiência e o desempenho da compilação.

• Sinalizador de patch: o compilador adicionará um sinalizador de patch a cada nó VNode com base na diferença entre o conteúdo estático e o conteúdo dinâmico do modelo para realizar operações mais precisas durante o processo de atualização e reduzir operações desnecessárias de comparação e renderização.

• Cache de funções de manipulação de eventos: No Vue 3, o compilador armazena em cache funções de manipulação de eventos para evitar a criação de novas instâncias de função toda vez que é renderizado novamente, melhorando o desempenho do processamento de eventos.

• Promoção de nó estático: o compilador detectará nós estáticos no modelo e os promoverá a constantes para evitar a criação de novos VNodes sempre que forem renderizados novamente, reduzindo a sobrecarga de renderização.

• Agitação de árvore: o compilador do Vue 3 suporta a remoção de componentes e instruções não utilizados dos modelos, reduzindo assim o volume de empacotamento e melhorando o desempenho de carregamento do aplicativo.

Resumo:
No Vue 3, o desempenho do aplicativo pode ser melhorado por meio de medidas como melhoria estática e otimização de compilação. O aumento estático reduz a sobrecarga de recriação de conteúdo estático, enquanto a otimização de compilação melhora o desempenho, melhorando o compilador e otimizando o processo de renderização. Estas medidas de otimização melhoraram significativamente o desempenho do Vue 3, proporcionando uma melhor experiência do usuário e maior eficiência de desenvolvimento.

6. Suporte TypeScript

No Vue 3, o suporte para TypeScript foi significativamente melhorado. A seguir apresentaremos a inferência e a declaração de tipos, dois aspectos relacionados ao suporte ao TypeScript.

1. Digite inferência:

O Vue 3 é capaz de inferir automaticamente o tipo de variáveis ​​em muitos casos, proporcionando melhor segurança de tipo e experiência de desenvolvimento. aqui estão alguns exemplos:

• Inferência de adereços: em um componente, você pode definePropsdefinir os adereços do componente por meio da função e realizar inferência de tipo com base no valor padrão dos adereços e no valor passado.

import {
    
     defineComponent, defineProps } from 'vue';

const MyComponent = defineComponent({
    
    
  props: {
    
    
    message: String,
    count: {
    
    
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    
    
    // 在使用 props 时，可以获得类型推断
    console.log(props.message.toUpperCase());
    console.log(props.count.toFixed(2));

    // ...
  },
});

• Inferência de referência: ao usar refa função para criar um objeto Ref, o Vue 3 pode inferir automaticamente o tipo do valor envolvido no objeto Ref.

import {
    
     ref } from 'vue';

const count = ref(0); // 推断为 Ref<number>

console.log(count.value.toFixed(2)); // value 推断为 number

• Inferência computada: Ao usar computeda função para criar uma propriedade calculada, o Vue 3 pode inferir automaticamente o tipo da propriedade calculada com base no valor de retorno da função calculada.

import {
    
     computed, ref } from 'vue';

const count = ref(0);

const doubledCount = computed(() => count.value * 2); // 推断为 ComputedRef<number>

console.log(doubledCount.value.toFixed(2)); // value 推断为 number

2. Digite a declaração:

Vue 3 fornece melhor suporte para inferência e verificação de tipo mais precisas ao usar componentes Vue em TypeScript.

• Função defineComponent: defineComponentOs componentes podem ser definidos usando a função, que aceita um objeto de configuração de componente e retorna um objeto de opções de componente contendo a declaração de tipo correta.

import {
    
     defineComponent } from 'vue';

export default defineComponent({
    
    
  name: 'MyComponent',
  props: {
    
    
    message: String,
    count: {
    
    
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    
    
    console.log(props.message.toUpperCase());
    console.log(props.count.toFixed(2));

    // ...
  },
});

• Declarações de tipo da API Options: Para componentes que usam a API Options, o Vue 3 fornece declarações de tipo corretas para garantir que você obtenha dicas de tipo corretas e verificação de tipo ao escrever opções de componentes.

import {
    
     Options, VueConstructor } from 'vue';

const MyComponent: Options = {
    
    
  name: 'MyComponent',
  props: {
    
    
    message: String,
    count: {
    
    
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    
    
    console.log(props.message.toUpperCase());
    console.log(props.count.toFixed(2));

    // ...
  },
};

export default MyComponent as VueConstructor;

Resumo:
Suporte TypeScript melhorado no Vue 3

, incluindo inferência de tipo e declaração de tipo. A inferência de tipo permite que os desenvolvedores obtenham melhor segurança de tipo e experiência de desenvolvimento, enquanto as declarações de tipo garantem dicas de tipo precisas e verificação de tipo ao usar componentes Vue. Essas melhorias tornam o desenvolvimento de aplicações Vue com TypeScript mais confortável e eficiente.

7. Slots e componentes

No Vue 3, também há algumas mudanças nos slots e componentes. A nova sintaxe de slot e o acesso à instância do componente serão apresentados abaixo.

1. Nova sintaxe de slot:

O Vue 3 apresenta uma nova sintaxe de slot que é mais flexível e intuitiva. A nova sintaxe de slot usa <slot>elementos para definir slots e permite mais funcionalidades por meio de slots nomeados e slots com escopo definido.

Exemplo de slot nomeado:

<template>
  <div>
    <slot name="header"></slot>
    <div>Content</div>
    <slot name="footer"></slot>
  </div>
</template>

Ao usar componentes, você pode usar <template v-slot:slotName>ou abreviatura <template #slotName>para definir especificamente o conteúdo do slot.

<template>
  <MyComponent>
    <template #header>
      <h1>Header Content</h1>
    </template>
    <p>Main Content</p>
    <template #footer>
      <footer>Footer Content</footer>
    </template>
  </MyComponent>
</template>

Exemplo de slot de escopo:

<template>
  <div>
    <slot name="header" :title="title"></slot>
    <div>Content</div>
    <slot name="footer" :year="year"></slot>
  </div>
</template>

slotPropsAo usar slots com escopo definido, os dados passados ​​para o slot podem ser acessados ​​por meio de propriedades no conteúdo do slot .

<template>
  <MyComponent>
    <template #header="slotProps">
      <h1>{
   
   { slotProps.title }}</h1>
    </template>
    <p>Main Content</p>
    <template #footer="slotProps">
      <footer>{
   
   { slotProps.year }}</footer>
    </template>
  </MyComponent>
</template>

2. Acesso à instância do componente:

No Vue 2, $refsas instâncias dos componentes podem ser acessadas através do , mas no Vue 3, o acesso às instâncias dos componentes mudou. Você pode usar reffunções para criar uma referência reativa e vinculá-la a um componente.

<template>
  <div>
    <MyComponent ref="myComponentRef"></MyComponent>
    <button @click="logComponentData">Log Component Data</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const myComponentRef = ref(null);

    const logComponentData = () => {
      console.log(myComponentRef.value.data);
    };

    return {
      myComponentRef,
      logComponentData,
    };
  },
};
</script>

No exemplo acima, refuma referência é criada por meio de uma função myComponentRefe vinculada MyComponentao componente. Você pode então myComponentRef.valueacessar a instância do componente e obter seus dados.

Resumo:
No Vue 3, a sintaxe do slot mudou

ização, introduzindo uma nova sintaxe de slots, tornando o uso de slots mais flexível e intuitivo. Ao mesmo tempo, o acesso às instâncias de componentes também mudou.As refreferências reativas podem ser criadas por meio de funções e vinculadas a componentes para acessar instâncias de componentes. Essas mudanças tornam o uso de slots e componentes mais conveniente e poderoso.

8. Transições e animações

Existem também algumas melhorias nas transições e animações no Vue 3. Os dois aspectos do componente de transição e do nome da classe de animação serão apresentados a seguir.

1. Componente de transição:

No Vue 3, os efeitos de transição podem ser alcançados por meio do componente Transition. O componente Transição oferece a capacidade de aplicar efeitos de transição quando elementos são inseridos ou removidos.

Ao usar o componente Transição, você pode controlar o efeito de transição por meio das seguintes propriedades:

• name: Especifique o nome do efeito de transição. Você pode definir efeitos de transição específicos definindo o nome da classe CSS.

• appear: especifica se serão aplicados efeitos de transição na renderização inicial.

• enter-class// enter-active-class: enter-to-classEspecifique o nome da classe de transição ao inserir elementos.

• leave-class// leave-active-class: leave-to-classEspecifique o nome da classe de transição ao remover elementos.

Aqui está um exemplo de uso do componente Transition para implementar uma transição gradiente:

<template>
  <Transition name="fade">
    <div v-if="show" class="box"></div>
  </Transition>
  <button @click="toggle">Toggle</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);

    const toggle = () => {
      show.value = !show.value;
    };

    return {
      show,
      toggle,
    };
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

No exemplo acima, name="fade"o componente Transition é aplicado ao elemento encapsulado por meio de configurações e o nome da classe CSS do efeito de transição é definido. Durante a renderização inicial, os nomes das classes fade-entere fade-enter-activeserão aplicados para obter o efeito de aparência gradiente. Quando o elemento for removido, o nome da classe será aplicado para obter o efeito de desaparecimento do gradiente fade-leave.fade-leave-active

2. Nome da classe de animação:

No Vue 3, você pode usar nomes de classes de animação para animar elementos. Semelhante ao Vue 2, os efeitos de animação podem ser acionados adicionando um nome de classe a um elemento.

Os nomes de classes de animação comumente usados ​​​​no Vue 3 incluem:

• enter: O estado inicial do elemento inserido.

• enter-active: O estado de transição do elemento inserido.

• enter-to: O estado final do elemento inserido.

• leave: Remove o estado inicial do elemento.

• leave-active: Remove o estado de transição de um elemento.

• leave-to: Remove o estado final do elemento.

Efeitos de animação específicos podem ser obtidos definindo os estilos CSS desses nomes de classes.

Por exemplo, implemente uma animação de fade simples:

<template>
  <div :class="animationClass" class="box"></div>
  <button @click="toggle">Toggle</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {


    const show = ref(true);

    const toggle = () => {
      show.value = !show.value;
    };

    const animationClass = ref('');

    watch(show, () => {
      animationClass.value = show.value ? 'fade-enter-active' : 'fade-leave-active';
    });

    return {
      show,
      toggle,
      animationClass,
    };
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

No exemplo acima, animationClasso efeito de animação é obtido por meio de vinculação dinâmica. Quando showo valor de muda, o valor de será showdefinido de acordo com o valor de animationClass, acionando assim o efeito de animação correspondente.

Resumo:
No Vue 3, os aspectos de transição e animação podem ser alcançados por meio do componente Transition e do nome da classe de animação. O componente Transition fornece a capacidade de controlar a inserção e remoção de efeitos de transição em elementos, e o nome da classe de animação pode acionar efeitos de animação adicionando o nome da classe. Essas melhorias tornam as transições e animações mais flexíveis e fáceis de usar.

9. Mudanças globais na API

No Vue 3, a API global passou por algumas alterações, incluindo mudanças de nome e remoção da API global. As alterações nestes dois aspectos serão introduzidas a seguir.

1. Alteração global do nome da API:

No Vue 3, os nomes de algumas APIs globais foram alterados para refletir melhor sua funcionalidade e propósito.

• Vue: No Vue 3, Vueos construtores não são mais exportados como ponto de entrada padrão. Você pode usar createAppfunções para criar instâncias de aplicativos.

// Vue 2
new Vue({
    
    
  // ...
});

// Vue 3
import {
    
     createApp } from 'vue';

createApp({
    
    
  // ...
}).mount('#app');

• filter: No Vue 2, Vue.filteros filtros podiam ser registrados através de métodos globais, mas no Vue 3, os filtros foram removidos. Você pode usar filtros locais ou funções personalizadas para obter a mesma funcionalidade.

• directive: No Vue 2, Vue.directiveas diretivas poderiam ser registradas através de métodos globais, mas no Vue 3, as diretivas foram removidas. Você pode usar diretivas personalizadas ou diretamente em componentes para substituir diretivas globais.

• mixin: No Vue 2, Vue.mixinas opções de mixin podem ser passadas por métodos globais, mas no Vue 3, as opções de mixin foram removidas. A mesma funcionalidade pode ser alcançada usando a API Composition.

• component: No Vue 2, Vue.componentos componentes globais podem ser registrados por meio de métodos globais, mas no Vue 3, a forma como os componentes são registrados mudou. Os componentes podem ser registrados usando registro local ou através de componentmétodos de instância de aplicação.

2. API global removida:

Além das mudanças de nome, o Vue 3 também remove algumas APIs globais porque sua funcionalidade pode ser implementada por outros meios ou seu uso não é mais recomendado.

• v-once: No Vue 2, você pode usar v-oncediretivas para marcar elementos e componentes a serem renderizados apenas uma vez. No Vue 3, v-onceas diretivas foram removidas e o mesmo efeito pode ser alcançado com dados reativos e renderização condicional.

• inline-template: No Vue 2, você pode usar inline-templateatributos para escrever o modelo de um componente dentro da tag do componente. No Vue 3, inline-templateo recurso foi removido e a mesma funcionalidade pode ser alcançada por meio de componentes de arquivo único ou modelos de string.

• syncModificadores: No Vue 2, você pode usar syncmodificadores para obter ligação bidirecional entre componentes pai e filho. No Vue 3, synco modificador foi removido e v-modela ligação bidirecional pode ser alcançada usando a ligação explícita ao evento.

Resumo:
No Vue 3, a API global passou por algumas alterações, incluindo mudanças de nome e mudanças

Exceto pela API global. Essas mudanças têm como objetivo melhorar a consistência e facilidade de uso da API e incentivar os desenvolvedores a usar alternativas melhores para obter a mesma funcionalidade. Os desenvolvedores precisam estar cientes dessas mudanças e atualizar seu código de acordo.

10. Construindo Ferramentas e Ecossistemas

Em termos de ferramentas de construção e ecossistema, o Vue 3 apresenta algumas melhorias, incluindo a adaptação do Vue CLI e de bibliotecas de terceiros. As alterações nestes dois aspectos serão introduzidas a seguir.

1. Vue CLI fornecido Vue CLI 2:

Vue CLI é a ferramenta oficial de scaffolding do Vue.js, usada para construir e gerenciar rapidamente projetos Vue. Vue CLI 2 é a versão da era Vue 2, enquanto Vue CLI é uma nova versão do Vue 3.

O Vue CLI 3 tem as seguintes melhorias em comparação com o Vue CLI 2:

• Ele usa um mecanismo de plug-in moderno para tornar a expansão e a personalização mais flexíveis e fáceis.

• Uma interface gráfica é fornecida através da UI Vue CLI para facilitar a configuração e o gerenciamento do projeto.

• Introduzido o Vue CLI Service, que é uma ferramenta de construção subjacente extensível que integra ferramentas de construção e desenvolvimento comumente usadas.

• Suporta novos recursos do Vue 3, como API de composição e novo ciclo de vida.

Portanto, para projetos Vue 3, é recomendado usar o Vue CLI para inicialização e gerenciamento do projeto.

2. Adaptação de bibliotecas de terceiros:

Com o lançamento do Vue 3, muitas bibliotecas de terceiros também estão se adaptando e atualizando para suportar os novos recursos e sintaxe do Vue 3. Algumas bibliotecas do ecossistema Vue comumente usadas lançaram versões compatíveis do Vue 3 ou forneceram guias de adaptação do Vue 3 em sua documentação oficial.

Ao utilizar uma biblioteca de terceiros, é recomendável consultar sua documentação oficial para saber se ela suporta Vue 3 e como se adaptar. Normalmente, bibliotecas de terceiros adaptadas ao Vue 3 fornecerão diretrizes específicas de instalação e uso, e pode haver algumas alterações de sintaxe e API que precisam ser observadas.

Além disso, o Vue 3 também apresenta um @vue/composition-apiplug-in oficial chamado, que pode ser usado para usar a API Composition em projetos Vue 2. Este plugin facilita a migração gradual para a API de composição do Vue 3 em projetos Vue 2.

Resumo:
Em termos de ferramentas de construção e ecossistema, o Vue 3 traz atualizações para o Vue CLI e adaptação de bibliotecas de terceiros. Recomenda-se usar o Vue CLI 3 para criar e gerenciar projetos Vue 3, e verificar a documentação oficial de bibliotecas de terceiros para saber mais sobre seu suporte e adaptação ao Vue 3. Essas melhorias permitem que os desenvolvedores aproveitem melhor os novos recursos e o ecossistema do Vue 3, melhorando a eficiência do desenvolvimento e a qualidade do código.