♥ vue의 $forceUpdate()

♥ vue의 $forceUpdate()

1. 알아두세요

구성 요소를 강제로 다시 렌더링합니다.
Vue의 완전 자동 응답 시스템을 고려할 때 이 기능은 거의 사용되지 않아야 합니다.

$forceUpdate()는 vue 인스턴스가 가상 DOM을 다시 렌더링하도록 강제합니다. 구성 요소를 다시 로드하지 않는다는 점에 유의하세요.

Vue의 라이프사이클과 결합하여 $forceUpdate를 호출한 후 beforeUpdate와 업데이트라는 두 가지 후크 함수만 트리거되고 다른 후크 함수는 트리거되지 않습니다.

모든 하위 구성 요소가 아닌 인스턴스 자체와 슬롯 콘텐츠에 삽입된 하위 구성 요소에만 영향을 미칩니다.

2. 사용

Vue2의 객체 및 배열에 대한 일부 특수 작업으로 인해 뷰가 업데이트되지 않습니다. 변경 사항 감지에 대한 참고 사항 -
이 시점에서 Vue2.js를 사용할 수 있습니다.

객체의 속성이 데이터에 명시적으로 선언되지 않았지만 나중에 객체에 속성이 추가되는 경우, 이 경우 Vue는 데이터 변경을 감지할 수 없으며 $forceUpdate()를 사용할 수 있습니다.

html:

<span class="test">{
    
    {
    
    egData.value}}</span>
<el-button @click="changeData">改变</el-button>

js:
egData: {
    
    }

...

changeData () {
    
    
    this.egData.value = 'oldValue'
    this.$forceUpdate()  // dom会更新
}

注意：

이 접근 방식은 권장되지 않습니다. 관계자는 현재 장면에서 forceUpdate 메서드를 사용해야 하는 경우 문제의 99%는 작업으로 인한 것이라고 말했습니다. 위 데이터에서 볼 수 있듯이 선언된 개체의 속성은 그렇지 않습니다. 표시됩니다.

나중에 속성을 추가하는 올바른 방법은 vm.$set() 메소드를 사용하는 것이므로 forceUpdate를 수행하십시오 慎用.

this.$forceUpdate(); 强制刷新

같은 효과: window.location.reload()

1、$forceUpdate()

2、$세트()

3、$nextTick()