Это 4-й день моего участия в ноябрьском испытании обновлений, подробности о мероприятии:Вызов последнего обновления 2021 г.
Всем привет, я Нед👀, ученик младших и начальных классов, который только что вошел во фронт менее двух лет🌹
Впереди еще долгий путь🎉, давайте работать вместе❤~
предисловие
Я помню, как Ю Да однажды сказал, зачем вы смотрите на исходный код Vue? Вам не нужен его исходный код, чтобы использовать Vue, вам просто нужно знать, как его использовать!
Но нам надо кататься, как же мы выделяемся, если не раскачиваем😥, я еще помню, что в этом году в группе Blue Bridge Cup был приятель, который не знал из какого вуза в одном классе, и уже читал исходный код Vue/React/Node.... Будучи маленьким новичком, я наблюдал, как большой парень болтает и дрожит в углу группы.
Недавно я просмотрел знания Vue на Nioke и составил эту статью, одна из которых предназначена для облегчения моего будущего обзора, а другая — для того, чтобы помочь некоторым друзьям, таким как я, просмотреть точки знаний, а учиться никогда не поздно.
В этой статье будет сказано:
- Каков именно жизненный цикл Vue
- Порядок выполнения жизненного цикла Vue
- что делать на каждом этапе жизненного цикла
- Какой жизненный цикл будет более подходящим для нашего запроса
Конечно, я буду говорить только об эмм, который я понимаю, это может быть очень поверхностно, пожалуйста, потерпите меня.
Каков именно жизненный цикл Vue?
Вместо того, чтобы быть жизненным циклом Vue, я думаю, лучше сказать, что это жизненный цикл его внутренних компонентов. Проще говоря, его жизненный цикл используется для описания всего процесса от внедрения до выхода. Что сложного? Является компонентом изСоздайтеначал испытыватьИнициализация данных,устанавливать,возобновитьПосле ожидания шагов, наконецразрушать.
Порядок выполнения жизненного цикла Vue
Он делится на три больших стадии в целом, а в трех больших стадиях есть подразделы на несколько малых стадий. Мы можем делать разные вещи на разных стадиях, и позже мы поговорим о разных стадиях, подходящих для нас, чтобы делать конкретные вещи.Давайте сначала посмотрим на порядок его выполнения:
Есть два пути, один из нихОфициальная документация VueВыше есть картинка для пояснения жизненного цикла, но так как многие мои знакомые такие же как и я, то чтение англоязычных документов должно сопровождаться уровнем перевода, поэтому я специально нашел в интернете переведенную китайскую версию и выложил сюда для ваша ссылка:
Эта диаграмма подробно объясняет весь процесс экземпляра Vue от создания до уничтожения.
Второй способ — напечатать его в проекте Vue.В консоли мы можем четко видеть, кто выполняет раньше, а кто поздно, и даже видим разницу между ними:
beforeCreate: function () {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "message: " + this.message)
},
created: function () {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.dir(this.$data)
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red", "el : " + (this.$el)); //undefined
console.dir(this.$el)
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
mounted: function () {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
console.dir(this.$el)
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.dir(this.$data)
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.dir(this.$el)
console.log("%c%s", "color:red", "data : " + this.$data);
console.dir(this.$data)
console.log("%c%s", "color:red", "message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.dir(this.$el)
console.log("%c%s", "color:red", "data : " + this.$data);
console.dir(this.$data)
console.log("%c%s", "color:red", "message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.dir(this.$el)
console.log("%c%s", "color:red", "data : " + this.$data);
console.dir(this.$data)
console.log("%c%s", "color:red", "message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.dir(this.$el)
console.log("%c%s", "color:red", "data : " + this.$data);
console.dir(this.$data)
console.log("%c%s", "color:red", "message: " + this.message)
}
горная сцена
На самом деле порядок этого кода и есть порядок его выполнения.Чтобы иметь обновленное состояние, я нашел демо тодолиста, который можно добавлять и удалять, для нашего удобства.Для начала просто заходим на страницу:
Мы видим, что
beforeCreateявляется первым, и в этом состоянии мы ничего не можем получить из информации, которую печатаем.
вошел послеcreatedсостояние, в котором нашаel, то есть элемент Дом еще недоступен, но мы уже можем его получитьdata, что значитcreatedданные были загружены, место в памяти было открыто для этого экземпляра Vue.
beforeMount, состояние перед монтированием, в моем понимании монтирование это процесс превращения виртуального Домика в реальный Дом, поэтому перед этим нашelКонечно, вы все еще не можете получить его.
mounted, монтирование окончено, а это значит, что виртуальный Дом смонтирован на реальный элемент, так что теперь мы можем получитьel. мы можем использоватьconsole.dirЧтобы напечатать некоторые атрибуты элемента, который нам нужен.
На этом наша фаза монтирования завершена.
фаза обновления
Давайте удалим список и посмотрим на статус обновления.
Всякий раз, когда мы переходим к изменению элемента страницы, он переходит в фазу обновления, т.е.beforeUpdate,updatedэти два состояния.
фаза разрушения
Теперь давайте взглянем на финальную фазу разрушения.
beforeDestroy, состояние перед уничтожением, перед уничтожением, поэтому наши элементы и данные можно распечатать так же, как этап после монтажа.
destroyed, На самом деле, что меня больше всего шокировало, так это состояние завершения уничтожения, я думал, что оно уничтожено, то он не должен ничего печатать, но это не так, он еще может что-то распечатать.
beforeDestroyа такжеdestroyed, являются жизненным циклом, который будет вызываться только тогда, когда мы покинем этот компонент.
что делать на каждом этапе жизненного цикла
Поговорим о том, что мы можем делать на разных этапах:
созданный:В состоянии, когда экземпляр Vue создан, мы можем получить доступ к методам и данным о данных, вычисленных, наблюдаемых, методах, но виртуальный Дом еще не подключен к реальному Дому, поэтому мы не можем получить доступ к нашим элементам Дома в это время. (Атрибут el и атрибут ref в настоящее время пусты).
На этом этапе мы можем выполнить простой Ajax, а также инициализировать страницу и другие операции.
до монтирования:Он вызывается перед монтированием и в это время находит виртуальный Дом и компилирует его в Render.
установлен:Виртуальный Дом был смонтирован на реальном Доме, теперь мы можем получить узел Дом,$refЭто также доступно в это время.
На этом этапе мы можем получить информацию об узле, сделать Ajax-запросы и выполнить некоторые операции с узлами.
перед обновлением:Он будет вызываться при обновлении данных ответа,beforeupdateВиртуальный Дом на данном этапе не обновлялся, поэтому доступ к существующему Дому все еще возможен.
На этом этапе мы можем получить доступ к существующему Дому и вручную удалить некоторые из добавленных событий прослушивателя.
обновлено:На данный момент патч завершен, Дом обновлен, и можно выполнять некоторые операции, которые зависят от нового Дом.
Но все же не рекомендуется выполнять операции с данными в это время, чтобы не попасть в бесконечный цикл (я наступил на эту яму)
перед уничтожением:Вызывается перед уничтожением экземпляра Vue, перед уничтожением нашего экземпляра.
На этом этапе могут быть выполнены некоторые операции, такие как таймеры уничтожения, связанные с сеткой глобальные события, уничтожение подключаемых объектов и т. д.
Жизненный цикл родительско-дочернего компонента
Я только что сказал, что это одна страница, так как же будет выглядеть жизненный цикл родительско-дочерних компонентов? Мы просто делаем простое дополнение.
Не знаю, заметили ли вы сейчас эти две линии на картинке:
Маленький на нашей страницеli— это подкомпонент, встроенный в эту огромную страницу, и мы также печатаем его жизненный цикл:
created() {
console.log('list created')
},
mounted() {
console.log('list mounted')
},
beforeUpdate() {
console.log('list before update')
},
updated() {
console.log('list updated')
},
beforeDestroy() {
// 及时销毁，否则可能造成内存泄露
console.log('list beforeDestroy')
},
destroyed(){
console.log('list Destroy')
}
Видно, что на этапе перед монтированием родительского компонента был смонтирован дочерний компонент.
Не только этап монтирования, мы также можем распечатать два других этапа, но я не буду здесь вдаваться в подробности, просто приду к выводу:
- Этап монтирования: родительский компонент beforeMount -> созданный дочерний компонент -> смонтированный дочерний компонент -> смонтированный родительский компонент
- Этап обновления: родительский компонент до обновления -> дочерний компонент до обновления -> дочерний компонент обновлен -> родительский компонент обновлен
- Фаза уничтожения: родительский компонент beforeDestroy -> дочерний компонент beforeDestroy -> дочерний компонент уничтожен -> родительский компонент уничтожен
Какой жизненный цикл будет более подходящим для нашего запроса
Итак, теперь у нас есть общее представление о жизненном цикле Vue Теперь давайте поговорим о том, в какой жизненный цикл следует поместить наш запрос.
Как правило, есть два ответа:createdа такжеmounted.
Как упоминалось выше, эти два ответа: первый — данные готовы, второй — даже DOM загружен, так какой же ответ правильный?
На самом деле возможно и то, и другое, ноmountedбудет лучше.
Кто-то может сказать:
createdВремя будет раньше, разве ранний звонок не сэкономит много времени? Будет ли это работать лучше?Не волнуйтесь, давайте посмотрим это по частям
- Во-первых, это очень рано, но не на несколько микросекунд, так что это не особо улучшает производительность.
- Во-вторых, мы
createdСтадия не занимается рендерингом, поэтому далее мы будем делать рендеринг Dom, но если в это время мы также будем выполнять операции Ajax, данные будут возвращены после окончания Ajax, и мы вставим их в основной поток для запуска, для обработки данные, но нам нужно знать,В механизме браузера поток рендеринга и поток js являются взаимоисключающими.,таквозможноПока мы рендерим, другой стороне, возможно, придется обрабатывать данные, возвращаемые Ajax.вероятно, будет прерван, для повторного рендеринга после обработки массива.
то еслиcreatedКак насчет нескольких Ajax? Мы должны повторно выполнить рендеринг снова, поэтому вcreatedЭто явно не подходит для выполнения запросов Ajax.
- Кроме того, иногда нам может понадобиться выполнить некоторые операции Dom в функции обратного вызова, когда мы получаем возвращаемые данные, но
createdэтапе мы еще не загрузили настоящий Дом, так что, условно говоря, мы все еще находимся вmountedЛучше позвонить
Если это рендеринг на стороне сервера, мы помещаем его в
createdв, потому что сервер не поддерживаетmounted.
напиши в конце
Vue — это самая длинная вещь, которая сопровождает меня в пути изучения интерфейса, но я все еще не изучил его как следует, ххх.
Работай усерднее, давай~