Каким образом работает рендеринг в Vue.js и Angular?

Question

[ar5]

Здравствуйте, друзья, подскажите каким образом работает рендерниг в Vue.js?
React использует сравнения virtual dom c реальным. То есть вызывается метод this.setState()
А какие техники используются в Angular и Vue для рендеринга?

Answer 1

[alvvi]

Vue тоже использует Virtual DOM.
А вот что делает Angular

Angular uses a different strategy. We keep track of the old values for every binding to the view, and so we can detect which pieces of the view changed and update them in the real DOM.
Virtual DOM diffs the view, angular diffs the model.
From a performance standpoint neither approach is strictly better than the other. There are certain scenarios in which either approach has a slight advantage.

Comments

[ar5]

А тогда каким образов отслеживает изменения. Допустим изменил в массиве объектов внутри изменил значение. Получается у него глубокое отслеживаеие? Ведь в реакте ты явно говоришь что я изменил состояние

[alvvi]

ar5: это называется two-way data binding, загуглите
https://stackoverflow.com/questions/34519889/can-a...

[ar5]

Илья Ростопка: спасибо, это конечно понятно, но допустим в angularjs были digdest циклы. А по какому принципу работает двусторонний байндинг в вуэ. Видел что используются обсерверы. Спасибо за ответы

[alvvi]

ar5: не пишу на vue, поэтому рассказать подробно не могу, но тут страница в документации вроде бы как раз на эту тему https://vuejs.org/v2/guide/reactivity.html

(почему то выкидывает 404, вот закэшированная гуглом версия)

[ar5]

Илья Ростопка: спасибо, изучил данный вопрос и оказалось, что все геттеры и сеттеры в глубину переписываются, а если достаточно большой объект разве не будет влиять на производительность?

[alvvi]

ar5: компонентный подход поощряет избегание больших объектов. А если объект разделен на много мелких, то тут уже больше влияние на inital render, да, его время может увеличиться. Cами апдейты становятся мелкими благодаря diff'у Virtual DOM и это не особо влияет на производительность.

[ar5]

Илья Ростопка: просто если у меня бизнес приложение и мне приезжает json приличного размера и вложенности повлияет это на производительность ведь? Обнлвдение dom понятно по какому принципу производятся

[alvvi]

ar5: еще раз: повлияет на первый рендер(что вполне логично), но не на остальные обновления, если вы все не делаете в одном монолитном компоненте.

Answer 2

[Evgeny Kulakov]

Всё здесь: https://ru.vuejs.org/v2/guide/reactivity.html