[Галантерейные товары] Подробно объясните жизненный цикл vue.

Vue.js

определение жизненного цикла

Каждый экземпляр vue перед созданием проходит ряд процессов инициализации, этот процесс является жизненным циклом vue. В деталях это серия процессов, таких как создание экземпляра Vue, инициализация данных, компиляция шаблонов, зависание в dom->рендеринг, обновление->рендеринг, выгрузка и т. д. Мы называем это жизненным циклом vue, и каждый этап имеет соответствующий хук события.

Хук-функция: функция, которая вызывается, когда код выполняется до определенной стадии, которая также является функцией обратного вызова.

Диаграмма жизненного цикла

Жизненный цикл разбора кода

1. новый Vue() для создания экземпляра

2. События инициализации и жизненный цикл

3.beforeCreate

Код:

 let vm = new Vue({
    // 当前这个实例他的父亲是谁 儿子谁 有一套
    beforeCreate(){
        console.log(this); 
        console.log('---beforeCreate---');    
    },
    data(){
        return{
            msg:'hello'
        }
    }
})

Из распечатанного этого видно, что подписка опубликована в это времяnСобственные API-интерфейсы Vue, такие как emit, были инициализированы. Но не может получить доступ к данным, вычисленным, смотреть, методам и данным о методах. Эта функция-ловушка не может выполнять бизнес-логику.В общем, что эта функция-ловушка может: добавлять некоторые специфические свойства к каждому компоненту, такие как микширование.

4. Инициализация инъекции и проверка

5.created

Этот экземпляр реализовал угнание данных и имеет прикрепленные методы и вычисляемые свойства для экземпляра, поэтому реальный элемент DOM не может быть получен. не могу получить доступel，Содержимое свойства Ref не пусто. Эта функция ловушки может отправлять запросы AXIOS, чтобы сохранить запрос обратно в DATA.

let vm = new Vue({
    beforeCreate(){
        console.log(this);
        console.log('---beforeCreate---'); 
    },
    created(){
        console.log(this);
        console.log('---created---');
        debugger;
    },
    data(){
        return{
            msg:'hello'
        }
    }
})

6.beforemount

Следующим шагом является рендеринг, но перед рендерингом он сначала оценит «есть ли указанная опция el». Обычный способ написания: el:'app', а другой: vm.$mount('app' )

$mount может указывать элемент. Если элемент не указан, он будет отображаться в узле в памяти по умолчанию.
let vm = new Vue({
    beforeCreate(){
        console.log('---beforeCreate---')    
    },
    created(){
        console.log(this) 
        console.log('---created---') 
    },
    beforeMount(){
        console.log('---beforeMount---') 
    },
    data(){
        return{
            msg:'hello'
        }
    }
})
vm.$mount()

Хотя рендеринг не удался, он перешел к функции ловушки beforeMount, для которой требуется либо шаблон, либо функция рендеринга. Добавьте одно из двух:

render(){
        
    },
template:'<div>hello</div>',

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

vm.$mount()
console.log(vm.$el)
document.body.appendChild(vm.$el)

Преимущество: Вы можете вставить отображаемый элемент в нужный узел.

В блок-схеме жизненного цикла после интерпретации параметра el будет интерпретироваться, существует ли «указанный параметр шаблона», то есть шаблон скомпилирован в функцию рендеринга, а HTML вне el скомпилирован как шаблон. Что такое HTML вне el? Вот что мы обычно используем:

<div id="app"></div>
vm.$mount('#app')

Этот div представляет собой HTML-код вне el, который затем единообразно компилируется в функцию рендеринга.

let vm = new Vue({
    beforeCreate(){
        console.log('---beforeCreate---')    
    },
    created(){
        console.log(this) 
        console.log('---created---') 
    },
    render(){
        console.log('---render---') 
    },
    template:'<div>hello</div>',
    beforeMount(){
        console.log('---beforeMount---') 
    },
    data(){
        return{
            msg:'hello'
        }
    }
})
vm.$mount('#app')
console.log(vm.$el)
document.body.appendChild(vm.$el)

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

Отношения приоритета: рендеринг>шаблон>выходной html

Что делает beforeMount, так это вызывает метод рендеринга, но обычно не добавляет бизнес-логику

7.mounted

Экземпляр монтируется в DOM. В это время DOM-узел можно получить через DOM API и получить доступ к атрибуту $ref.

 let vm = new Vue({
    beforeCreate(){
        console.log('---beforeCreate---')    
    },
    created(){
        console.log(this) 
        console.log('---created---') 
    },
    template:'<div>hello</div>',
    beforeMount(){
        console.log('---beforeMount---') 
    },
    mounted(){
        console.log('---mounted---') 
        console.log(vm.$el)
    },
    data(){
        return{
            msg:'hello'
        }
    }
})
vm.$mount('#app')

8.beforeupdate

Метод обновления vue находится на уровне компонентов.Например, в нашем проекте будет много компонентов, и в корневом компоненте есть ссылки на 3 компонента.Один из компонентов обновляется и перерендерится (асинхронный рендеринг), а два других будут не подвергаться повторному рендерингу.

Вы можете добавить некоторые обновления данных в эту функцию ловушки, не вызывая множественных обновлений. Вызывается при обновлении реактивных данных перед исправлением виртуального DOM. Функция, которую необходимо выполнить перед обновлением компонента. Данные обновляются, но внутренний HTML в dom, соответствующий объекту vue (component), не изменился, поэтому он вызывается перед обновлением компонента.

<div id="app">{{msg}}</div>
<script>
let vm = new Vue({
    beforeCreate(){
        console.log('---beforeCreate---')    
    },
    created(){
        console.log(this) 
        console.log('---created---') 
    },
    beforeMount(){
        console.log('---beforeMount---') 
    },
    mounted(){
        console.log('---mounted---') 
        console.log(vm.$el)
    },
    beforeupdate(){
        console.log('---beforeupdate---') 
    },
    data(){
        return{
            msg:'10'
        }
    }
})
vm.$mount('#app')
</script>

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

9.updated

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

Не обновляйте данные с помощью этой функции ловушки, может возникнуть бесконечный цикл
updated(){
        this.msg= Math.random();
        console.log('---updated---') 
    },


После обновления он будет перерендерен, а метод рандера при этом будет убран.

10.beforeDestroy

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

11.destory

Общие методы уничтожения: вручную ( vm.$destory() удаляет всех наблюдателей ), удаляет компоненты и переключает маршруты. Вызывается после уничтожения экземпляра.После вызова все указанные экземпляром Vue будут развязаны, все прослушиватели событий будут удалены, а все дочерние экземпляры будут уничтожены. Вид не обновляется,

Категории