Использование идей, представленных vue3, для достижения максимально упрощенного vue с 0

Vue.js

Глоссарий

  1. Стандарты браузера: эта статья используется как собирательное название для es6, css3 и h5.

Зачем нам нужно изучать реализацию vue

Мы используем vue, потому что это одно из лучших решений в текущей индустрии, но волна итерации фронтенд-техрешений и развития промышленной стандартизации здесь, скорее всего, не дойдёт до конца во vue.

jQuery не умер, его гены были внедрены в стандарты браузеров. Вдохновение веб-компонента shadow dom также вдохновлено технологией vdom vue и react. Конечно, vue тоже развивается, но вы должны знать, что конкурентом vue является не реакция, а процесс стандартизации браузеров. Когда веб-компонент становится мейнстримом, технология vdom, о которой мы сейчас говорим, выполнила свою переходную миссию.

Поэтому у нас должно быть чувство кризиса и любопытства, и мы не можем слишком полагаться на vue. Нам нужно выяснить, какое волшебство творится в черном ящике Vue. В то же время мы также можем изучить многие современные методы разработки программного обеспечения и шаблоны проектирования, такие как tdd, шаблон агента, шаблон наблюдателя, искусство инкапсуляции и разделения.

Почему исходный код Vue трудно читать

  1. Так много функций

Цель чтения исходного кода vue — понять всю картину и реализацию некоторых основных функций, таких как двусторонняя привязка, рендеринг vnode и т. д. Исходный код Vue содержит слишком много неосновного кода, такого как keep live, динамический компонент, функциональный компонент и т. д. Это не маловажно, но нас временно не очень интересует его реализация, вмешательство этих кодов будет мешать нам понять основной части.

  1. Обратная совместимость

Исходный код Vue содержит много кода, совместимого с предыдущими версиями, но по мере того, как стандарт браузера поглощает суть основного фреймворка, а основной браузер приближается к стандарту браузера, ответственность Vue как фреймворка будет становиться все меньше и меньше. простой пример: использование ES6 Proxy для реализации двусторонней привязки намного проще, чем хак с defineProperty в Vue2.x. И когда веб-компонент созреет, vue даже не нужно будет делать vdom. Так что реализация vue3 точно будет проще, чем vue2, что официально подтверждено. Я считаю, что реализация vue4 определенно будет более упорядоченной, и эта тенденция будет продолжаться до тех пор, пока vue не сойдет со сцены истории.

Зачем писать vue с 0

Так как нам предстоит изучить реализацию Vue, а исходный код Vue содержит слишком много шума, разобраться сложно. По всей сети, хотя статьи и руководства по анализу исходного кода появляются бесконечным потоком, большинство идей все еще скрыты в сложных деталях кода vue. Итак, почему бы нам не избавиться от неинтересных функций, не заботиться о совместимости браузеров, просто использовать новейшие технологии и написать минималистичный Vue?

Этот пункт будетПубличные идеи Vue3.0, используя метод разработки через тестирование, шаг за шагом напишите минимальный Vue, и я постараюсь сделать так, чтобы каждый коммит был легко понятен. Рекомендуется выполнить следующие шаги, чтобы у вас было четкое представление о Vue.

Разработка через тестирование ~ почему?

В программной инженерии, насколько я понимаю, полностью нисходящий дизайн (водопадная модель) — устаревший подход. Даже очень большие компьютерные проекты, такие как проектирование на уровне операционной системы, реализуются по принципу макросверху вниз и микросверху вниз (гибкая разработка). TDD — это практика программирования, которая сочетает в себе верх и низ.Для каждого модуля сначала разработайте тестовые примеры, а затем напишите код для их реализации. Имеет следующие преимущества:

  1. Контролируйте качество, облегчайте регрессионное тестирование и повышайте эффективность разработки
  2. тест-кейс — это документация
  3. После чернового дизайна верхнего уровня (включая дизайн продукта и технический дизайн) вы можете начать программирование снизу вверх, избегая переходного дизайна.

шаг

Так как у tdd есть мощный тесткейс, то есть ген документа, чтобы понять, что делает каждый шаг, вам нужно только посмотреть код соответствующего тесткейса.

Каждый шаг ниже будет дан в виде diff, а при необходимости будет добавлен комментарий. Большая часть общего описания будет написана в области комментариев внизу страницы сравнения, а комментарии для определенного фрагмента кода будут перемежаться. Комментарии и вопросы приветствуются.

Этап 1: Базовый

В этой части начинаем с 0, реализуем некоторые базовые возможности, не стремимся к совершенству

  1. Создание среды TDD

  2. Агент данных

  3. реализовать $watch

  4. Рендеринг собственных HTML-элементов

  5. метод поддержки

  6. Жизненный цикл поддержки

  7. прослушиватель событий встроенного HTML-элемента

  8. реализовать мввм

  9. Достижение фазы 1: базовая демонстрация

После запуска npm run test нажмите кнопку DEBUG на всплывающей странице браузера, чтобы увидеть результат.

Фаза 2: Уточните mvvm

В этой части мы улучшаем mvvm, чтобы реализовать все функции vue2.x, а также реализовать важную функцию, предоставленную vue3.0.Официальное заявление: «Обнаружение добавления/удаления свойства».В vue2.x нам нужно использовать $ установить.

  1. [mvvm] данные поддерживают глубокие объекты

  2. [mvvm] объект в данных поддерживает новые атрибуты

  3. [mvvm] объект в данных поддерживает удаление атрибутов

  4. [mvvm] массив поддержки

  5. Результаты этапа 2: демонстрация mvvm в деталях

После запуска npm run test нажмите кнопку DEBUG на всплывающей странице браузера, чтобы увидеть результат.

  1. Простой рефакторинг и дополнительные комментарии

Настройте свое настроение, а затем вперед

Фаза 3: Вспомогательные компоненты

  1. атрибут поддержки

  2. Реализовать отрисовку компонентов

  3. Реализовать событие и действие

Этап 4. Вычисление и просмотр

  1. вычисляемое свойство

  2. реализовать часы

  3. Рефакторинг: элегантная реализация прокси и сбора зависимостей

  4. Реализовать $nextTick

  5. Реализовать планирование Watcher

Чтобы решить проблему, связанную с тем, что изменение нескольких данных вызовет несколько рендеров.

var cb = jasmine.createSpy('cb');

var vm = new Vue({
  data () {
    return {
      a:1,
      b:2,
    }
  },
  render (h) {
    cb()
    return h('p', null, this.a + this.b)
  }
}).$mount()

expect(cb).toHaveBeenCalledTimes(1)

vm.a = 10
vm.b = 11
setTimeout(_ => {
  expect(cb).toHaveBeenCalledTimes(2) // change 'a' and 'b' only trigger one render
  done()
})

Todo list

  1. Patch

  2. Scoped Slot

Пополнить

virtual dom vs shadow dom

Вышеизложенное немного сбивает с толку о виртуальном доме и теневом доме, Чтобы не вводить вас в заблуждение, вот две рекомендуемые статьи.

  1. velopersonal.com/shadow-Дом-…

  2. svelte.Dev/blog/vi Рисунок A…

Поэтому есть две возможности развития vue в будущем:

  1. Он также может делать виртуальный дом, но виртуальный дом на самом деле будет отображаться как веб-компонент, и теперь css vue с ограниченной областью действия также будет заменен теневым домом.

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

Другие статьи автора

  1. Принцип наследования классов ES6 и дефекты
Категории