Vue의 데이터가 변경되었지만 렌더링되지 않는 문제, 페이지가 자동으로 업데이트되지 않지만 콘솔에서 인쇄할 수 있는 문제, 일반적인 솔루션

Vue 컴포넌트에서 Mounting 단계에서 비동기 데이터를 요청하는 함수를 호출했는데 반환된 결과가 데이터에 있는 값에 할당되었으나 실패했고, 할당 후 console.log()에 분명히 값이 있었지만 페이지는 업데이트되지 않았습니다. . 나는 항상 그것이 nuxt 수명주기의 이유라고 생각했지만 분명히 그렇지 않았습니다. 이 문제는 가끔 발생하기 때문에 페이지의 모든 렌더링에서 이 문제가 발생하지는 않습니다.

1. 간단하고 무례한 방법 : 전체 페이지 새로고침(불친절한 경험, 권장하지 않음)

2. 나쁜 방법: 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. 더 나은 방법: Vue의 내장 forceUpdate 메서드 사용

• Vue 인스턴스를 강제로 다시 렌더링합니다 . 모든 하위 구성 요소 가 아니라 인스턴스 자체 와 슬롯 콘텐츠에 삽입된 하위 구성 요소 에만 영향을 줍니다 .

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

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

4. 가장 좋은 방법: 구성 요소의 주요 변경 사항 적용

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


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

5. Object.assign() 사용

MDN: Object.assign() 메서드는 하나 이상의 소스 개체에서 대상 개체로 열거 가능한 모든 속성 의 값을 복사하는 데 사용됩니다. 대상 객체를 반환합니다 .

방법:

• 객체를 복제하려면 Object.assign({}, target)

• 배열을 복제하려면 Object.assign([], target)
  위 예제의 add 메서드를 수정합니다.

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

6. Vue.set( target , key , value) 사용

방법:

target: 변경할 데이터 소스(객체 또는 배열일 수 있음)
key 변경할 특정 데이터. 배열 요소 변경인 경우 key는 인덱스를 나타내고 객체인 경우 key는
키 값의 재할당 값을 나타냅니다.

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

7. ... 확장 구문

• 객체 데이터 obj, obj = {...obj} 사용

• 배열 arr의 경우 arr = [...arr]을 사용합니다.

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