В этой статье я просто расскажу о реактивности в vue.js, в основном я объясню видео Грега Поллака, поэтому, прежде чем углубляться в статью, я хочу поблагодарить Грега за его усилия в его видео, потому что это облегчает мне задачу и на самом деле я буду использовать его пример и способ систематизации идей в своей статье. Https://www.vuemaster.com/courses/advanced-components/build-a-reactivity-system/
Какова реактивность с точки зрения vue?
Реактивность в контексте vue касается того, как мы меняем значения в dom в зависимости от любых изменений, произошедших в ваших свойствах (вашем объекте данных).
в предыдущем примере, если мы обновим цену до 10, каждая из строк 2, 3 и 4 будет обновлена с новыми значениями, и это загадка, которую мы разрешим в этой статье.
Как работает java-скрипт?
В этом примере общее количество будет равно 25, даже если мы изменили цену = 10. java-скрипт не реагирует на какие-либо изменения. на самом деле он выполняется построчно, поэтому вам нужно снова пересчитать итоговую сумму после обновления цены.
Давайте вместе подумаем о проблемах и решениях, чтобы построить нашу собственную систему реагирования.
В этом разделе мы вместе построим реактивную систему, шаг за шагом увидим проблемы и попытаемся решить их, чтобы построить надежную реактивную систему.
проблема: как сделать так, чтобы итоговая сумма автоматически обновлялась, если мы изменили цену или количество?
решение: мы можем легко поместить его в функцию и повторно запускать ее каждый раз, когда мы меняем цену или количество.
проблема: но если бы у нас было много переменных, которые зависят от цены и количества, например, мы можем разделить их, добавив их, каждое из этих выражений будет выделено в отдельную переменную. что означает автономную функцию, и нам нужно будет каждый раз повторно запускать все эти выражения, а наше последнее решение затруднит отслеживание всех этих функций и выражений , и мы можем забыть любую из них . но нам нужно более надежное решение, которое собирает все эти выражения в одном месте и повторно запускает его, не забывая об этом.
решение. А как насчет создания хранилища (массива / набора) для каждой переменной. это хранилище будет сохранять все эти функции в зависимости от этой конкретной переменной. и каждый раз, когда мы обновляем эту конкретную переменную, мы уведомим хранилище о повторном запуске всех выражений в нем. (для этого мы воспользуемся шаблоном проектирования наблюдателя).
проблема: каждый раз, когда мы создаем новую цель, нам нужно будет вызвать dep.depend (), чтобы сохранить ее, а затем запустить, вызвав он похож на target (), поэтому нам нужно что-то, что записывает цели для каждой переменной и запускает их автоматически, не делая это вручную каждый раз, когда мы создаем новая цель.
Решение: мы можем инкапсулировать весь этот процесс в функцию-наблюдатель, которая принимает цели как анонимную функцию, сохраняет и запускает ее для нас.
и вуаля, мы создали реактивную систему, но есть небольшое улучшение, которое мы можем сделать. Давайте вместе подумаем, как мы можем улучшить нашу реактивную систему.
Реактивное улучшение системы
проблема: но, как мы представляем ранее, каждая переменная будет иметь свой собственный экземпляр зависимости от класса dep, поэтому какой из них мы будем вызывать в наблюдателе, так как наблюдателю может потребоваться вызвать более одного dep. как это
Итого = цена * количество.
эту цель необходимо сохранить в хранилище цена и хранилище количество.
Амм, давайте больше сконцентрируемся на том, что на самом деле происходит в нашем решении. Каждый раз, когда мы обращаемся к цене и получаем значение этой переменной, которое будет использоваться в выражении и сделать цель мы вызываем зависимый метод, и каждый раз, когда мы обращаемся к цене, установить новое значение для этой переменной, которую мы вызвали метод уведомления.
решение: из нашей последней заметки и ключевых слов
get = ›зависимый метод
set = ›метод уведомления
мы можем сделать для каждой переменной в нашей программе геттер и сеттер, поэтому в геттере мы вызываем зависимость, а в сеттере - notify, и именно этим занимается vue.
Vue использует Object.defineProperty это определение для каждой переменной в нашем объекте данных как средство получения и установки.
Поэтому вот фактическое решение, которое объединяет геттер и сеттер с нашим классом зависимости, чтобы сделать нашу программу реактивной.
Вернуться к реактивности Vue
Вернемся к документации vue.js, чтобы понять его реактивность и то, как vue может распознавать различия в переменных и повторно отображать их в DOM. и это происходит с точки зрения следующих шагов:
- У каждого компонента vue есть собственный экземпляр наблюдателя.
- У каждого свойства в состоянии vue есть собственный геттер.
- Во время рендеринга свойств vue использует геттер для регистрации этих свойств как зависимостей.
- Каждое свойство, также находящееся в состоянии vue, имеет свой собственный сеттер.
- Когда установщик использует, он уведомляет наблюдателя о необходимости повторного рендеринга компонента.
