Полностью решить проблему функции ловушки жизненного цикла vue2.0

Сначала представьте блок-схему жизненного цикла на официальном сайте vue.

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

Потратьте 10 минут на чтение, поверьте, вы обязательно что-то приобретете (как раз отсылает к новичку, автор тоже новый новичок во фронтенде, прошу меня простить. 😁😁)

Всего в Vue2.0 есть 10 хуков жизненного цикла, которые кратко представлены следующим образом:

beforeCreate: Вызывается после инициализации экземпляра, перед конфигурацией наблюдателя данных и события/события наблюдателя.
created: вызывается после создания экземпляра. На этом шаге экземпляр завершил следующую настройку: наблюдатель данных, работа со свойствами и методами и обратный вызов событий наблюдения/события. Однако фаза монтирования еще не началась, и свойство $el в настоящее время не отображается.
beforeMount: связанная функция рендеринга вызывается в первый раз до начала монтирования.
mounted:el — это вновь созданная виртуальная машина.el также есть в документации.
beforeUpdate: вызывается при обновлении данных перед повторным рендерингом и исправлением виртуального DOM. Вы можете дополнительно изменить состояние в этом хуке, не запуская дополнительный процесс повторного рендеринга.
updated: Этот хук вызывается после повторного рендеринга и исправления виртуального DOM из-за изменений данных. При вызове этого хука DOM компонента обновляется, поэтому теперь вы можете выполнять операции, зависящие от DOM.
activated: Вызывается при активации компонента поддержки активности.
deactivated: Вызывается, когда компонент поддержки активности деактивирован.
beforeDestroy: вызывается перед уничтожением экземпляра. На этом этапе экземпляр все еще полностью доступен.
destroyed: вызывается после уничтожения экземпляра Vue. После вызова все, на что указывает экземпляр Vue, будет развязано, все прослушиватели событий будут удалены, а все дочерние экземпляры уничтожены.

Давай и код! Код можно запустить напрямую.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue-LifeClyle</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app" class="jing">
        <p>{{message}}</p>
        <keep-alive>
            <jh-component msg="2017年6月9日" v-if="show"></jh-component>
        </keep-alive>
    </div>
</body>
<script>
    var haohao = {
        template: '<div>from haohao: {{msg}}</div>',
        props: ['msg'],
        deactivated: function() {
            console.log('component deactivated!');
        },
        activated: function() {
            console.log('component activated');
        }
    };
    var app = new Vue({
        el: '#app',
        data: function() {
            return {
                message: 'jingjing',
                show: true //控制子组件是否显示
            };
        },
        beforeCreate: function() {
            console.group('beforeCreate Vue实例创建前的状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(state);
        },
        created: function() {
            console.group('created Vue实例创建完毕后状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(state);
        },
        beforeMount: function() {
            console.group('beforeMount 挂载前状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        mounted: function() {
            console.group('mounted 挂载后状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        beforeUpdate: function() {
            console.group('beforeUpdate 更新前状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
            console.log('beforeUpdate = ' + document.getElementsByTagName('p')[0].innerHTML);
        },
        updated: function() {
            console.group('updated 更新完成状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
            console.log('Updated = ' + document.getElementsByTagName('p')[0].innerHTML);
        },
        beforeDestroy: function() {
            console.group('beforeDestroy 销毁前状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        destroyed: function() {
            console.group('destroyed 销毁完成状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        components: {
            'jh-component': haohao
        }
    });
</script>

<style>
    .jing {
        font-size: 50px;
        font-weight: bolder;
    }
</style>

</html>

Структура кода не сложна для понимания

создалappКорневой экземпляр Vue, смонтируйте его в элементе Dom с идентификатором страницы app. Затем локально зарегистрируйте компонент с именемhaohaoи зарегистрируйте его в корневом экземпляре, сделав его доступным в области действия корневого экземпляра. использовать подкомпоненты<keep-alive>пакет для подготовки к следующему тесту.

о<keep-alive>Здесь проблема не будет подробно рассматриваться, вы можете обратиться к следующим двум статьям.
1,zhuanlan.zhihu.com/p/96740001
2,у-у-у. Краткое описание.com/afraid/4 не 55 из 312-х…

Хорошо, теперь мы можем открыть инструменты разработчика в Google Chrome и начать тестирование!

1. перед созданием и созданием

beforeCreateПри выполнении:dataа такжеelне инициализированы, значение равноundefined
createdПри выполнении:Vueэкземпляр наблюдаемого объекта данныхdataУже настроено, уже доступноapp.messageценность, ноVueкорень, используемый экземпляромDOMэлементelне инициализирован

2. beforeMount и монтируется и активируется и деактивируется

beforeMountПри выполнении:dataа такжеelинициализируются, но из{{message}}Видно, что в это времяelНе делает данные, вот приложениеVirtual DOM(Виртуальный дом), занимайте первую яму. НазадmountedВизуализировать значение, когда оно смонтировано
mountedПри выполнении: на данный момент el отрендерен и смонтирован в экземпляре
мы видим в консолиcomponent activatedпечатается с указанием подкомпонентовjh-componentодеяло<keep-alive>пакет, сelспровоцировано маунтом.
Затем выполняем некоторые операции и вводим в консольapp.show = falseДавайте посмотрим, что изменилось.Результаты тестирования таковы:

Как, ты нашел что-нибудь? 😉😉😉
Потому что мы изменили здесьdataзначение, поэтому он сработаетbeforeUpdateа такжеupdatedФункция хука, независимо от этих двух функций, мы видим, что сработал деактивированный хук, что указывает на то, что<keep-alive>Неполноценный.
При этом наши дочерние компоненты также исчезнут.

3. перед обновлением и обновлением

Продолжаем набирать в консолиapp.message = 'haohao'
мы обнаруживаемbeforeUpdateа такжеupdatedПри срабатывании,elДанные были обработаны, но согласно информации, напечатанной на консолиbeforeUpdate = jingjingа такжеupdated = haohaoИзвестно, что только когдаupdatedПри вызове хука компонентdomбудет обновлено.

4. перед уничтожением и уничтожением

Введите в консолиapp.$destroy()ты можешь поставитьvueЭкземпляр уничтожен, но мы находим экземпляр до и после уничтоженияdomНичего не изменилось в структуре, фактически изменения произошли в другом месте.
Автор сверился с официальным описанием документа: После уничтожения экземпляраVueВсе, на что указывает экземпляр, освобождается, все прослушиватели событий удаляются, а все дочерние экземпляры уничтожаются.

Теперь мы можем сделать последний шаг, чтобы подтвердить сделанный выше вывод.
Теперь введите в консолиapp.message = 'jingjing'Результаты приведены ниже:

мы изменилисьdataсерединаmessageсвойство, но дом не имеет никакого ответа. иллюстрироватьVueВсе, что указано в экземпляре, было развязано. Наконец-то доделал 😄😄😄

напиши в конце

The author is just a front-end expert (●—●) This article is the first one. If there are mistakes in the article, please forgive me, it is better to point out the mistakes, so that newcomers have one more opportunity to учить. 😊😊

Эта статья написана очень простым способом. Если вам нужно узнать больше о контенте, вы можете взглянуть на большой парень.OBKoroНаписаны статьи -Функция ловушки Vue [защита навигации маршрутизации, поддержка активности, ловушка жизненного цикла]

Я надеюсь, что друзья, которые прочитали это, могут поставить большой палец вверх перед отъездом Ваша поддержка - самая большая поддержка для меня! ! !

Справочная документация

cn.vuejs.org/v2/api/#options-…