Виртуальный DOM Vue (vdom)

Vue.js
Виртуальный DOM Vue (vdom)

предисловие

Следующее содержание является кратким изложением некоторых личных знаний.Если что-то не так, пожалуйста, поправьте меня.

1. Реальный DOM и процесс рендеринга

Прежде чем мы начнем с виртуального DOM, давайте взглянем на настоящий DOM и на то, как его анализирует браузер. Рабочий процесс браузерного движка рендеринга можно условно разделить на следующие четыре категории:Создать дерево DOM -> сгенерировать дерево рендеринга -> дерево рендеринга компоновки -> нарисовать дерево рендеринга

  1. Создание дерева DOM: анализ HTML для создания дерева DOM. Механизм рендеринга сначала анализирует документ HTML для создания дерева DOM. Используйте анализатор CSS для анализа встроенных стилей в файлах и элементах CSS и создания таблиц стилей для страниц.
  2. Создайте дерево рендеринга: свяжите дерево DOM и таблицу стилей, чтобы построить дерево рендеринга.
  3. Разметка дерева рендеринга: с деревом рендеринга браузер начинает обрабатывать макет каждого узла дерева рендеринга, чтобы определить его позицию отображения на экране.
  4. Нарисуйте дерево рендеринга: пройдите по дереву рендеринга и нарисуйте каждый узел с помощью внутреннего слоя пользовательского интерфейса.
    alt

2. Виртуальный дом

1. Что такое виртуальный DOM?

При использовании нативных js или jq для управления реальным DOM браузер будет выполнять процесс от начала до конца, начиная с построения дерева DOM. Когда количество операций слишком велико, предыдущий расчет значений координат узла DOM и т. д. является пустой тратой времени, и рождается виртуальный DOM.

2. Каковы преимущества виртуального DOM?

Предполагая, что существует 10 действий по обновлению DOM за одну операцию, виртуальный DOM не будет работать с DOM немедленно, а сохранит разное содержимое этих 10 обновлений в локальный объект JS и, наконец, прикрепит объект JS к дереву DOM в один раз. , а затем выполнять последующие операции, чтобы избежать большого объема ненужных вычислений. Таким образом, преимущество использования JS-объектов для имитации узлов DOM заключается в том, что обновления страниц могут полностью отражаться сначала на виртуальном DOM, а скорость работы JS-объектов в памяти, очевидно, выше.После завершения обновления конечные JS-объекты отображается в Реальный DOM передается браузеру для рисования.

3. Виртуальный DOM во Vue

alt

  • функция рендеринга: Функция рендеринга используется для создания виртуального DOM. Vue рекомендует использовать шаблоны для создания интерфейсов приложений.В базовой реализации Vue компилирует шаблоны в функции рендеринга.
  • Виртуальный узел Vnode: он может представлять собой настоящий узел dom. Узел vnode преобразуется в узел dom с помощью метода createElement.
  • patch: основная часть виртуального DOM, он может преобразовать vnode в реальный DOM.Этот процесс заключается в сравнении различий между старыми и новыми виртуальными узлами, а затем обновлении узлов, которые необходимо обновить, в соответствии с результатами сравнения.

Справочная документация:

ps: У автора ограниченные возможности, простите меня за то, что я не очень хорошо понимаю исходный код патча! Я хотел бы попросить Ю Юй Си встать передо мной на колени.

4. Смоделируйте виртуальный DOM Vue

1. Установите каркас vue-cli и разверните среду vue.

Здесь вы можете установить его самостоятельно.

2. Создайте виртуальное дерево DOM

Сначала реализуйте создание виртуального дерева DOM в файле element.js.

// element.js

// 虚拟DOM元素类，用来描述DOM
function Element(type, props, children){
  this.type = type; //节点类型
  this.props = props; //属性
  this.children = children; //子节点
}
// 创建虚拟DOM
function createElement(type, props, children){
  return new Element(type, props, children);
}
//向外输出
export {
  Element,
  createElement
}

Мы подошли к файлу App.vue и вызвали метод createElement для создания DOM-объекта.

//App.vue
import {createElement} from './js/element.js'

let V_DOM = createElement('ul',{class:'list'},[
  createElement('li', {class:'item'},['item1']),
  createElement('li', {class:'item'},['item2']),
  createElement('li', {class:'item'},['item3'])
])
//打印虚拟DOM
console.log(V_DOM);

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

Давайте посмотрим на виртуальный DOM, напечатанный в браузере.

alt

3. Смоделируйте функцию рендеринга для рендеринга виртуального DOM.

// element.js

function render(dom) {
  // 根据type类型来创建对应的元素
  let el = document.createElement(dom.type);
  
  // 再去遍历props属性对象，然后给创建的元素el设置属性
  for (let key in dom.props) {
      // 设置属性的方法
      el.setAttribute(key, dom.props[key]);
  }
  
  // 遍历子节点
  // // 如果子节点也是虚拟DOM，递归构建DOM节点
  // 不是就代表是文本节点，直接创建
  dom.children.forEach(child => {
      child = (child instanceof Element) ? render(child) : document.createTextNode(child);
      // 添加到对应元素内
      el.appendChild(child);
  });

  return el;
}

//向外输出
export {
  Element,
  createElement,
  render,
}

Вернитесь в App.vue и позвонитефункция рендеринга

import {createElement, render, renderDom} from './js/element.js'

let V_DOM = createElement('ul',{class:'list'},[
  createElement('li', {class:'item'},['item1']),
  createElement('li', {class:'item'},['item2']),
  createElement('li', {class:'item'},['item3'])
])
//打印虚拟DOM
console.log(V_DOM);
var el = render(V_DOM);
console.log(el);
document.body.appendChild(el);

Давайте посмотрим на рендеры.

alt
Настоящая структура DOM создается и затем отображается на странице.
alt
Что ж, мы реализовали смоделированный виртуальный DOM и отрендерили его. Алгоритм сравнения и алгоритм исправления являются основными частями виртуального DOM, и автор все еще находится на стадии обучения. Рекомендовать здесьСокровищница, вот более подробный разбор алгоритма виртуального DOM.

напиши в конце

Если статья неверна или неуместна, пожалуйста, поправьте меня, спасибо.

Категории