Кратко изложите принцип двусторонней привязки данных vue своими словами.

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

Vue использует метод угона данных, в сочетании с режимом издателя-абонента. Он использует объект.defineProperty (), чтобы угонять сеттер и добыче каждого свойства, публикует сообщения для подписчиков, когда данные изменяются и вызывают мониторинг обратного вызова ответа.

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

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

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

третий шаг:
Имя подписки Watcher — это мост для связи междуObserver и Compile.Основные моменты:
1. Добавьте себя в установщик атрибутов (dep) при создании своего экземпляра.
2. Он должен иметь сам метод update()
3. Когда свойство изменяет уведомление dep.notice(), вы можете вызвать свой собственный метод update() и вызвать обратный вызов, указанный в Compile, после чего вы будете на пенсии.

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

Вышеприведенное является более официальным тоном для объяснения принципа двусторонней привязки данных Vue. Затем давайте поговорим о моем понимании принципа двусторонней привязки данных. Чтобы понять принцип двусторонней привязки данных Vue, вы должны сначала понять шаблоны MVC и MVVM. Разницу, а затем понять принцип привязки данных одного элемента Vue. Далее я объясню вам сочетание изображений и текста:

1. Разница между MVC и MVVM:

Итак, как видно из приведенного выше рисунка, шаблон проектирования MVVM автоматизирован, и Vue принимает этот шаблон проектирования.Мы можем обнаружить, что шаблон MVVM — это то, что действительно разделяет данные и представление, а не MVC, потому что есть много ручной работы в контроллере.Операция DOM, пока меняется интерфейс, код в вашем контроллере должен быть изменен (jquery), например, вы можете представить, что положение элемента на вашей странице изменилось, ваш селектор должен быть изменен, селектор написан В манипулировании DOM это разница между шаблонами проектирования MVC и MVVM.

2. Принцип одноэлементной привязки данных Vue:

Процесс одноэлементной привязки (обобщил сам): переменная меняется, набор отправляет уведомление наблюдателю, а наблюдатель сообщает виртуальному DOM-дереву, что пора сравнивать, я изменил значение, поэтому новый DOM дерево создается для сравнения, Затем сравните и классифицируйте их шаг за шагом, и сравните, какой элемент изменяется, и обновите элемент на странице.Это принцип одноэлементной привязки данных.

3. Принцип двусторонней привязки данных Vue
Принцип двусторонней привязки данных Vue, что делать, когда на странице есть элемент ввода, тогда пригодится двусторонняя привязка данных v-model, но что такое принцип двусторонней привязки данных v-model? Пожалуйста, посмотрите на изображение ниже:

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

Я надеюсь, что после описанной выше волны демонстрационных операций каждый сможет столкнуться с проблемой принципа двусторонней привязки данных vue в vue-интервью и сможет ответить на них максимально гладко и максимально полно. Если я что-то пропустил, пожалуйста, укажите это в области комментариев. , учитесь друг у друга!