Vuejs가 캐싱에 대한 계산된 속성의 저하를 어떻게 아는가?

Vuejs가 캐싱에 대한 계산된 속성의 저하를 어떻게 아는가?

나는 Vue.js 코드를 가지고 있다.

new Vue({
  data:{
         myValue:'x',
         myOtherValue:'y'
  },
  computed: {
       myComputed: myFunction(){
          return this['my' + 'Value']
       }
  }
})

당신이 보듯이computed 속성이며 단지 지금에 의존해는 캐시에 저장될 것이다.data.myValue. 내 질문은 어떻게 Vue.js 캐싱 시스템을 다시 받아야 하는 경우에만 계산된 기능 알고 있다.myValue바뀌나요?

만약 내가 바꾼다myOtherValue변수,myComputed기능, 그리고 다시 실행하지 않습니다 이렇게 부를 캐시를 사용할 것이다.

나는 그것이 어떻게 가능한지 몇 가지 방법을 생각해 보았다.하지만 부에즈는 어떻게 그럴까?나는 이 기사를 읽었다: https://vuejs.org/v2/guide/computed.html 그러나 아무런 대답도 찾지 못했다.

그리고 이 코드에서는 어떤 일이 일어나며, 어떤 코드에서 그것이 감퇴될 것인가?

const flag=2
new Vue({
  data:{
         myValue:'x',
         myOtherValue:'y'
  },
  computed: {
       myComputed: myFunction(){
          if (flag==1){
              return this['my' + 'Value']
          }
          else
              return this['my' + 'Other' + 'Value']
       }
  }
})

보너스: VueJS 코드의 관련 기능에 링크해 주면 고맙겠다. https://github.com/vuejs/vue

vue.js는 어떤 종속성이 어떤 계산된 속성에 영향을 미치는지 어떻게 아는가 하는 특정한 질문만 다룰 것이다.

간단한 대답은 vue가 계산된 속성을 평가할 때마다 해당 호출의 범위에서 액세스한 모든 반응적 속성의 지도를 만든다는 것이다.다음에 이러한 반응적 속성이 변경될 때 계산된 속성의 재평가를 촉발할 것이다.

가장 최근에 계산된 속성의 평가 동안에 반응하는 의존성 중 하나가 (아마도 if/else 구조의 비이동 경로 내에 있기 때문에) 도달하지 못할 경우, 그 반응하는 속성에 대한 후속 변경은 계산된 속성의 재평가를 유발하지 않을 것이다.

이 바이올린에 있는 두 개의 반응성 속성을 수정하여(해당 입력란에 간단히 입력하여) 이 동작을 관찰하십시오.몇 가지 유의할 사항:

• 그calledComputed 속성 한번 문서 하중(때문에 템플릿으로 만들어진 것이 촉발된 것)에 평가된다.
• 때문에path로 설정됩니다.1는 종속성으로 매핑 될 것이다는 반응성 속성입니다.val1결과 응답의 검증을 유발할 수 있다. 하게 되는 유일한 사람이다.called때 변한다.의 가치val2또한 그 같은 효과를 주지 않을 것이다를 바꿀 수 있을까요called, 비록 명백한 기능 안에 바로 있습니다.
• 당신이"변경 경로"button,을 클릭합니다.path에서 토글1로.2.
• 경로 스위치 바로 이후 변화 스위치 경로에 직후에 다음 항목에 대한 변경 사항에 주목한다.val1영향을 미칠 것이다에 영향을 미칠 것이다called한번만 더.한 번만 더 왜냐하면 왜냐하면path하기로되어로 설정한 있다2그 이전에는 지난 검증에,마지막 재평가 전에.val1그리고도달할 수 없으며 의 종속성으로 매핑되지 않을 것이다의 종속성으로 매핑 되지 않을 것이다 연결 가능하지 않을까.called더 이상.그 가치를 더 이상 변화들 그 가치에 대한 후속적인 변경은 다음의 재평가를 유발하지 않는다의 검증을 유발하지 않을 것이다.called그 이후.그 때부터 하지만 그러나val2지금현재 의의매핑되어 있다 종속성으론 의존으로 매핑 된 적이 있다.called그리고 그것에 변화가 검증들이 그리고그것에 대한 변경은 그들이를 것과 같은 방식으로 재평가를 유발한다에 똑같은 방식을 유발하다.val1예상보다 일찍.예상보다 일찍다음 경로가 다음 경로에서 전환될 때까지 그렇게 될 것이다.2로 돌아가다.1.

여기 암호가 있다.

let path=1
let count=0
const vm=new Vue({
  el:"#app",
  data:{
         val1:null,
         val2:null,
  },
  computed: {
       called: function(){

            if (path==1){
              this.val1
            }
            if (path==2){
                this.val2
            }
            return "I was just called "+ ++count +" times"
       }
  },
  methods: {
    changePath(){
        path = path==2 ? 1 : 2
    }
  }
})

및 해당 템플릿

<div id="app">
  <input v-model="val1"/> {{val1}}
  <br>
  <input v-model="val2"/> {{val2}}
  <br>
  <button @click="changePath">change path</button>
  <br>
  {{ called }}
</div>

그것은 캐싱 시스템이 아니라 Vue.js의 반응성 시스템이다.

구성 요소의 데이터는 게이터와 세터로 변환된다.게터를 통해 값에 액세스하면 게터가 종속성에 추가하고, 세터를 통해 값을 수정하면 세터가 값에 의존하는 모든 사람에게 통지한다.

여기 소스 코드가 있다. 모든 마법은 이 기능에서 일어난다: https://github.com/vuejs/vue/blob/dev/src/core/observer/index.js#L131

문서에는 다음과 같이 나와 있다: 계산된 속성은 캐시되며, 사후 대응적 종속성 변경에 대해서만 재계산된다.그러나 다음의 바이올린들은 조금 다른 것을 보여준다.

1. https://jsfiddle.net/z11fe07p/267/

에서 2로 myOtherValue그러나 깃발을 1로 설정하면 이런 일이 발생하지 않는다.나는 그것이 너의 상태를 계속 추적하고 있다고 생각한다.

문서에서는 일반적으로 관련 소스 코드에 대한 링크를 찾을 수 있다.다음은 계산된 속성에 대한 코드:

• https://github.com/search?utf8=%E2%9C%93&q=repo%3Avuejs%2Fvue+extension%3Ajs+%22computed%22&type=Code

참조URL: https://stackoverflow.com/questions/41542989/how-vuejs-knows-the-depenedencies-of-computed-property-for-caching