Подробный жизненный цикл Vue

Vue.js
Подробный жизненный цикл Vue

[TOC]

1. Введение в жизненный цикл Vue

Значение жизненного цикла:От создания, эксплуатации и уничтожения экземпляра Vue всегда происходят различные события, которые в совокупности называются жизненным циклом.

Общие имена:Хук жизненного цикла == Функция жизненного цикла == Событие жизненного цикла

1.1 Классификация жизненного цикла

Далее мы изучим жизненный цикл Vue по очереди из этих трех этапов.

1.2 Этап создания

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

Создание демонстрации жизненного цикла фазы:

  • Мы можем сделать это, добавив в кодdebuggerключевое слово для достижения функции отладки точки останова, каждыйdebuggerкак точка останова
  • После добавления отладки точки останова мы можем просматривать изменения данных на каждом этапе жизненного цикла и просматривать время рендеринга в браузере.
  • Вы можете изучить исходный код Vue, отладив процесс вызова стека вызовов через точки останова.
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue-Demo</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
    <script type="text/javascript">
        var v = new Vue( {
            el: "#app",
            data: {
                message: "hello world!"
            },
            // 如果没有template,则会将el中元素当作template，如果有template，则会覆盖el中的dom
            template: "<div id='app'><h1>{{ message }}</h1></div>",
            // Vue实例刚刚被初始化，data和methods还没有值
            beforeCreate() {
                console.log( '1. beforeCreate=====' + this.message )
                debugger
            },
            // Vue实例创建完成，data和methods可以被使用了
            created() {
                console.log( '2. created=====' + this.message )
                debugger
            },
            // 内存中的Dom已经渲染完成，还没有显示到浏览器
            beforeMount() {
                console.log( '3. beforeMount=====' + this.message )
                debugger
            },
            //模版已经渲染到浏览器，创建阶段结束
            mounted() {
                debugger
                console.log( '4. mounted=====' + this.message )
            }
        } )
    </script>
</body>

</html>

результат операции:

1.3 Этап эксплуатации

  • перед обновлением:Данные интерфейса или старые, но данные были обновлены, а страницы данных не синхронизированы
  • Промежуточная обработка (не жизненный цикл, простая в освоении абстрактная промежуточная обработка):Сначала по данным в данных рендерится новый DOM в памяти, при обновлении нового дерева DOM он будет повторно рендериться в реальный интерфейс, таким образом реализуя слой представления из слоя данных (модели) --- "вид слоя. (вид) переход
  • обновлено:Страница повторно отображается, и данные на странице согласуются с данными

Демонстрация рабочей стадии:

  • Описание: Копию кода можно использовать напрямую, обратите внимание на изменение сообщения, в котором остаются две точки останова, и изменение данных страницы.
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue-Demo</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue( {
            el: "#app",
            data: {
                message: "hello world!"
            },
            // 如果没有template,则会将el中元素当作template，如果有template，则会覆盖el中的dom
            template: "<div id='app'><h1>{{ message }}</h1></div>",
            beforeCreate() {
                console.log( '1. beforeCreate=====' + this.message )
            },
            created() {
                console.log( '2. created=====' + this.message )
            },
            beforeMount() {
                console.log( '3. beforeMount=====' + this.message )
            },
            mounted() {
                console.log( '4. mounted=====' + this.message )
            },
            beforeUpdate () {
                console.log("此时的message已经更新，但是浏览器页面上的数据没有发生变化",this.message)
                // 修改数据之后，添加断点，页面上的数据和当前message不一致
                debugger
            },
            updated () {
                console.log("更新结束，页面数据已更新")
            }
        } )
        // 在修改数据之前，添加断点
        debugger
        vm.message = '你好，Vue生命周期的运行阶段'
    </script>
</body>

</html>

результат операции:

1.4 Фаза разрушения

  • перед уничтожением:Когда этот метод выполняется, жизненный цикл Vue вступил в стадию уничтожения, но различные данные об экземпляре все еще доступны.
  • уничтожено:Все компоненты были уничтожены, экземпляр Vue был уничтожен, и любые данные во Vue недоступны.

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

Категории