Vue.js, который вы должны знать

оригинал:Vue.js, который вы должны знать

В этой статье в основном систематизированы некоторые моменты знаний, которые следует освоить в Vue. Это просто введение, и оно не слишком глубокое, но я надеюсь лучше понять Vue с разных точек зрения в соответствии с этой статьей и занять лучшую позицию для себя. Фронтенды, использующие только API, не являются хорошими программистами.

Почему данные компонентов должны быть функциями?

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

компонент связи

Взаимодействие компонентов родитель-потомок:$on,$emit
Связь между компонентами, не являющимися родительскими и дочерними: шина событий
Осложнения: vuex

Как динамически добавлять компоненты

Сценарий: в Vue нажмите кнопку, чтобы случайным образом сгенерировать один из компонентов a, b и c.

is
render

Идея: установить массив компонентов, нажать кнопку один раз, нажать имя компонента,v-forперебирать компоненты и использоватьisилиrenderДинамическая генерация

Что такое vue-загрузчик?

vue-loader — это загрузчик веб-пакетов, который преобразует однофайловые компоненты в модули JavaScript.

Цитирование документации:

Поддержка по умолчаниюES2015;
Разрешить использование других компонентов в компонентах Vuewebpack loader, например, правильно<style>использоватьSassи правильно<template>использоватьJade;
.vueРазрешить пользовательские узлы в файле, а затем использовать пользовательский загрузчик для обработки;
Пучок<style>а также<template>Статические ресурсы рассматриваются как модули и используютсяwebpack loaderобрабатывать;
Имитация области действия CSS для каждого компонента;
Поддерживает горячую перезагрузку компонентов во время разработки.

Внедрение основ Vue SSR

главным образом черезvue-server-rendererВывод компонента Vue в HTML, процесс:

Основная функция клиентской записи-клиента — монтировать его в DOM.Помимо создания и возврата экземпляров, серверная запись-сервер также выполняет сопоставление маршрутов и предварительную выборку данных.
Клиент пакета WebPack Client-Client-Bundle, упакованный сервер - это сервер-пучок
Сервер получает запрос, загружает соответствующий компонент в соответствии с URL-адресом, а затем генерирует html и отправляет его клиенту.
Когда клиент активирован, Vue берет на себя статический HTML, отправленный сервером на стороне браузера, и превращает его в динамический DOM, управляемый Vue.Чтобы обеспечить успешное смешивание, клиент и сервер должны использовать один и тот же набор данных. На стороне сервера данные могут быть получены перед рендерингом и заполнены в stroe, так что данные могут быть напрямую извлечены из хранилища до того, как клиент смонтирует их в DOM. Динамические данные первого экрана передаются через window.INITIAL_STATEотправить клиенту

Принцип двусторонней привязки данных

Общие практики реализации привязки данных:

Object.defineProperty: Захватить каждый атрибутsetter,getter
Обнаружение грязных значений: циклический перебор определенных событий
Режим публикации/подписки: публикация и подписка на сообщения через сообщения.

Vue использует метод захвата данных в сочетании с моделью «издатель-подписчик».Object.defineProperty()Чтобы добиться захвата свойств и публикации сообщений подписчикам при изменении данных, чтобы он запускал соответствующий обратный вызов слушателя.

Конкретные шаги:

1. Реализовать наблюдатель

Рекурсивно просматривайте объекты данных, которые необходимо наблюдать, включая атрибуты объектов податрибутов, добавляйтеsetterа такжеgetter. Реализуйте подписчика сообщений, поддерживайте массив для сбора подписчиков, инициируйте уведомление при изменении данных, а затем вызовите метод обновления подписчика.

2. Реализовать компиляцию

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

3. Внедрить Наблюдатель

Подписчики Watcher являются мостами между OBServer и Compile

Главное:

Добавьте себя к подписчику свойства (dep) при его создании
Он должен иметь сам метод update()
Когда свойство изменяет уведомление dep.notice(), оно может вызвать свой собственный метод update() и вызвать привязку обратного вызова в компиляции, после чего оно будет успешным.

4. Внедрить MVVM

MVVM, как точка входа для привязки данных, интегрирует Observer, Compile и Watcher, отслеживает изменения данных собственной модели через Observer, анализирует и компилирует инструкции шаблона через Compile и, наконец, использует Watcher для создания коммуникационного моста между Observer и Compile для получения данных. изменение -> обновление просмотра; изменение взаимодействия просмотра (ввод) -> эффект двусторонней привязки изменения модели данных

Ссылаться на:Анализ принципа Vue и реализация двусторонней привязки MVVM

Понимание компиляции шаблонов Vue.js

Шаблон будет скомпилирован в синтаксическое дерево AST, и будет сгенерирован AST для получения функции рендеринга.Возвращаемое значение рендеринга — это VNode, который является виртуальным узлом DOM Vue.

Процесс синтаксического анализа преобразует шаблон в абстрактное синтаксическое дерево AST с использованием регулярных выражений.
Процесс оптимизации помечает статические узлы, а процесс пост-дифференциации пропускает статические узлы для повышения производительности.
сгенерировать процесс, сгенерировать строку рендеринга

У Big Situ есть очень хорошая статья:Принцип и реализация фронтенд-шаблона

Зачем использовать вью`Virtual DOM`?

С одной стороны, это из соображений производительности:

Стоимость создания реального DOM высока: настоящий узел узла DOM реализует множество свойств, а виртуальный узел реализует только некоторые необходимые свойства, для сравнения, стоимость создания внузла относительно низкая.
Запуск нескольких перерисовок и перекомпоновок браузера: использование vnode эквивалентно добавлению буфера, так что все изменения узлов, вызванные изменением данных, сначала модифицируются в vnode, а затем различаются, а затем все узлы, которые создают различия, концентрируются один раз Изменение дерева DOM чтобы уменьшить количество перерисовок и переформатирований в браузере

Однако на производительность сильно влияет сценарий.Различные сценарии могут вызывать множественные разрывы в производительности между разными реализациями, поэтому он опирается на мелкозернистую привязку иVirtual DOMКакой из них работает лучше, это не простой вопрос. Более важная причина заключается в разъединенииHTMLзависимости, что дает два очень важных преимущества:

Больше не нужно полагаться на синтаксический анализатор HTML для синтаксического анализа шаблонов, можно выполнить дополнительную работу AOT для повышения эффективности среды выполнения: благодаря компиляции шаблона AOT объем среды выполнения Vue может быть дополнительно сжат, а эффективность среды выполнения может быть дополнительно повышена;
Его можно отображать на платформах, отличных от DOM, для реализации расширенных функций, таких как SSR и изоморфный рендеринг, которые используются такими платформами, как Weex.

Подводить итоги,Virtual DOMПрирост производительности не самый важный, важнее то, что он дает Vue расширенные возможности, которые должен иметь современный фреймворк.

алгоритм сравнения

Эта часть более сложная и трудная для понимания, рекомендую хорошую статью:Разобрать алгоритм сравнения vue2.0

Разница между vue и реакцией

Тот же пункт:

оба поддерживаютSSR
имеютVirtual DOM
разработка компонента
управляемый данными
...

разница:

Vue рекомендует формат однофайлового компонента с использованием webpack + vue-loader, а React рекомендует JSX + встроенный стиль.
вьюVirtual DOMОн предназначен для отслеживания зависимостей каждого компонента, он не будет отображать все дерево компонентов, и реакция будет повторно отображать все дочерние компоненты всякий раз, когда состояние должно быть изменено.
...