O problema que os dados no Vue são alterados, mas não renderizados, a página não é atualizada automaticamente, mas pode ser impressa no console, soluções comuns

No componente Vue, uma função foi chamada para solicitar dados assíncronos na fase montada, mas o resultado retornado foi atribuído ao valor em data, mas falhou. Após a atribuição, console.log() obviamente tinha valor, mas a página não era atualizado. . Sempre pensei que fosse o motivo do ciclo de vida nuxt, mas obviamente não. Como esse problema ocorre apenas ocasionalmente, nem toda renderização da página terá esse problema.

1. Maneira simples e rude : recarregue a página inteira (experiência hostil, não recomendada)

2. Mau caminho: use v-if

<template>
  <my-component v-if="showComponent" />
</template>

<script>
  export default {
    data() {
      return {
        showComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // 从 DOM 中删除 my-component 组件
        this.showComponent = false;
        
        this.$nextTick(() => {
          // 在 DOM 中添加 my-component 组件
          this.showComponent = true;
        });
      }
    }
  };
</script>

3. Um método melhor: use o método interno forceUpdate do Vue

• Força a instância do Vue a renderizar novamente . Observe que isso afeta apenas a própria instância e os subcomponentes inseridos no conteúdo do slot , não todos os subcomponentes.

// 全局
import Vue from 'vue';
Vue.forceUpdate();

// 使用组件实例
export default {
  methods: {
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();
      // ...
    }
  }
}

4. A melhor maneira: fazer alterações importantes nos componentes

<template>
  <component-render :key="componentKey" />
</template>


export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}

5. Use Object.assign()

MDN: O método Object.assign() é usado para copiar os valores de todas as propriedades enumeráveis ​​de um ou mais objetos de origem para um objeto de destino. Ele retornará o objeto de destino .

método:

• Para clonar um objeto, Object.assign({}, target)

• Para clonar um array, Object.assign([], target)
  modifique o método add para o exemplo acima.

this.queryParam = Object.assign({}, this.queryParam);

6. Use Vue.set(alvo, chave, valor)

método:

target: A fonte de dados a ser alterada (pode ser um objeto ou um array)
key Os dados específicos a serem alterados. Se for uma mudança de elemento de array, a chave representa o índice; se for um objeto, a chave representa o
valor reatribuído do valor da chave

add() {
      this.$set(this.persons, 1, {key: 'newkey', name: '888'})
      console.log(this.persons)
    }

7. ... sintaxe de expansão

• Objeto de dados obj, use obj = {...obj}

• Para uma matriz arr, use arr = [...arr]

add() {
      this.persons[1] = {key: 'newkey', name: '888'}
      this.persons = [...this.persons]
      console.log(this.persons)
    }