В недавних интервью интервьюер задаст несколько вопросов об исходном коде, связанном с Vue, и «семейном сегменте». Так как же нам лучше ответить на эти вопросы? Здесь я разбираюсь в своем понимании Vue для справки.
1. Что такое Vue?
Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов, а также очень типичная структура программы MVVM (модель-представление-представление-модель).
Официальный язык:
Vue (произносится как /vjuː/, похоже на view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от других крупных фреймворков, Vue разработан так, чтобы его можно было применять слой за слоем снизу вверх. Основная библиотека Vue ориентирована только на уровень представления, который не только прост в использовании, но и легко интегрируется со сторонними библиотеками или существующими проектами. С другой стороны, в сочетании с современными наборами инструментов и различными вспомогательными библиотеками Vue также полностью способен работать со сложными одностраничными приложениями.
2. Поскольку vue — это структура MVVM, чем она лучше MVC?
Шаблон MVC является основой шаблона MVVM. Эти два шаблона больше похожи на оптимизированные и улучшенные версии шаблона MVC. Два MV, а именно Model и View, одинаковы, но разница заключается в связи между MV.
☞Что такое MVC?
Если во фронтенде нет фреймворка, а используется только нативный html+js, то паттерн MVC можно понять так. Думайте о html как о представлении; js как о контроллере, отвечающем за обработку взаимодействия между пользователем и приложением, реагирование на работу представления (прослушивание событий), вызов модели для работы с данными и завершение синхронизации. между моделью и представлением (по смене модели, Управляйте представлением через селектор); в качестве Модели используйте ajax js, то есть слой данных, и получайте данные с сервера через ajax.
☞Что такое МВВМ?
Самая большая разница между MVVM и MVC заключается в следующем: MVVM реализует автоматическую синхронизацию Представления и Модели, то есть при изменении атрибутов Модели нам больше не нужно вручную манипулировать элементами Dom, чтобы изменить изменения Представления, а изменить его после атрибут установлен, данные слоя просмотра, соответствующие этому атрибуту, будут автоматически изменены. Возьмите Vue в качестве примера:
<div id="vueDemo">
<p>{{ title }}</p>
<button v-on:click="clickEvent">hello word</button>
</div>
var vueDemo = new Vue({
el: '#vueDemo',
data: {
title: 'Hello Vue!'
},
methods: {
clickEvent: function () {
this.title = "hello word!"
}
}
})
Здесь, на уровне html => View, вы можете видеть, что View здесь декларативно отображает данные в элементе DOM с помощью синтаксиса шаблона.Когда ViewModel обновляет модель, она обновляется до View через привязку данных.
Данные в экземпляре Vue эквивалентны слою модели, а ядром уровня ViewModel является двусторонняя привязка данных в Vue.Когда модель изменяется, представление также может обновляться в режиме реального времени.Точно так же изменяется представление также может изменить модель.
В целом MVVM намного проще MVC, что не только упрощает бизнес и интерфейсные зависимости, но и решает проблему частого обновления данных, избавляя от необходимости использовать селекторы для манипулирования элементами DOM. Поскольку в MVVM View не знает о существовании Model, а Model и ViewModel не могут наблюдать за View, этот режим низкой связи улучшает возможность повторного использования кода.
3. Каков принцип отзывчивости Vue?
Vue реализует ответ данных на основе Object.defineProperty, а Object.defineProperty — это функция, которая не может быть прошита в ES5 и не поддерживает браузеры ниже IE8. Vue отслеживает собранные зависимости с помощью методов получения/установки Object.defineProperty, уведомляет об изменениях при доступе к свойствам и их изменении, а затем обновляет данные представления; Из-за ограничений современного JavaScript (и устаревания Object.observe) Vue не может обнаружить добавление или удаление свойств объекта. Поскольку Vue выполняет процесс преобразования геттер/сеттер для свойств при инициализации экземпляра, свойство должно существовать в объекте данных, чтобы Vue мог преобразовать его так, чтобы он реагировал.
Давайте сначала дадим краткое введение, а в следующих статьях напишем подробно:
Класс наблюдателя
Он в основном используется для добавления методов получения/установки в данные Vue defineProperty, а также для сбора зависимостей в получателе/установщике или отправки уведомлений об обновлениях.
Класс наблюдателя
Он используется для наблюдения за изменениями данных (или выражений) и последующего выполнения функции обратного вызова (есть также процесс сбора зависимостей), в основном используемый для $watch API и инструкций.
Класс DEP (аббревиатура для зависимости зависимости)
Это наблюдаемый объект может иметь разные инструкции подписаться (это многоадресная передача)
Шаблон наблюдателя похож на шаблон публикации/подписки, но на самом деле немного отличается.
Режим публикации/подписки основан на едином центре распределения и планирования событий: On добавляет события (подписки) в массив в центре, а emit берет события (опубликованные) из массива в центре Операции публикации и подписки как а также планирование подписчиков после публикации — все операции объединены центром.
Но паттерн наблюдатель не имеет такого центра, паттерн наблюдатель включает в себя наблюдателя-наблюдателя и субъект-субъект-объект. Когда наблюдателю необходимо наблюдать за субъектом, он должен сначала зарегистрироваться в субъекте. Объект субъекта содержит дескриптор коллекции объекта наблюдателя. Когда внутреннее состояние объекта субъекта изменится, он уведомит всех наблюдателей об изменении.
4. Вы поняли исходный код Vue?
Раньше я немного исследовал исходный код Vue, но у меня не было систематических записей Теперь, когда у меня есть время, давайте подведем основные итоги. С одной стороны, я должен преодолеть собственную инерцию, а с другой стороны, я хочу вернуться в прошлое. хаха~~ Давайте посмотрим на структуру каталогов исходного кода Vue:
Давайте сначала посмотрим на обзор:
заодно обновлюgithubНа, если вам это нравится, вы можете дать звезду, заранее спасибо~
1.Анализ исходного кода Vue (1) — Создание создания
2.Анализ исходного кода Vue (2) — initMixin (вкл.)
3.Анализ исходного кода Vue (3) — initMixin (ниже)
4.Анализ исходного кода Vue (4) - компиляция шаблона в $mount --parse
5.Анализ исходного кода Vue (5) - Компиляция шаблона в $ Mount --Optimize
6.Анализ исходного кода Vue (6) - компиляция шаблона в $mount --generate
7.Анализ исходного кода Vue (7) — генерация рендера в VNode
8.Анализ исходного кода Vue (8) — сбор и мониторинг зависимостей
9.Анализ исходного кода Vue (9) — VirtualDOM и путь