Как Vue JS находит зависимости computed?

Question

[Егор Данченко]

Есть у меня вычисляемое свойство "posts", которое возвращает записи, в зависимости от поисковой строки. Ранее я думал, что computed находит зависимости только исходя от оператора return. К примеру (т.е. зависимости this.firstName и this.lastName):

const fullName = computed(() => this.firstName + ' ' + this.lastName)

Но вот незадача, вычисляемой свойство "posts" вызывается при изменении store.state.search.query (строка, содержащая запрос). И такой вопрос, как он знает об этой зависимости, если она указана только в теле свойства. Самое интересное, что если этой строки (store.state.search.query) нет в теле, то вычисляемой свойство не вызывается (проверял через консоль). Также вот ссылка на репозиторий. Раскройте магию, пожалуйста :)

const posts = computed(() => {
  const query: string = store.state.search.query

  if (query) {
    return store.state.posts.filter((post: IPost) => {
      return query
        .toLowerCase()
        .split(' ')
        .every((v) => post.title.toLowerCase().includes(v))
    })
  }

  return store.state.posts
})

Answer 1

[Дмитрий Беляев]

Все реактивные свойства объекта Vue оборачивает в геттеры и сеттеры.
Computed - это тоже по сути геттер, правда Vue его еще и своим кодом оборачивает.
Перед кажым запуском computed Vue помещает в особую переменную функцию для инвалидации текущего computed, а перед выходом восстанавливает значение, которое там было до.
Каждый геттер вызванный внутри computed просто запоминает себе в массив функцию инвалидации, а в сеттере дергает ее, сообщая тем самым computed свойству, что его зависимость изменилась.
Это очень упрощенная схема, так как на деле все немного сложнее. Но в общих чертах, Vue просто знает какие геттеры были вызваны при последнем вызове computed и при вызове соответствующих этим геттерам сеттеров пересчитывает computed.

Comments

[Егор Данченко]

Спасибо! Теперь все понятно :)