vue.js реактивность, как класс зависимостей может иметь много подписчиков-наблюдателей

Question

Как вы знаете, для каждого свойства данных создается класс new Dep. Each Dep класс имеет подписчиков watchers.

Я просмотрел исходный код vue.js и для каждого компонента создается только ОДИН watcher класс, который также содержит функцию render (шаблон компонента).

1) Не могли бы вы описать ситуацию, когда и почему свойство data одного из компонентов может иметь класс Dep, который имеет более одного класса watcher?

2) Итак, я могу подвести итог примерно так: если у нас есть компонент, который имеет 5 data свойств. каждое из этих 5 свойств данных имеет свой экземпляр класса Dep. и каждый из этих классов Dep имеет тот же Watcher, а watcher содержит функцию render компонента. Если состояние изменяется, запускается одно из этих уведомлений класса 5 Dep, и это уведомление запускает свою функцию watcher's render?

Answer 1

Вы можете найти это введение полезным:

https://medium.com/dailyjs/tracing-or-debugging-vue-js-reactivity-the-computed-tree-9da0ba1df5f9

Как вы упомянули, каждое свойство данных будет иметь свой собственный экземпляр Dep. Каждый Dep имеет свойство subs, которое содержит массив подписчиков. Все подписчики в этом массиве будут экземплярами класса Watcher. Если свойство данных изменяется, то соответствующий Dep уведомит каждого Watcher в своем subs.

Каждый Watcher также содержит ссылки на свои зависимости в свойстве с именем deps. Это просто массив объектов Dep, на которые подписан Watcher.

Вы сможете увидеть это в инструментах разработчика вашего браузера. Если вы зарегистрируете экземпляр Vue, вы обнаружите свойство с именем _watchers, которое содержит все наблюдатели, связанные с этим компонентом. Расширение их deps приведет вас к Dep объектам, хотя сложно определить, какое именно свойство данных представляет Dep.

Процесс рендеринга имеет Watcher, который он использует для отслеживания своих зависимостей данных. Вы получите только один из них для каждого экземпляра компонента.

A Watcher также создается, если вы используете часы или $ часы . Снова вы сможете увидеть их в _watchers.

Вычисляемые свойства имеют по одному Watcher каждое. Они будут присутствовать в массиве _watchers, но их легче увидеть в _computedWatchers.

Ключевым моментом, который следует отметить, является то, что зависимости сглаживаются. Если вы используете вычисляемое свойство, вы на самом деле просто получите зависимость от всех свойств данных, которые в него повлияли. Вы не можете сформировать прямую зависимость от самого вычисляемого свойства.

Итак, вернемся к исходному вопросу:

1. Рендеринг, вычисленные свойства и watch будут вносить вклад в subs из Dep. Вычисленные свойства часто приносят больше подписчиков, чем можно было ожидать из-за сглаживания зависимостей.
2. Почти. Функция render не вызывается напрямую. Когда Watcher для рендеринга уведомляется об изменении данных, он фактически просто добавляет компонент в очередь. Эта очередь рендеринга не будет обработана до начала следующего тика.