Как vuejs знает, какие функции вычисляемого свойства кэшируются?

У меня есть этот код Vue.js:

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

Как вы можете видеть, вычисленное свойство будет кэшироваться, и оно зависит только от data.myValue. Мой вопрос в том, как система кэширования Vue.js знает, что запустить вычисленную функцию снова, только если myValue изменено?

Если я изменю переменную myOtherValue, функция myComputed будет использовать кеш и не будет запущена снова, я ее вызову.

Я думал о нескольких способах, как это возможно. Но как Vuejs это делает? Я прочитал эту статью: 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

Ответы

Ответ 1

Это реакционная система Vue.js, а не система кэширования.

Данные в компоненте будут преобразованы в геттеры и сеттеры. Когда вы получаете доступ к значению через геттер, получатель добавляет его в зависимости, а когда вы изменяете значение через сеттер, сеттер будет уведомлять всех, кто зависит от значения.

Вот исходный код, все волшебство происходит в этой функции: https://github.com/vuejs/vue/blob/dev/src/core/observer/index.js#L131

Ответ 2

В документах он гласит: Вычислимые свойства кэшируются и только пересчитываются при изменении реактивной зависимости. Однако следующая скрипка показывает что-то немного другое.

Из скрипты, если вы установите флаг в 2, вычисленное свойство будет переоценено и выполнено, если вы измените myOtherValue, однако это не произойдет, если флаг установлен на 1. Я думаю, что он отслеживает ваши условия if.

В документах обычно вы можете найти ссылки на соответствующий исходный код. Вот код для вычисленных свойств: