Объясните Vue простым способом, ответив на несколько вопросов

🎙 Предисловие

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

Vue подобен черному ящику, мы вводим некоторые данные, и он дает нам обработанную страницу. Для разработки это удобно, нам не нужно заботиться о том, когда запускать обновление, потому что Vue уже делает это за нас. Однако перед лицом некоторых острых проблем нам необходимо проанализировать, когда данные изменились, кто их изменил, почему обновление было запущено, почему обновление не может быть запущено и т. д. В настоящее время это сложно, потому что Это все спрятано внутри черного ящика, который мы не можем наблюдать, не говоря уже о контроле.

Итак, я хочу хорошо использовать Vue на самом деле довольно сложно.

Столкнувшись с этими проблемами, мы часто анализируем проблемы, основываясь на личном опыте и личном понимании, и тратим много времени на отладку, что очень неэффективно. Почему бы нам не воспользоваться моментом, чтобы разобраться в деталях реализации Vue.

🔑Категория вопросов

На самом деле, согласно методу разработки Vue, обычно существуют следующие процессы:

1. Сначала инициализируйте экземпляр Vue, а затем передайте различную информацию о конфигурации.
2. попробуйте изменить некоторые данные
3. Ждем обновления

Таким образом, вопросы, с которыми мы сталкиваемся, можно сгруппировать в следующие три категории:

1. Каков процесс инициализации Vue
2. Приведут ли изменения данных к обновлению представлений?
3. Когда изменение данных вызывает обновление представления

💡 Вопрос

Q1. Я не понимаю информацию о конфигурации Vue (первый тип проблемы)

Обычно один из наших экземпляров Vue выглядит так:

const options = {
  props: ...,
  data: ...,
  computed: ...,
  watch: ...,
  methods: ...,
  created: ...,
  mounted: ...
}
new Vue(options).$mount('#app')

Возможно, мы знаем значение каждого свойства, но не знаем, как эти свойства вызываются и в каком порядке они инициализируются. Создавая экземпляр Vue в этом «непоследовательном» объекте конфигурации, мы по своей сути теряем некоторую важную «информацию», то есть порядок выполнения кода, что принесет ряд проблем с пониманием.

На самом деле, из диаграммы жизненного цикла в документе или из исходного кода мы узнаем, что вnew Vue(opions)В этом процессе, то есть в конструкторе класса Vue, Vue будет «синхронизировать» по очередиprops,methods,data,computed,watchВыньте его, затем инициализируйте отдельно, а затем выполните созданный нами метод. Наконец, когда мы выполняем$mount('#app)После этого выполняем наш смонтированный метод.

Зная эту последовательность, можно решить многие сомнения, такие как:

1. При первом использовании вычисляемого свойства в часах, созданных, смонтированных, было ли вычисленное свойство инициализировано?
2. Можно ли инициализировать свойство данных с помощью вычисляемого свойства
3. Изменение свойств мониторинга часов в файле created вызовет выполнение часов? Если добавлено немедленное, сколько раз оно будет выполняться?
4. ...ждите вопросов, в которых вы не уверены

Q2.Почему мои измененные данные не вступают в силу (второй тип вопроса)

Более или менее мы столкнемся с проблемой, что мы изменили данные, но представление не обновляется, например:

<template>
  <div>
    <p>{{lib}}</p>
    <p>{{detail.version}}</p>
    <p>{{detail.type}}</p>
  </div>
</template>

export default {
  data() {
    return {
      lib: 'vue',
      detail: {
        version: '2.5.1',
        // type: 'fe'
      }
    }
  },
  mounted() {
    this.detail.type = 'fe'
  }
}

// 输出
vue
2.5.1

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

Далее обновим код:

// 把mounted改成created
created() {
  this.detail.type = 'fe'
}

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

Давайте снова изменим:

created() {
  this.detail.type = 'fe'
},
mounted() {
  this.detail.type = 'be'
}

Мы обнаружим, что вместо be по-прежнему отображается fe, что подтверждает предыдущий вывод.

Одним словом: обновление представления будет запускаться только при изменении наблюдаемых данных.

Q3: Как Vue использует цикл обработки событий (третий тип вопроса)

Этот вопрос довольно абстрактный, но вот несколько конкретных примеров:

• Как точно судить, когда обработчик часов выполняется и сколько раз
• Когда я изменяю данные, когда будет запущено обновление представления
• Разница между $nextTick и setTimeou

Можно сказать,Суть Vue на самом деле заключается в хорошо спроектированной системе циклов событий., чтобы понять Vue, вы должны понимать две вещи:

1. сам цикл событий
2. Система циклов событий Vue

Цикл событий должен понимать уровень задач и микрозадач, а система циклов событий Vue должна читать документацию, понимать мысли автора и просматривать исходный код. Ниже мы приводим несколько примеров

Q3-1: Когда будет выполнен обработчик часов

export default {
  data() {
    return {
      lib: 'vue',
      lock: true
    }
  },
  watch: {
    lib(val, old) {
      if(this.lock) {
        console.log(`lib changed from ${old} to ${val}`)        
      }
    }
  },
  created() {
    this.lock = false;
    this.lib = 'react'
    this.lock = true;
  }
}

// 输出
lib changed from vue to react

Согласно нашему общепринятому пониманию, когда мы выполняемthis.lib = 'reactВ это время часы должны сработать, но в это время блокировка на самом деле ложная и не должна выводиться. Здесь есть «ловушка», то есть мы ошибочно думаем, что внутренний механизм выполнения Vue является синхронным, но на самом деле Vue будет полностью использовать цикл событий для выполнения некоторых асинхронных вещей, таких как механизм выполнения обработчика здесь.

Согласно Q1, в сочетании с определенным чтением исходного кода, мы знаем, что последовательность инициализации этого примера такова:

1. Сначала инициализируйте данные, удалите два атрибута lib и lock и соответственно наблюдайте
2. Инициализируйте часы, извлеките ключ и значение атрибута lib (т.е. обработчика) и используйте их для инициализации наблюдателя, тем самым сформировав наблюдатель для мониторинга атрибута lib и ожидая «подходящего времени» для выполнения нашего данного обработчика.
3. Выполните созданную функцию цикла объявления.В это время инициализация данных завершена, а затем выполните ее первой.this.lock = false, что ни на что не повлияет. повторно выполнитьthis.lib = 'react', В это время запускается метод установки библиотеки, а затем Vue обнаружит наблюдателя, который прослушивает свойство библиотеки, и выполнит его метод обновления.

update () {
  queueWatcher(this)
}

Мы обнаружили, что наблюдатель не сразу выполнил обработчик, а инициировал queueWatcher:

flushing = false
waiting = false
export function queueWatcher (watcher) {
  if (!flushing) {
    queue.push(watcher)
  }
  // queue the flush
  if (!waiting) {
    waiting = true
    // flushSchedulerQueueh会依次把queue中的watcher拿出来执行
    nextTick(flushSchedulerQueue) 
  }
}

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

queue.push(watcher)
nextTick(flushSchedulerQueue)

Как видите, наш обработчик будет выполняться в nextTick (о nextTick мы поговорим позже, что можно временно понимать как setTimeout), и ждать следующего цикла событий,this.lock = trueУже казнили, так что утешаемся.

Резюме: теперь у нас есть понимание механизма цикла событий Vue, то есть ответ, вызванный изменениями данных в Vue, завершается, полагаясь на механизм цикла событий.

Вопрос 3-2. Подробные сведения о цикле обработки событий Vue.

Недостаточно знать, что ответ данных зависит от цикла событий, потому что наш код будет становиться все более и более сложным, и часто будет несколько асинхронных задач.В настоящее время нам нужно точно знать, когда наши часы сработало и каково наше мнение.обновление время от времени. Поэтому нам нужно изучить более подробно.

Q3-2-1: Измените значение напрямую

export default {
  data() {
    return {
      lib: 'vue'
    }
  },
  watch: {
    lib(val, old) {
      console.log(`lib changed from ${old} to ${val}`)        
    }
  },
  created() {
    this.lib = 'react'
    this.lib = 'angular'
  }
}

// 输出
lib changed from vue to angular

Есть две проблемы:

1. почему часы выполняются только один раз
2. почему угловатый

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

Согласно Q3-1, библиотека в watch создаст наблюдатель и будет прослушивать изменения в свойствах lib. когда мы впервыеthis.lib = 'react', В это время сработает сеттер lib, и будет найден отслеживаемый наблюдатель, и в свою очередь будет выполнен метод обновления наблюдателя.Метод обновления вызовет метод queueWatcher.Теперь давайте взглянем на более полный код наблюдателя очереди:

/**
 * Push a watcher into the watcher queue.
 * Jobs with duplicate IDs will be skipped unless it's
 * pushed when the queue is being flushed.
 */
export function queueWatcher (watcher: Watcher) {
  const id = watcher.id
  // has维持着所有watcher的id
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      queue.push(watcher)
    } else {
      ...
    }
    // queue the flush
    if (!waiting) {
      waiting = true
      nextTick(flushSchedulerQueue)
    }
  }
}

Как видите, естьif (has[id] == null)Суждение, вы должны знать, что наши часы имеют только один атрибут lib, поэтому будет инициализирован только один наблюдатель, поэтому при втором выполненииthis.lib = 'angular'В то время queueWatcher фактически ничего не делал.

Таким образом, в результате, несмотря на два изменения библиотеки, наблюдатель выполнит обработчик только один раз в следующем цикле событий.

Q3-2-2 Изменить значение в setTimeout

export default {
  data() {
    return {
      lib: 'vue'
    }
  },
  watch: {
    lib(val, old) {
      console.log(`lib changed from ${old} to ${val}`)        
    }
  },
  created() {
    setTimeout(() => {
      this.lib = 'react'
    }, 0)
    setTimeout(() => {
      this.lib = 'angular'
    }, 0)
  }
}

// 输出
lib changed from vue to react
lib changed from react to angular

Почему теперь он выводится дважды? Посмотрите еще раз на метод queueWatcher:

export function queueWatcher (watcher: Watcher) {
  const id = watcher.id
  // has维持着所有watcher的id
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      queue.push(watcher)
    } else {
      ...
    }
    // queue the flush
    if (!waiting) {
      waiting = true
      nextTick(flushSchedulerQueue)
    }
  }
}

Также нужно посмотреть на метод flushSchedulerQueue

/**
 * Flush both queues and run the watchers.
 */
function flushSchedulerQueue () {
  flushing = true
  let watcher, id
  ...
  // do not cache length because more watchers might be pushed
  // as we run existing watchers
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index]
    if (watcher.before) {
      watcher.before()
    }
    id = watcher.id
    has[id] = null
    watcher.run()
    ...
  }
  ...
}

Нажмите на меня, чтобы увидеть предварительные этапы (задача и микрозадача в цикле событий)

Когда Vue выполнит созданный метод, будут выполнены два setTimeouts, а setTimeout — это задача, поэтому две написанные нами функции setTimeout будут выполняться в двух циклах событий соответственно, а не один раз, как показано ниже:

1. Первый цикл событий (задача сценария, также задача): инициализация vue, созданный метод инициирует две асинхронные задачи
2. Второй цикл событий (задача): начать выполнение обратного вызова первого setTimeout
3. Третий цикл событий (задача): начать выполнение обратного вызова второго setTimeout

Во втором цикле событий мы модифицировали библиотеку, одновременно запустили соответствующий наблюдатель и, наконец, выполнили метод queueWatcher, поэтому текущий наблюдатель был помещен в очередь очереди и ждал выполнения nextTick, а nextTick был микрозадачей. , поэтому наш описанный выше процесс стал таким:

1. Первый цикл обработки событий (задача сценария): инициализация vue, созданный метод инициирует две асинхронные задачи.
2. Второй цикл событий (задача): начать выполнение обратного вызова первого setTimeout
3. Второй цикл событий (микрозадача):nextTick(flushSchedulerQueue)Выполните watcher.run (то есть выполните обработчик) и очистите has[id]
4. Третий цикл событий (задача): начать выполнение обратного вызова второго setTimeout

Примечание. В цикле событий js сначала выполняются все коды синхронизации, а затем макрозадача будет взята из очереди макрозадач для выполнения. Затем выньте все микрозадачи из очереди микрозадач и последовательно выполните их. После завершения всего этого процесса запустится следующий цикл обработки событий.

Далее идет третий цикл событий, мы снова модифицируем библиотеку, тот же процесс, потому что has[id] был очищен на предыдущем шаге, поэтому обновление этой библиотеки точно такое же, как и в прошлый раз, поэтому процесс становится таким:

1. Первый цикл обработки событий (задача сценария): инициализация vue, созданный метод инициирует две асинхронные задачи.
2. Второй цикл событий (задача): начать выполнение обратного вызова первого setTimeout
3. Второй цикл событий (микрозадача):nextTick(flushSchedulerQueue)Выполните watcher.run (то есть выполните обработчик) и очистите has[id]
4. Третий цикл событий (задача): начать выполнение обратного вызова второго setTimeout
5. Третий цикл событий (microTask):nextTick(flushSchedulerQueue)Выполните watcher.run (то есть выполните обработчик) и очистите has[id]

Таким образом, он будет напечатан дважды.

Q3-2-3 Изменить значение в nextTick

export default {
  data() {
    return {
      lib: 'vue'
    }
  },
  watch: {
    lib(val, old) {
      console.log(`lib changed from ${old} to ${val}`)        
    }
  },
  created() {
    this.$nextTick(() => {
      this.lib = 'react'
    })
    this.$nextTick(() => {
      this.lib = 'angular'
    })
  }
}

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

1. Первый цикл событий (задача сценария): инициализация vue, созданный метод инициирует две асинхронные задачи microTask
2. Второй цикл событий (задача): нет macroTask
3. Второй цикл событий (microTask): теперь очередь задач microTask выглядит так[callback1, callback2], Возьмите первый callback1 из очереди microTask, выполните его, инициируйте обновление библиотеки и выполните queueWatcher, который запускает асинхронную задачу nextTick (microTask) и помещает ее в очередь задач microTask, очередь становится такой[callback2, callback3]
4. Второй цикл событий (microTask): взять callback2 из очереди micoTask, выполнить его, запустить обновление библиотеки и выполнить queueWatcher, и в это время has[id] уже имеет значение (поскольку callback3 не был выполнен, поэтому имеет[ id] еще не выполнялся. Пусто), так что просто пропустите его
5. Второй цикл обработки событий (microTask): взять callback3 из очереди microTask и выполнить его

Как видите, именно поэтому он печатается только один раз.

Суммировать

На самом деле идея дизайна Vue такова: цикл событий + двусторонняя привязка.Пока мы понимаем эти два момента, мы можем по-настоящему освоить Vue, писать стабильный и предсказуемый код и легко решать различные проблемы, возникающие при использовании. .

Мало иметь дизайн-мышление, нужны инструменты для реализации такого мышления, чем и занимаются компилятор и vdom, а еще есть чему поучиться 💪🏻.