O uso de mixin no Vue

misturado

definição de mixin

1. Extraia a lógica ou configuração comum do componente. Quando for usar qual componente, basta misturar a parte extraída no componente.
   1. Pode reduzir a redundância de código
   2. A manutenção posterior é mais fácil
2. É um objeto , que pode conter algumas configurações comuns em componentes Vue , como dados, métodos, criados, etc.

A diferença entre mixins e Vuex

• Gerenciamento de estado público Vuex: Se certos dados no Vuex forem alterados em um componente, todos os outros componentes que fazem referência aos dados no Vuex também serão alterados de acordo
• mixin: dados e métodos são independentes, os componentes não afetam uns aos outros após o uso

Uso de mixins

Crie um novo arquivo mixin mixin

1. Crie um novo arquivo chamado mixin.js (qualquer nome de arquivo), defina um objeto nele, configure dados, métodos, atributos criados e outros atributos e ganchos de ciclo de vida no objeto e, finalmente, exporte o objeto
2. do seguinte modo:

   export default const mixin = {
         
         
       data () {
         
          ... },
       created () {
         
          ... },
       methods: {
         
          ... }
   }
   

Use mixins para misturar

mixins globais

1. Introduza o arquivo mixin.js em main.js

   import mixin from '...mixin.js'
   

2. Use mixin globalmente para misturar

   Vue.mixin(mixin)
   

Mistura parcial

1. Introduzir mixin.js em componentes que precisam ser misturados

   import mixin from '...mixin.js'
   

2. Use o mixin para misturar no componente, configure o atributo mixins, o valor do atributo é um array e o valor do array é o mixin importado

   mixins: [ mixin ]
   

Prioridade de mixins

1. A prioridade do mixin é dividida principalmente nas três situações a seguir:
   1. Para funções criadas, montadas e outras funções do ciclo de vida, o código no arquivo mixin.js é executado primeiro e o código no componente é executado posteriormente
   2. Para campos definidos em dados:
      1. Definições duplicadas em mixin.js e componentes: componentes definidos em componentes substituem campos com o mesmo nome em mixin
      2. Definido em mixin.js, mas não definido no componente: integre os dados de dados definidos em mixin.js e os dados de dados no componente juntos
   3. Método com o mesmo nome no método: O método com o mesmo nome no componente substitui o método no mixin

Vantagens e desvantagens dos mixins

vantagem

• Melhorar a reutilização do código
• Não precisa passar de estado
• Fácil de manter, só precisa modificar um lugar

deficiência

• propenso a conflitos de nomes
• Se abusado, será difícil manter mais tarde
• Não é fácil rastrear a fonte e é um pouco problemático solucionar o problema