구성 요소가 불필요한 종속성을 수집하지 못하도록 하는 방법

구성 요소가 불필요한 종속성을 수집하지 못하도록 하는 방법

내포된 상태에 기반을 둔 구성요소가 있다.예시

<rect width="some.deep.state.width">

이 경로의 물체가 변경될 때마다(새로 설정되지 않음) 변경된 것이 없는데도 구성 요소는 다시 렌더링한다.

예를 들어 다음과 같은 경우 렌더링으로 이어진다.

Vue.set(some.deep, 'newProp', something)

특히 스토어에서 중첩 상태를 사용하고 일부 배열 값이 변경되는 경우 이는 매우 바람직하지 않다고 생각할 수 있다.

나의 경우 I의 경우, 내 상점에 여러 개의 엔티티를 저장하고, 그 엔티티의 새 인스턴스가 추가될 때마다 그 엔티티에 기반한 모든 구성요소는 변경되지 않았더라도 리렌더한다.

그렇다면 이 (기술적) 디포(pun 의도된)의 수집을 막을 수 있는 방법이 있는가?어떤 메커니즘에 의해 Vue가 디포를 수집하는 것을 막을 수 있을까?

PS: 알아, 이 메커니즘은 다른 곳에서도 유용해.내 경우에는 바라지 않는다.

콘솔에서 해당 동작을 표시하는 코드 및 상자: https://codesandbox.io/s/vuejs-playground-forked-sx534?file=/filename/hello.js

인라인 예 - 업데이트가 트리거됨:

const app = new Vue({
  el: '#app',
  data: function () {
    return { some: { nested: { prop: 6 }}}
  },
  created: function () {
    console.log('component created')
    
    setTimeout(function () {
    
      Vue.set(this.some, 'otherProp', 10)
    
    }.bind(this), 2000)
  },
  updated: function () {
    console.log('component updated')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 Prop: {{ some.nested.prop }}
</div>

나는 이 문제가 구성요소가 불필요한 의존성을 수집하는 것을 방해하지 않는다고 생각한다.Vue 렌더워쳐 수집some.deep사용할 때 이미 종속성<rect width="some.deep.state.width">틀에 박힌실행 중Vue.set(this.some.deep, 'newProp', something)수집된 모든 것을 통지할 것some.deep렌더와쳐를 트리거할 렌더와쳐를 포함하는 watcher.

난 네가 렌더링하지 못하도록 하는 해킹 솔루션을 가지고 있어.

const app = new Vue({
  el: '#app',
  data: function () {
    return { some: { deep: { prop: 6 }}}
  },
  created: function () {
    console.log('component created')
    
    setTimeout(function () {
      console.log('trigger rerender?')
      Vue.set(this.some, 'otherProp', 10)
      this.preventRerender()
    }.bind(this), 2000)
  },
  render(h) {
    console.log('render')
    return h('div', this.some.deep.prop)
  },
  methods: {
    // keep calling at the code end
    preventRerender() {
      this._watcher.active = false
      this.$nextTick(() => {
        this._watcher.active = true
      })
    }
  }
})

업데이트된 후크가 여전히 트리거됨을 알아야 한다.

결국 내가 하게 된 방법은 깊이 내포되어 있는 성질을 보는 것이었다.내가 질문에서 설명한 변경사항에 대해서는 시청자들이 등록을 하지 않는 것 같다.따라서 나는 템플릿에서 사용할 수 있는 구성요소에 속성을 설정하는 모든 속성에 대해 감시자를 추가했다.

이를 통해 불필요한 재렌더 문제를 해결했지만 가치관이 바뀌는 복수의 관찰자가 동시에 리렌더를 촉발하는 것으로 나타났다.모든 관찰자가 하나의 돔 사이클에서 실행되므로 한 번의 리렌더만 실행해야 하기 때문에 이것은 이상하다.그 이유를 아는 사람이 있다면, 얼마든지 자세히 설명하십시오!

const app = new Vue({
  el: '#app',
  data: function () {
    return {
      some: { nested: { prop: 6 }},
      theProp: null
    }
  },
  created: function () {
    console.log('component created')
    
    this.$watch(() => this.some.nested.prop, (newValue) => this.theProp = newValue, {immediate: true})
    
    setTimeout(() => {
    
      // Does not triggers update
      Vue.set(this.some, 'otherProp', 10)
    
    }, 2000)
    
    setTimeout(() => {
    
      // Triggers update
      this.some.nested.prop = 10
    
    }, 4000)
  },
  updated: function () {
    console.log('component updated')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 Prop: {{ theProp }}
</div>

참조URL: https://stackoverflow.com/questions/63355747/how-to-prevent-component-from-collecting-unneccessary-dependencies