Подтвердить что ты не робот

Использует ли Angular 2 Shadow DOM или Virtual DOM?

Что использует Angular 2 для обновления DOM. Это Shadow DOM или Virtual DOM? Было ли такое понятие в Angular 1?

Ответ 1

Angular2 не использует тень DOM (по умолчанию) и виртуальный DOM.

С encapsulation: ViewEncapsulation.Emulated (по умолчанию) нет shadow DOM, потому что инкапсуляция стиля только эмулируется.

encapsulation: ViewEncapsulation.Native позволяет теневое DOM в браузерах, которые поддерживают его изначально или снова эмулируются при загрузке веб-компонентов polyfill.

Shadow DOM также не нацеливается на производительность, поскольку виртуальная DOM есть, но инкапсуляция стиля.

Angular2 вообще не использует виртуальный DOM.

Angular2 имеет обнаружение изменений, которое обнаруживает изменения в модели и только обновляет части DOM, которые необходимо изменить в соответствии с изменениями модели.

Для получения дополнительной информации см. также Является ли shadow DOM быстрым, как Virtual DOM в React.js?

Ответ 2

Больше внимания уделяется Angular2 + свойству ViewEncapsulation.

Рассмотрим следующий ниже код. Здесь мы имеем css-класс ( "test" ), который определяется как глобальный (index.html), так и inline (app.component.ts). Посмотрите, как ведет себя DOM при переключении на несколько свойств ViewEncapsulation:

Пример кода:

     //index.html
....
<style>
  .test {background: green;}
</style>
....
<body>
  <div class="test">Test!</div>
    <my-app>
      Loading...
    </my-app>
</body>
....

 //app.component.ts

@Component({
 selector: 'my-app',
 encapsulation: ViewEncapsulation.Emulated,
 styles: [`
   .test {
     padding: 40px;
  }
`],
 template: `
   <div class="test">
     <div> Title: {{ title }} </div>
     <input type="text" [(ngModel)]="title">
    </div>
  `
})

а. ViewEncapsulation.Emulated(по умолчанию)

Создает _nghost и _ngcontent как атрибуты и css, например .test [_ngcontent-cmy-1]. Это эмуляция инкапсулированных стилей, поскольку Angular генерирует уникальные ключи контента для компонента, которые сопоставляются с свойствами CSS. Это мощно!!!
Итак, если у нас есть противоречивое свойство css, он всегда будет использовать один определенный внутри компонентный файл не глобальный
Если не конфликтует, он будет использовать глобальный стиль для этого класса + встроенный стиль из компонента
Это означает, что CSS, который мы пишем глобально, наследует, однако стили, определенные с использованием одного и того же класса внутри Компонента, будут локально привязаны только к этому компоненту.

б. ViewEncapsulation.Native

Он не будет использовать глобальные атрибуты css для этого класса.
Значит, что CSS, который мы пишем глобально, не наследует, однако стили, определенные с использованием одного и того же класса внутри Компонента, будут локально привязаны только к этому компоненту, что точно соответствует ожидаемому с помощью Shadow DOM.
Он генерирует теневое dom, которое подобно DOM внутри DOM, и что dom, созданный с помощью Angular, защищен, а все внутри ▾ # shadow-root - это Shadow DOM, сам по себе и отдельное дерево DOM. Именно поэтому стили arent наследуют!
Таким образом, он всегда будет использовать компонентный стиль, независимо от того, конфликтует или нет.

с. ViewEncapsulation.None

Это означает, что CSS, который мы пишем глобально, наследует, однако стили, определенные с использованием одного и того же класса внутри Компонента, переопределяют существующий стиль.
Ничего особенного здесь.

Ответ 3

React и Vue используют Virtual DOM и Angular используют систему прямого рендеринга DOM.

Это то же самое, что Angular сделал с версией 1.x, но он оптимизирован и для вас есть сюрприз :)

Работать с объектами JavaScript намного быстрее, чем с DOM, потому что на экране ничего не тонет