Моя домашняя страница на GitHub~приветствую всехStar⭐⭐⭐

Почему интервью исследут принципы?

• Я знал это раньше
• Поймите принцип, чтобы лучше применять
• Большой завод делает колеса

Как проверить на собеседовании? Каким образом?

• Смотрите на ключевые моменты, а не на детали. Овладейте принципом 2/8

---

1. Компонентизация и MVVM

Введение в понятия: основы компонентизации

Интервьюер не будет так прямо спрашивать, он спросит вас, что такое модель MVVM?

Ответ на этот вопрос:

Первое: историческое происхождение: "давным-давно" была составляющая

Когда asp, jsp php были самым ранним интерфейсом, компонентизация уже была. А еще есть компонентизация в node.js.Ниже пример проекта, сделанного с помощью nodejs (макет как выше, код такой)

Импортировать кучу данных (или компонентов) по частям

Во-вторых: Vue и React сделали инновационное представление, управляемое данными (MVVM setState).

1. В предыдущем пункте, когда фронтенд был 1.0 или даже 2.0, потому что была только традиционная компонентизация, был только статический рендеринг, а обновление еще и зависело от DOM, так что jQuery в то время был очень популярен! ! !
2. Vue и React значительно повысили эффективность после введения концепции представлений, управляемых данными.

Vue 2 использует MVVM, React использует setState

Концепция представления, управляемого данными, здесь не слишком детализирована. Забудьте или поговорите: что мы хотим изменить, какие данные, не идем операции DOM, а напрямую в Vue или достаточно изменить данные внутри React, фреймворк автоматически отобразит данные на странице! Именно из-за этого мы разработали, чтобы больше времени уделять бизнес-данным и бизнес-логике!

Третье: тогда что будет с MVVM?

Нарисуй картинку и объясни ее на полный балл!

• Сначала M — это модель, V — это представление, VM — это ViewModel.
• Через средний уровень виртуальной машины мы сразу же выполняем на уровне представления при изменении модели.
• Точно так же, когда мы инициируем события на уровне просмотра, мы также можем напрямую изменять данные через уровень виртуальной машины.

2. Принцип отзывчивости

В приведенном выше вопросе есть проблема:

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

Мы ответим на этот вопрос от 3 очковСвязь

Первый: основной API — Object.defineProperty

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

Возьмите каштан:

// Пример добавления дескриптора свойства и аксессора к объекту

var bValue;
var o = {};
Object.defineProperty(o, "b", {
  get : function(){
    console.log('监听正在获取b')
    return bValue;
  },
  set : function(newValue){
    console.log('监听正在设置b')
    bValue = newValue;
  },
  enumerable : true,
  configurable : true
});

o.b = 38;
console.log(o.b)

окончательная печать

监听正在设置b
监听正在获取b
38

Из вышеприведенного каштана мы видим, что когда мы присвоим ob значение 38, будет вызвана функция set.В это время мы присвоим значение bValue, а затем мы можем получить это значение через ob В это время , вызывается функция get.

Второй: Как реализовать отзывчивость, демонстрация кода

① Объект наблюдения (глубина)

Если вы просто слушаете атрибуты первого уровня (такие как имя и возраст в данных ниже), это легко реализовать,

Но если атрибут является объектом (например, информация в данных), как слушать в это времяinfo.addressШерстяная ткань? Можете ли вы сказать, является ли это объектом?

На рисунке 2observer()Функции делают именно это. Если цель, переданная в эту функцию (представляющая отслеживаемый элемент), является объектом, то она будетreturnсвойства этого объекта,

Как он обнаружил на рисунке 1infoявляется объектом, то возвратaddressЭто объект или собственность! ! !

На рисунке 3object defineReactive（target,key,value）Эта цель, в которую встроена эта функция, — это просто объект, который мы слушаем, а не свойства внутреннего слоя этого объекта.

Точно так же, как передается атрибут имени в данных на рис. 1, затем возвращается атрибут имени.

Если информационный объект в данных передается, то удобно этому объекту найти все его атрибуты, потом найти адрес, а потом перейти на такую ​​проверку по нему, и наконец получить все атрибуты.

② Массив мониторов

data(){
nums:[10,20,30]
}

Мы отслеживаем массив объектов в качестве выше, пытаясь слушать, обнаружить и не может добиться успеха!

Здесь нам нужно переопределить прототип массива: я объясню это примерно здесь!

Третье: некоторые недостатки Object.defineProperty (Vue3.O включает прокси). Это полезно знать.

1. Глубокий мониторинг требует рекурсии до конца и большого объема вычислений за один раз

Если информация в данных является очень провинциальным объектом, то не нужно ли нам все время рекурсивно (метод наблюдения выше)

2. Невозможно прослушать добавление/удаление свойств (Vue.set Vue.delete)
3. Не удается прослушать массив изначально, требуется специальная обработка (необходимо изменить прототип массива)

Четвертое: проблемы с совместимостью прокси

• Прокси имеет плохую совместимость и не может быть полифиллом (IE11, многие ядра браузеров Android не поддерживают его)
• Vue2.x будет существовать некоторое время, так что руководство
• Знания, связанные с Vue3.O, в следующей главе здесь просто упоминание

3. Виртуальный DOM (Виртуальный DOM) и diff

Первое: фоновое понимание

1. DOM потребляет производительность операций, потребляет
2. Условно говоряjs выполнение быстрее, прежде чем использовать фреймворк, используйте jQuery, чтобы вручную настроить время операций DOM самостоятельно.
3. Vue React — это представление, управляемое данными, Как эффективно контролировать манипулирование DOM?

---

они используют виртуальный DOM

1. React Virtual DOM выдвигается, в годы после того, как предложили получить много популярности, как Vue 2.0 с того, с виртуальным домом
2. Контролируя переменные,业务复杂度+执行速度=DOM操作最终速度
3. Мы вообще не контролируем сложность бизнеса, столько требований, какое оставить, а какое убрать?
4. Так можем ли мыУлучшить скорость выполнения операций DOMШерстяная ткань?
5. Мы ставим больше вычислительной смены рассчитывается JS, JS рассчитывает, как быстро (особенно после выпуска двигателя V8 Chrome V8), а домо-скорость не является порядком величины!

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

Второе: принцип виртуального DOM

---

Сначала он использует JS для моделирования структуры DOM, затем выполняет серию вычислений, вычисляет мельчайшие изменения, а затем управляет DOM (чтобы максимально избежать некоторых бесполезных операций), что является принципом виртуального DOM!

Третье: принцип полностью понятен, так что же делать?

1. Используйте JS для моделирования структуры DOM (временно вся структура DOM, смоделированная JS: левая структура DOM, правая структура DOM JS)

Большая фабрика, вероятно, спросит: можете ли вы использовать следующие институты DOM, чтобы выразить следующее? Только для справки, на самом деле выражение отличается от лица

2. Ссылочный snabbdom Vue, React, изучение виртуального DOM через snabbdom

Виртуальный DOM использует алгоритм сравнения, сначала кратко понять алгоритм diff

1. Точно так же алгоритм сравнения не уникален для виртуального DOM.
2. Diff означает сравнение, что является широкой концепцией, такой как команда Linux diff, git diff и т. д.
3. Два js-объекта также можно отличить, представив jiff-библиотеку GitHub.

1. Traversal Trell.
2. пересечь дерево2
3. Сортировать

1000 узлов, требуется 100 миллионов вычислений, алгоритм недоступен

Реагировать ДаниэльПодумайте: так не получится, тогда берите временную сложность дерева diffОптимизировано до O (n)

1. Сравнивайте только тот же уровень, а не между уровнями
2. Если теги не совпадают, то удалите реконструкцию напрямую и больше не сравнивайте по глубине.
3. Если тег и ключ совпадают, они считаются одним и тем же узлом, и дальнейшее сравнение не требуется.

В-четвертых, процесс рендеринга и обновления компонентов

Интервьюер не будет прямо спрашивать, что такое ребро шаблона, но пропустит"Процесс рендеринга и обновления компонентов«Инспекция?

1. Vue template complierСкомпилируйте шаблон в функцию рендеринга
2. воплощать в жизньrenderПроизводственная функцияvnode(vnodeФактически虚拟DOM源码Важное ключевое слово в , понимаемое как общий узел виртуального DOM)

1 Предварительные знания: с грамматикой (просто лучше знать)

console.log(obj.a)

2. но использоватьwithграмматика

with(obj){
console.log(a)  
}

ЭтотРезультат одинаков в обоих случаях, только когда мы используем синтаксис with, нам нужно, то в {} вы можетеиспользовать одно из его свойств напрямую.

② Зачем нужно компилировать шаблон Vue?

потому что мы<template>Содержание, написанное на метке, на самом деле HTML, но формат, определенный Vue.

Подумай об этом. Можете ли вы написать инструкции, интерполяцию, js-выражения в обычном html, можете ли вы реализовать суждение и цикл?

Но JS может, исходя из этого,Шаблоны Vue должны быть преобразованы в какой-либо код JS, даже если шаблон скомпилирован!

③ Процесс рендеринга/обновления компонентов

Начальный процесс рендеринга

1. Разобрать шаблон в функцию рендеринга (выполняется в среде разработки или в браузере, vue-loader)
2. Отзыв триггера, прослушивание имуществу данных Getter Setter
3. Выполнить функцию рендеринга, создать vnode, patch(elem, vnode)

процесс обновления

1. Измените данные и активируйте сеттер (судя по тому, что он уже отслеживался в геттере ранее)

2. Повторно выполните функцию рендеринга для создания newVnode.

3. patch(vnode, newVnode), алгоритм diff пути поможет мне вычислить минимальную разницу между старыми и новыми узлами DOM

Введение во весь процесс

1. желтая область
2. Функция рендеринга создает дерево виртуального DOM (зеленое дерево), и функция рендеринга коснется (запустит) данные (фиолетовая областьGetter);
3. При его срабатывании будут собираться и зависимости (поскольку я запускаю геттер переменной в шаблоне, какую именно переменную буду смотреть(синяя область)Встаньте)
4. Затем, когда мы идем к сеттеру, мы сначала делаем суждение Notify, чтобы определить, является ли переменная сеттера значением собранных нами зависимостей, и если да, то мы уведомим те зависимости, которые мы собрали, а затем триггер триггера повторного рендеринга (повторного рендеринга)

Асинхронный рендеринг

• ① первый отзыв$nextTickи способ рендеринга Vue
• ②Сводные данные, а затем обновите вид в одно время, уменьшая количество операций DOM и улучшению производительности

vue-маршрутизатор: 2 режима,h5 historyа такжехэш-режим

Особенности хеш-режима

пройти черезwindow.onhashchangeмероприятие(отображение кода)Нажмите кнопку, используйте js, чтобы изменить значение URL

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

Особенности режима истории H5

(отображение кода) history.pushState和window.onpopstate Суммировать:

• хэш-режим -window.onhashchange
• Режим истории H5 -history.pushState和window.onpopstate

---

Краткое изложение принципа Vue

Принцип интервью большой фабрики: Так что думаю надо прояснить ключевые моменты всех принципов, а потом поковыряться в популярных технологиях!

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

1. процесс рендерингаявляется кратким изложением вышеприведенных трех
2. составнойЭто общая лекция на всей концепции событий Vue
3. Внешняя маршрутизацияЭто объяснение для Vue Router

Из-за моего ограниченного уровня, пожалуйста, оставьте мне сообщение, если описание неточное, добро пожаловать на общение~

Моя домашняя страница на GitHub~приветствую всехStar⭐⭐⭐