Надпись
«Тот, кто контролирует прошлое, контролирует будущее» — Джордж Оруэлл
предисловие
Личные проекты, возникшие в 2013 году, стали одним из трех трехпровольных кадров по всему миру, и он более предпочтительнее в материковом Китае.
Его дизайнерские идеи и навыки кодирования также заимствуются и имитируются многими фреймворками.
Изучение и изучение эволюции Vue — это способ для фронтенд-студентов улучшить свое понимание и уровень.
Виновный
Ø В 2013 году Юси Ю, работавший в Google, вдохновился Angular, извлек из него свои любимые части и разработал облегченный фреймворк, первоначально названный Seed.
Ø В декабре того же года это семя проросло, переименовав его в Vue, и номер версии стал 0.6.0.
Ø 2014.01.24, Vue был официально выпущен для внешнего мира, номер версии 0.8.0.
Ø 0.9.0, выпущенная 25.02.2014, имеет собственное кодовое имя: Animatrix, название происходит от анимационной версии «Матрицы», после этого важные версии будут иметь собственные кодовые имена.
Ø 0.12.0 был выпущен 2015.06.13 под кодовым названием Dragon Ball (Жемчуг дракона), в этом году Vue возвестил о большом взрыве, сообщество Laravel (популярное сообщество PHP-фреймворков) впервые использовало Vue (я также на этот форум Знай Vue), Vue также приобрел популярность в сообществе JS.
Ø 1.0.0 Evangelion (Евангелион) — первая веха в истории Vue. В том же году были последовательно выпущены vue-router (2015-08-18), vuex (2015-11-28) и vue-cli (2015-12-27), что ознаменовало разработку Vue из библиотеки слоев представления. к прогрессивной структуре. Многие студенты, изучающие интерфейс, также стали пользователями Vue с этой версии.
Ø 2.0.0 Ghost in the Shell (Призрак в доспехах) — вторая важная веха, которая поглощает решение React Virtual Dom и поддерживает рендеринг на стороне сервера.
Ø Не так давно Vue выпустила 2.6.0 Macross (Macro Fortress), версию, которая соединяет прошлое и будущее, потому что после нее тоже вот-вот выйдет 3.0.0.
1.0
Первоначальная цель Vue заключалась в том, чтобы стать хорошим дополнением к более крупным проектам. Дизайн-мышление — это «прогрессивный фреймворк»,Преуменьшение требований самого фреймворка,Уменьшите сложность фреймворка как инструмента, тем самым снижая требования к пользователям.
По сравнению с предыдущей версией основными улучшениями 1.0 являются:
1. предоставить аббревиатуру для инструкции
Приведены сокращения для v-bind и v-on:
<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>
<!-- full syntax -->
<button v-bind:disabled="someDynamicCondition">Button</button>
<!-- shorthand -->
<button :disabled="someDynamicCondition">Button</button><!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>
2. Очистить и оптимизировать предоставленный интерфейс
На данный момент цель Vue — стать облегченным фреймворком, дополняющим более крупные проекты (у которых уже могут быть свои интерфейсные фреймворки, такие как Angular).
Первое, что нужно убрать — это, конечно же, те API, которые принципиально не используются.
3. Улучшить эффективность рендеринга инициализации
Замените директиву v-repeat на директиву v-for. При этом отрисовка этой инструкции оптимизирована, а эффективность удвоена.
4. Усовершенствования двух официальных инструментов:vue-loaderа такжеvueify
В дополнение к этому мы также знаем, что привязка данных в Vue использует метод захвата данных, используя метод defineProperty объекта Object. Это отличалось от грязной проверки, инициируемой событием, которая использовалась в основном Angular в то время.
Такие методы изолируют разработчиков от прямого манипулирования DOM, позволяя разработчикам больше сосредоточиться на бизнес-логике, а также меняют образ мышления разработчиков.
2.0
Версия 2.0, выпущенная 1 октября 2016 года, существенно переработала Vue, значительно улучшила производительность, а также заложила основу для будущей кросс-энд разработки.
1. Virtual DOM
В версии 1.0 Vue, как и Angular, отправлял шаблон в браузер для анализа и рендеринга, а затем обходил дерево DOM, извлекал узлы и связывал данные.
У учащихся, использовавших версию 1.0, может по-прежнему сложиться впечатление, что если вы используете синтаксис Mustache для отображения содержимого, вы увидите мигание «{{…}}» на странице.
2.0 опирается на практику React.Сначала шаблон компилируется в функцию рендеринга.Функция рендеринга возвращает объект Virtual DOM, а затем передает его функции patch для вызова интерфейса браузера и рендеринга DOM.
Виртуальный DOM не гарантирует, что эффективность рендеринга должна быть выше, чем при прямом вызове собственного интерфейса DOM (например, innerHTML), а также должна взаимодействовать с diff, чтобы свести к минимуму область обновления.
Помимо эффективности рендеринга, этот подход также позволяет VueРасширение до нескольких концов закладывает основу. Фактически виртуальный DOM можно рассматривать как общий формат данных.Если учащиеся младших классов понимают ВДОМ, можно попросить их разместить веб-страницу с групповой гимнастикой на детской площадке..
2. Рендер функция
Роль функции Render уже упоминалась ранее и не будет повторяться здесь. Но я думаю, что самое большое значение функции Render заключается в следующем:
а) С помощью инструмента построения, предоставляемого Vue, компиляция шаблона перемещается из среды выполнения во время компиляции, что повышает эффективность среды выполнения.
б) Вы можете использовать только версию Vue во время выполнения, чтобы уменьшить размер файла.
3. рендеринг на стороне сервера
Есть две основные цели рендеринга на стороне сервера:
а) Лучшее SEO, так как сканеры поисковых систем могут напрямую просматривать полностью обработанные страницы.
б) Ускоренный рендеринг в верхней части страницы. Специально для устройств с низкой скоростью сети или медленной работой нет необходимости ждать, пока все js будут загружены и проанализированы перед рендерингом страницы. Вместо этого страница рендерится на сервере и отправляется непосредственно клиенту для рендеринга страницы.
2.6
Задолго до выпуска 2.6 основная команда Vue была занята разработкой vue-cli3.0, и до 2019.02.04, когда была выпущена версия 2.6, накопился большой спрос.
Основные изменения в этой версии включают в себя: обновления синтаксиса, улучшения производительности и приближение к запланированной версии 3.0.
1. slot语法更新
Предусмотрена новая директива: v-slot для замены компонента слота для унификации слота и слота с заданной областью действия.
2. Асинхронная обработка ошибок
По сравнению с версией 2.5 хук errorCaptured и глобальная конфигурация errorHandler теперь также обрабатывают ошибки, возникающие в функциях слушателя v-on. Кроме того, если в обработчике жизненного цикла компонента или обработчике событий есть асинхронная операция, вы можете позволить Vue обрабатывать возможные асинхронные ошибки, возвращая Promise.
3. Параметры динамической команды
См. пример на официальном сайте.Теперь параметр директивы может быть динамическим значением.Если значение параметра равно null, привязка и слушатель будут удалены.
<!-- full syntax -->
<a v-bind:href="url"> ... </a>
<!-- shorthand -->
<a :href="url"> ... </a>
<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a><!-- full syntax -->
<a v-on:click="doSomething"> ... </a>
<!-- shorthand -->
<a @click="doSomething"> ... </a>
<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>4. Информация о расположении предупреждений компилятора
Начиная с версии 2.6, большинство предупреждающих сообщений о компиляции шаблонов теперь содержат информацию об исходном местоположении:
5. Явно создавать отдельные реактивные объекты
2.6 представляет новый глобальный API, который можно использовать для явного создания реактивных объектов.
constreactiveState =Vue.observable({ count:0})Полученный объект можно использовать непосредственно в вычисляемых свойствах и функциях рендеринга для запуска соответствующих обновлений при изменении.
6. Новая сборка модуля ES, которую можно напрямую импортировать и использовать.
<script type="module">
import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'
new Vue({
// ...
})
</script>
7. Разрешить nextTick вернуться к использованию микрозадач
В версии 2.5 команда разработчиков сделала внутреннюю настройку: если обновление в v-on обработчик события, заставит nextTick использовать Макрозадача (вместо микрозадачи) для постановки обновлений в очередь. Первоначально это было сделано для исправления некоторых пограничных случаев браузера, но, в свою очередь, вызвало множество других проблем. В версии 2.6 команда разработчиков нашла более простое решение исходной проблемы, так что мы можем в любом случае восстановить nextTick для использования Microtask.
8. Функция This.$scopedSlots равномерно возвращает массив
В функции рендеринга выделяются спешенные слоты, подверженные функциям через это. $ Scopedslots. В предыдущих версиях звонить Функция слота вернет в соответствии с входящим содержанием родительского компонентаОдин VNode или массив VNode. Этот дизайн на самом деле недосмотр, так как он возвращает неопределенный тип, который может привести к неожиданным пограничным случаям.
В версии 2.6 функция слота с ограниченной областью гарантирует, что возвращается только массив VNodes или undefined.
3.0
3.0 — это очень большой рефакторинг, исходный код переписан на TypeScript, и есть много интересных новых функций:
1. Виртуальный DOM полностью переработан
Компилятор берет на себя больше ответственности и переносит часть работы, которую он выполнял во время выполнения:
а) Быстрый путь компонента + обнаружение одного типа + подтипа:
б) Оптимизируйте компиляцию слотов, чтобы избежать ненужного повторного рендеринга родительских/дочерних узлов.
Обычные слоты генерируются в функции рендеринга родительского компонента, поэтому, когда обычный слот Когда данные, от которых зависит слот, изменяются, сначала запускается обновление родительского компонента, а затем новое содержимое слота передается дочернему компоненту, запуская обновление дочернего компонента.
Напротив, слот с областью действия генерирует функцию во время компиляции, и после того, как эта функция будет передана дочернему компоненту, она будет вызываться в функции рендеринга дочернего компонента. Это означает, что зависимости слота с областью действия будут собираться дочерним компонентом, поэтому при изменении зависимости непосредственно будет обновляться только дочерний компонент.
в) Статическое содержимое и извлечение статических атрибутов
Когда компилятор находит эти статические атрибуты, он напрямую извлекает эту часть статических атрибутов как часть атрибутов экземпляра и игнорирует эту часть статических атрибутов при последующем сравнении данных для повышения производительности.
г) Извлечение встроенных функций событий
2. 使用Proxy代替defineProperty
DefineProperty не прослушивает свойства объекта удаления и изменения длины элементов массива и будет инициализирован, когда будут настроены vue все наблюдатели, чтобы наблюдать за изменениями свойств объекта данных.
Прокси может следить за добавлением и удалением свойств объектов, изменением элементов массива и длин, а также может отслеживать Map, Set, WeakSet и WeakMap, а также реализует ленивый мониторинг, он не создает все Observers во время инициализации, но будет контролировать только тогда, когда он используется.
3. Рефакторинг с помощью TypeScript
Потому что Flow — отстой, а TypeScript становится лучше.
4. API пользовательского рендерера
Этот момент заключается в расширении до многоконечности, мы знаем, что Weex теперь использует метод форка для адаптации к Vue. После версии 3.0 эти нативные слои адаптации можно расширить, настроив средство визуализации.
5. Поддержка разделения времени
Разделение времени все еще находится на экспериментальной стадии.
Vue работает в основном потоке браузера. Если выполняется очень трудоемкая операция, браузер перестанет реагировать на действия пользователя до завершения расчета. Очевидно, что этот пользовательский опыт очень плохой, и пользователь думает, что браузер завис. С поддержкой Time Slicing Vue ограничит время выполнения и будет работать только в пределах временного сегмента, который называется «кадр». По умолчанию время следующего кадра составляет 16 мс. Для небольших вычислительных задач этого в принципе достаточно, и 62,5 кадра могут быть запущены за одну секунду, при частоте обновления около 60 кадров реакция браузера на пользователя будет относительно гладкой.
использованная литература
Отчет о состоянии Vue.js Китайская версия 2017 г.
Автор Vue You Yuxi: Vue 2.0, прогрессивное интерфейсное решение
Три способа реализовать двустороннюю привязку данных в javascript
Интернет говорит, что это реально DOM медленный, но результаты тестов быстрее, чем React, почему?
Технология рендеринга Vue на стороне сервера
Начало работы с ES6: размышление
Практика черной технологии ES6 — прокси, отражение
Ожидаете ли вы эти улучшения в VUE3.0?
Комплексная реформа: интерпретация Изменения в Vue 3.0
Как реализовать двустороннюю привязку Proxy, чем defineproperty
Как оценить новые функции React Time Slice и Suspense?
Полностью понять React Волокно
Расширенное чтение
|
|
китайское имя |
вступление в одно предложение |
|
Animatrix |
Матричная анимация |
Реален ли Сион? |
|
Blade Runner |
бегущий по лезвию |
Лучший научно-фантастический фильм в истории кино породил научно-фантастический жанр киберпанк |
|
Cowboy Bebop |
ковбойская звезда |
Поскольку TV Tokyo в одностороннем порядке считало, что в анимации возникла крупномасштабная проблема, оно не позволило закончить анимацию в соответствии с графиком. |
|
Dragon Ball |
Жемчуг дракона / Жемчуг дракона |
Репрезентативные работы Акиры Ториямы |
|
Evangelion |
Евангелион |
Веха в истории японской анимации, признанная одной из величайших анимаций в истории Японии. |
|
Ghost in the shell |
Призрак в доспехах |
Действие происходит в 2029 году, скоро |
|
Hunter x Hunter |
охотник на полный рабочий день |
Серийно выпускается уже 20 лет, много раз снято с производства. |
|
Initial D |
начальная буква Д |
Тем не менее Джей Чоу делает хорошую работу |
|
JoJos Bizarre Adventure |
Причудливое приключение Джоджо |
Я стараюсь избегать драки, но никогда не убегаю |
|
Kill la Kill |
Убить девушку |
|
|
Level E |
Паранормальный E Контакт |
Открыл источник зла привычки Фу Цзянь И Бо приостанавливать публикации |
|
Macross |
Макросс |
Хорошо продуманный бутик |