Разговор о нескольких наблюдателях Vue (1) — наблюдатель рендеринга

Vue.js

В этой статье скорость отклика в Vue.js объясняется только с теоретической точки зрения и не включает конкретный исходный код.

предисловие

Мы все знаем, что Vue.js обладает характеристиками реагирования на данные.

Общие сценарии включают следующее:

  • Изменение данных → Изменение просмотра с использованием данных
  • изменение данных → использовать изменение вычисляемого свойства данных → использовать изменение представления вычисляемого свойства
  • Изменение данных → Функция обратного вызова watch, зарегистрированная разработчиком, активно выполняется

Три сценария, соответствующие трем наблюдателям:

  • Рендер-наблюдатель, отвечающий за обновление представления.
  • Выполнить вычисляемый наблюдатель, который вызывает обновления вычисляемых свойств.
  • Обычный наблюдатель, зарегистрированный пользователем (watch-api или свойство watch)

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

Статьи серии Watcher здесь, это первая

render watcher

new Vue({
  template: `<div>My name is {{name}}<div>`,
  data: {
    name: 'FooBar',
    gender: 'male'
  }
})

В сочетании с приведенным выше кодомОтзывчивыйСредства: когда изменяется значение атрибута имени, отображаемый контент также должен изменяться.

построить соединение

Как я могу установить связь между визуализацией представления и значениями свойств? Сначала проясним два вопроса

  • ВОЗиспользовалэти данные
  • данныеизмененныйЧто я должен делать?

В сцене рендеринга вида ответы на эти два вопроса таковы:

  • Функция рендеринга, отвечающая за создание представления, использует эти данные.
  • Данные изменились, и функция рендеринга должна быть выполнена

захват данных

использовала такжеизмененный, что можно узнать, установив дескриптор доступа (get/set) в значение свойства.

Поэтому необходимо обойти все значения свойств данных и использовать Object.defineProperty для установки дескриптора доступа (get/set).

  • Кто использует эти данные?
    Запускается получение значения свойства, и пользователь должен быть записан в геттере.

  • Что делать, если данные изменились?
    Изменение данных инициирует установку значения свойства, о чем следует уведомить пользователя в установщике.

подписаться-опубликовать

Как видно из приведенного выше описания, это типичный сценарий публикации и подписки.

В сцене, визуализируемой представлением, наблюдатель рендеринга является подписчиком. У каждого значения свойства есть менеджер зависимостей — dep, отвечающий за логирование и оповещение подписчиков.

Сбор и уведомление о зависимостях

Процесс сбора подписчиков (иждивенцев)

  1. Подписчик выполняет обратный вызов (функция рендеринга)
  2. Гортворение свойства Trigger Getter
  3. добавить в очередь подписчиков
  4. Повторяйте 2 и 3, пока не будут выполнены все геттеры.

Процесс уведомления подписчиков

  1. изменение свойства
  2. Установщик значения свойства триггера
  3. подписчик уведомлений dep (наблюдатель за рендерингом)
  4. Подписчик выполняет обратный вызов (функция рендеринга)

отписаться

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

Как я могу узнать, на какие значения свойств больше не ссылаются? Мы можем это сделать:

Подписчик (рендер-наблюдатель) также поддерживает набор зависимостей и хранит в этой коллекции зависимости зависимых значений свойств.

Каждый раз, когда функция рендеринга выполняется один раз, то есть когда срабатывает геттер значения свойства, подписчик (рендер-наблюдатель) будет сохранять новый набор зависимостей. Сравните старый и новый наборы зависимостей, найдите старые зависимости, которые больше не являются зависимыми, и удалите render-watcher из очереди подписчиков старых зависимостей. Это не уведомит текущего подписчика (рендер-наблюдателя).

Категории