面试常问的Vue实例的生命周期

生命周期

Vue实例从创建到销毁的过程，就是生命周期。从开始创建，初始化数据，编译模板，挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

钩子函数

在生命周期中被自动执行的函数就叫：钩子函数/生命周期钩子

生命周期钩子函数的用途

在生命周期阶段会被自动调用，为我们开发者提供了一个自己执行的逻辑的机会

在Vue生命周期中共有八个钩子：

• beforeCreat
• created
• beforeMount
• mountedd
• beforeUpdate
• updated
• beforeDestroy
• destroyed
  接下来我们一个个分析一波，代码走起

var vw=new Vue({
            el:"#fyc",
            data:{
                text:"我是默认值"
            },
            beforeCreate(){
                // $el:过去页面中关联的DOM元素
                console.log('我是beforeCreate钩子---------');
                console.log(this.$el);
                console.log(this.$data);
            },
            created(){
                console.log('我是created钩子---------');
                console.log(this.$el);
                console.log(this.$data);
            },
            beforeMount(){
                console.log('我是beforeMount钩子---------');
                console.log(this.$el);
                console.log(this.$data);
                // render()渲染方法把内容进行页面的渲染
            },
            mounted(){
                console.log('我是mounted钩子---------');
                console.log(this.$el);
                console.log(this.$data);
            },
            beforeUpdate(){
                console.log('我是beforeUpdate钩子---------');
                console.log(this.$el);
                console.log(this.$data);
            },
            updated(){
                console.log('我是updated钩子---------');
                console.log(this.$el);
                console.log(this.$data);
            },
            beforeDestroy(){
                console.log('我是beforeDestroy钩子---------');
                console.log(this.$el);
                console.log(this.$data);
            },
            destroyed(){
                console.log('我是destroyed钩子---------');
                console.log(this.$el);
                console.log(this.$data);
            }
        })

打印结果如下

我们可以看到一个vue实例在创建过程中调用的几个生命周期钩子。

1.beforeCreate钩子(实例创建开始)

实例的挂载元素el和数据对象data都为undefined，还未初始化，$el里面没有东西

2.created钩子(实例创建结束)

数据和视图已经绑定 data的数据改变了那么视图也会随之改变，$el里面还没东西

3.beforeMounted(载入前)

$el和data都初始化了，但是在挂载之前为虚拟dom节点，{{text}}只是占位的

4.mounted(载入后)

vue实例挂载完成，data数据成功渲染,$el有内容
当我们通过控制台输入vw.text=“数据修改”,修改data的数据时，会触发以下这两个钩子

5.beforeUpadte(数据准备更新)

当data的数据准备发生改变时，会触发这个钩子

6.updated(数据更新完毕)

当data的数据更行完成后，会触发这个钩子

7.beforeDestroy(实例销毁前)

实例销毁之前调用，实例还是可以正常使用的

8.destroyed(实例销毁后)

实例销毁之后被调用 vue实例会把所有的内容解除绑定

通过调用Vue实例的$destory()方法可以销毁Vue实例

整理了几个vue生命周期面试题分享给大家

1. 什么是vue生命周期？

   答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

2. vue生命周期的作用是什么？

   答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3. vue生命周期总共有几个阶段？

   答：它可以总共分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/销毁后。

4. 第一次页面加载会触发哪几个钩子？

   答：会触发下面这几个beforeCreate、created、beforeMount、mounted 。

5. DOM 渲染在哪个周期中就已经完成？

   答：DOM 渲染在 mounted 中就已经完成了

本文是纯属个人对vue的生命周期的理解，有什么不对的地方还请各位大佬多多指点~