Разбор $mount в Vue

Эта статья в основном посвящена анализу $mount.

$mount выполняет три основные задачи:

1. Если в option нет функции render, то через compileToFunctions HTML-шаблон компилируется в Render-функцию, которая может генерировать VNode.

2. Создание экземпляра наблюдателя, вызов метода updateComponent.

3. Генерация vnode, обновление vnode через patch, обновление vnode на DOM. Из-за ограниченности篇幅а, первые два шага рассмотрены здесь, третий шаг будет обсужден в следующей статье. Давайте конкретно рассмотрим. Прежде всего, мы придем к функции $mount, как показано на рисунке:

　

Мы можем видеть, что код сначала проверяет, есть ли функция render в option, если ее нет, далее проверяется, есть ли шаблон, если его нет, используется outerHTML DOM-элемента. После получения шаблона что дальше? Как показано на рисунке.

　　

Мы можем видеть, что вызывается compileToFunctions для преобразования шаблона в функцию render. В этом процессе есть два шага:

• Разложение шаблона на ast-дерево.
• Создание функции render через ast-дерево.

Конкретно, процесс разложения шаблона на ast-дерево не будет рассмотрен в этой статье, это будет отдельная тема для отдельной главы. Хорошо, теперь у нас есть функция render, что дальше? Ответ: начать монтирование компонента. Как показано на рисунке:

　　

Из上图 можно увидеть, что программа объявляет метод updateComponent, который будет вызываться наблюдателем для обновления компонента, об этом будет сказано подробнее, когда мы дойдем до наблюдателя. Почему есть условное предложение для объявления метода updateComponent в зависимости от условий, можно понять из производительности, где один метод используется для тестирования производительности render и update. Итак, мы finally добрались до Watcher, посмотрим на это предложение кода:

// мы устанавливаем это в vm._watcher внутри конструктора наблюдателя
// так как начальный патч наблюдателя может вызывать $forceUpdate (например, внутри child)
// компонент, который монтируется, который зависит от того, что vm._watcher уже определен
new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */);

Давайте сначала разберемся, что такое _watcher по комментариям. В действительности, посмотрев на код forceupdate, можно понять:

Vue.prototype.$forceUpdate = function () {
 var vm = this;
 if (vm._watcher) {
  vm._watcher.update();
 }
 };

это вызов метода update _watcher vm. Используется для принудительного обновления. Почему это называется принудительным обновлением? В Vue есть проверка, если новоеЗначение == старое Значение, то не происходит обновления视图 watcher. Поэтому, если нужно обновить, нужно вызвать forceupdate для принудительного обновления. Давайте посмотрим на переданные параметры:

• vm: текущий экземпляр vm
• updateComponent очень важен, используется для обновления vnode на DOM позже.
• noop бессмысленная функция
• null опция, если ее нет, то null
• true используется для определения,哪个 watcher. Поскольку computed расчетные свойства и если вы configure watch в options, также используется new Watcher, а это позволяет отличить这三их. Ну, давайте посмотрим, что делает new Watcher, как показано на следующем рисунке.
  

　

Сначала我们看到 в коде есть это условие

if (isRenderWatcher) {
 vm._watcher = this;
}

Можно увидеть, что если контекст этого watcher предназначен для рендеринга视图, то есть вызывается new Watcher в mountComponent, то значение this передается _watcher. Затем watcher добавляется в _watchers, чтобы при уничтожении компонента можно было顺便 уничтожить и watcher. Затем инициализируется член watcher, код таков:

this.deep = this.user = this.lazy = this.sync = false;

Далее, это присваивание значений getter, this.getter = expOrFn. Памятливы ли вы о переданной функции updateComponent? Да, это присвоение значения getter. Затем мы дошли до:

this.value = this.lazy
 ? undefined
 : this.get();

Входим в метод get , посмотрим, что он делает. Код get показан на рисунке:

　

Мы можем увидеть, что сначала он выполняет pushTarget(this) , код pushTarget(this) следующий:

function pushTarget (_target) {
 if (Dep.target) { targetStack.push(Dep.target); }
 Dep.target = _target;
}

Или если у текущего Dep.target есть, то target放到 targetStack 里面, если нет, то установите текущий target, то есть этот watcher. Затем, это выполняет его getter атрибут, то есть только что传入 updateComponent функцию. А updateComponent - это то, о чем мы говорили в начале в третьем шаге.

Обобщение

Указанное выше - это то, что редактор介绍了给大家 о $mount в Vue, надеюсь, это поможет вам. Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий, редактор ответит вам своевременно. В этом также очень благодарим всех за поддержку сайта呐喊 учебника!

Заявление: контент этой статьи был взят из Интернета, авторские права принадлежат соответствующему автору, контент был предложен пользователями Интернета и загружен самостоятельно, этот сайт не имеет права собственности, не был обработан вручную и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма, пожалуйста, замените # на @) для сообщения о нарушении,并提供 соответствующие доказательства. Если будет установлено, что информация о нарушении прав интеллектуальной собственности верна, этот сайт немедленно удалят涉嫌侵权的内容。