第十六节:Vue生命周期与钩子函数

前沿:
通过前面几节的学习，我们已经对vue有了初步的了解，vue可以帮我们干什么，而接下来就介绍vue的生命周期和它常用的钩子函数，那么我们就来看看对于vue的生命周期.

1. 理解生命周期的含义

生命周期：就是一个组件从实例化创建并添加到DOM开始 ,一直到组件被销毁的整个过程 。

生命周期函数(钩子函数): 就是在Vue生命周期的整个过程的不同阶段被调用的函数


2. 生命周期图

首先来一下官网的对于vue生命周期的图解, 官网上目前有8个生命周期函数,
还有两个我们之后再看. 先看看基本的8个钩子函数

生命周期图.png


3. 钩子函数的理解

通过打断点的方式，让我们好好理解声明周期的钩子函数， 你们也可以自己复制代码进行测试好好理解Vue的钩子函数

<script>
    new Vue({
        el: "#app",
        data:{},
        methods:{},
        
        // 1. 在实例化之前被调用 
        beforCreate: function(){
            // 这个方法的时候data还没有加载,所以此方法用不到
            // 一般不会再这里处理什么事情
            alert("组件实例化之前执行的函数");
            debugger;
        }，
        
        // 2. 实例化初始之后,被添加到DOM元素之前触发
        created: function(){
            // 可以在这里发送ajax,初始化操作
            alert("组件实例化完毕，但页面还未显示");
            debugger;
        }，
        
        // 3. 在元素(虚拟DOM)已经准备好被添加到DOM,但是还没有添加时触发
        beforeMount: function(){
            // 要保证有el,或者vm.$mount() 否则这里不会执行
            alert("组件挂载前，但页面还未显示，但是虚拟DOM已经配置");
            debugger;
        }，
        
        // 4. 会在元素创建后触发
        mounted: function(){
            //  如果有template属性模板,会用模板替换外部的el,只要有此属性,直接卸载外部el找中的内
            // 这将没有任何意义了
            //  template只能有一个更元素,不能是文本节点, 
            // 真实的dom渲染完了,可以操作dom了
            alert("组件挂载后，此方法执行后，页面显示");
            debugger;
        }，
        
        // 5. 在数据更新将要对DOM做一些修改时触发
        beforeUpdate: function(){
            //  当页面依赖的数据发生变化时才执行,一般用watch来替换,这个方法不好用
            // 页面依赖的数据发生变化,数据已变化,页面还没有渲染
            alert("组件更新前，但页面还未显示，但是虚拟DOM已经配置");
            debugger;
        }，
        
        // 6. 后在DOM的更新已经完成后触发
        updated: function(){
            // 重新渲染页面后执行, 可以操作DOM了
            alert("组件更新后，此方法执行后，页面显示");
            debugger;
        },
            
         // 7. 在组件即将被销毁并且从DOM上移出时触发
        beforeDestroy: function(){
            //没什么意义,死了就什么都干不了了
            alert("组件销毁前");
            debugger;
        }
    
        // 8. 组件被销毁后触发
        destroyed: function(){
            alert("组件销毁");
            debugger;
        }
    })
</script>

实践是检验道理的唯一标准，
这里只能通过注释来介绍一下vue的钩子函数的意义。
想要详细了解还需要你亲自测试体会

生命周期钩子的 this 上下文指向调用它的 Vue 实例。


通过这张生命周期图，我们发现我们之前还有一些内容没有测试到， 诸如使用$mount绑定DOM元素, 实例化时自定义template模板等,那么接下来就好好测试一些,生命周期图所讲述的内容


4. 绑定节点

我们之前学到一直是使用vue配置对象里的el来绑定DOM节点

生命周期图告诉我们,如果我们没有el属性就会查找vue实例对象有没有通过$mount方法来绑定DOM元素
其实就算你是用el绑定了DOM元素,在Vue源码中也是会转为$mount处理

<div id="app">

    <div v-html="msg"></div>
</div>
<div id="haha"></div>

<script>
    const vm = new Vue({
        el:"#app",
        data: {
           msg:"hello"
        },

    })
    vm.$mount("#haha")
</script>

同时我们还会发现,如果el和$mount都存在,绑定的元素有差异,那么以el为主,因为生命周期图告诉我们只有当el属性不存在的时候,才会查看$mount方法


5. template模板编译

我们之前学习一直使用的都是没有template模板的, 根据生命周期图显示,如果我们没有template,模板,我们就会将el 属性对应的挂在点作为我们的模板

如果有template模板,我们就会用以后的模板替换之前的模板

<div id="app">
    {{ msg }}
</div>


<script>
    const vm = new Vue({
        el:"#app",
        template:"<div id='haha'>我是小当家</div>",
        data: {
           msg:"hello"
        },
    })
</script>


5.1 注意template模板里只能有一个根标签

所以下面的写法会报错,是错误的写法

const vm = new Vue({
    template:`
        <div id='haha'>
            我是小当家
        </div>
        <span></span>
    `,
    data: {
        msg:"hello"
    },
})


5.2 改变数据绑定的位置

如果有template 模板,我们动态绑定的数据,就需要在模板中绑定

<div id="app">
    {{ msg }}
</div>


<script>
    const vm = new Vue({
        el:"#app",
        template:"<div id='haha'>我是小当家{{ msg }}</div>",
        data: {
           msg:"hello"
        },
    })
</script>


6. 关于mounted钩子函数中获取DOM元素的问题

6.1 正常在mounted钩子函数里获取DOM
<div id="app">
    <div v-html="msg"></div>
</div>

<script>
    const vm = new Vue({
        el:"#app",
        data: {
           msg:"<h2 id='box'>hello</h2>"
        },
        mounted(){
            console.log("mounted:");
            console.log(box);
        },
    })
</script>

我们会发现获取DOM元素完全没有问题,


6.2 更改DOM节点内容

如果我们动态的修改了DOM节点,那么我们在获取看看

<div id="app">

    <div v-html="msg"></div>
</div>
<script>

    const vm = new Vue({
        el:"#app",
        data: {
            msg:"<h2 id='box'>hello</h2>"
        },
        mounted(){
            // 动态修改DOM 节点
            this.msg = `<h2 id="box">你好</h2>`
            // 获取DOM 节点
            console.log(box);

        },
    })
</script>

这是我们就会发现我们获取的还是原先的DOM节点, 此时去获取节点内容就会有问题,
获取的DOM节点并不是更改后最新的DOM节点


6.3 解决动态DOM 节点的问题

我们可以使用$nextTice来解决此类问题

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

$nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：数据更新后，在dom重新渲染完毕，自动执行该函数，

通过$nextTick 方法来异步操作vue实例

示例:

<div id="app">

    <div v-html="msg"></div>
</div>
<script>

    const vm = new Vue({
        el:"#app",
        data: {
            msg:"<h2 id='box'>hello</h2>"
        },
        mounted(){
            // 动态修改DOM 节点
            this.msg = `<h2 id="box">你好</h2>`
            // 获取DOM 节点
            console.log(box);
            
            // 通过$nextTick异步处理方法来获取就会得到最新的值
            this.$nextTick(() => {
                console.log(box);
            })
        },
    })
</script>

上面的示例,我们打印了2次box ,box是DOM元素的id,可以用来获取DOM元素, 但是此时两次获取的DOM元素展示的结果不一样

$nextTick.png

第一次获取box虽然数据已经改变, 页面也准备重新渲染新的DOM元素, 但是此时DOM还没有更新完成,就获取box,获取的就是原来的DOM元素内容, $nextTick方法会在DOM元素更新完成以后才会触发回调函数,在回调函数中获取的box才是更改后最新的DOM元素



建议在组件学习后在回来看:
带有子组件的示例:

<div id="app">
    <child ref="child"></child>
</div>

<template id="child">
    <div>
        <span v-for="a in arr">{{a}}</span>
    </div>
</template>

<script>
    var vm = new Vue({   // 根实例
        el: '#app',
        data: {
            radio: 'home'
        },
        mounted() {
            console.log(1);     // 在执行父组件的mounted
            // console.log(this.$refs.child.$el.innerHTML);
            // 这里打印的是 1,2,3的数组

            // 这里可以选择$nextTick方法,这个是在页面渲染完毕后执行
            this.$nextTick(() => {
                console.log(this.$refs.child.$el.innerHTML);  // 这个时候才4,5,6
            })
        },
        components: {
            child: {
                template: '#child',
                data() {
                    return { arr: [1, 2, 3] }
                },
                mounted() {
                    console.log(2);    // 先打印子组件的mounted
                    this.arr = [4, 5, 6]; // 说明这里mounted是异步的
                }
            }
        }
    });
</script>

显示结果

带组件的示例.png

通过实例发现,是不是用$nextTick方法在组件数据更新以后获取的DOM元素的内容都不一样

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,236评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,867评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,715评论 0赞 340
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,899评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,895评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,733评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,085评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,722评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,025评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,447评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,057评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2赞 343