Что творится под капотом у vue.js?

Question

[Михаил]

Смотрю на этот кусок кода и не пойму, как мне реализовать нечто похожее:

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

Если я выполню app3.seen = false, то блок перестанет отображаться. Как сделать нечто аналогичное самому с нуля?

З. Ы. Прям рабочий пример не прошу, конечно, но хотя бы подскажите, в каком направлении копать
З. З. Ы. Пытался смотреть исходники, но так и не понял, что к чему

Answer 1

[Константин Китманов]

Если совсем вкратце, то каждое значение в data заворачивается в геттер и сеттер. Таким образом при изменении свойства у нас вызывается функция-сеттер и мы можем об этом узнать и произвести какие-то действия.

P.S. Можно еще rivets расковырять, там похожий подход, но кода поменьше.

Answer 2

[lega]

Создается проперти app3.seen при изменении которого обновляется DOM.

Comments

[Михаил]

А как происходит отслеживание изменения этого свойства?

[Алексей Ярков]

Михаил: товарищ Константин Китманов написал же - при помощи сеттера и геттера.

- - - - - - - - - - - - - - - - - - - - - - - - -

Toster Tools

https://github.com/yarkovaleksei/toster-tools