Vue学习第8天——生命周期函数

离奇6厘米

已于 2022-09-26 22:29:03 修改

阅读量634

点赞数 1

分类专栏： vue 文章标签：学习前端 vue

于 2022-08-16 21:21:58 首次发布

本文链接：https://blog.csdn.net/Vest_er/article/details/126374544

版权

vue 专栏收录该内容

37 篇文章 58 订阅

订阅专栏

一、生命周期函数图

将Vue官网的图进行详解说明，了解生命周期的流程
生命周期函数图

二、对生命周期进行类比

vm的生命周期	张三的一生
将要创建：调用`beforeCreate`函数（无法通过vm访问到data中的数据和methods中的方法）	准备备孕
创建完毕：调用`created`函数（初始化data数据和methods方法）	备孕成功
将要挂载：调用`beforeMount`函数（内存中已经编译好页面，但页面中呈现的是未经编译的DOM结构）	将要出生
挂载完毕：调用`mounted`函数（页面显示真实数据，初始化的工作在这里进行）重要的钩子	呱呱落地（检查身体各项指标）
将要更新：调用`beforeUpdate`函数（data中的数据是新的，但页面是旧数据）	将要结婚（彩礼已准备好但还没给）
更新完毕：调用`updated`函数（数据是新的，页面也是新的，页面和数据保持同步）	结婚完成
将要销毁：调用`beforeDestroy`函数（vm实例还能运行，能访问到data和methods，但对数据的所有操作，数据不更新，收尾的工作在这里进行）重要的钩子	弥留之际
销毁完毕：调用`destroy`函数	已经永别

三、生命周期三个阶段

1、初始化阶段

beforeCreate
vm中的data数据和methods方法等都为undefined

created
vm已经完成数据检测、属性和方法的运算，watch事件的回调，此时还没完成挂载
主要应用：调用异步函数、调用方法、调用数据

beforeMount
data中的数据是新的，但是data中数据还没挂到BOM节点上，页面是旧数据

mounted
vm中的data里的数据挂载到BOM节点中去，页面显示真实数据
主要应用：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等

2、更新数据

beforeUpdate
data中的数据已更新，但页面是旧数据，Vue中上次的虚拟DOM会与新构建的虚拟DOM进行diff算法对比

updated
页面更新完成，页面和数据保持同步

3、销毁实例

beforeDestroy
vm实例还能运行，能访问到data和methods，但对数据的所有操作，数据不更新
主要应用：清除定时器、解绑自定义事件、取消订阅消息

destroyed
Dom元素存在，只是再也不受vue控制

四、代码演示

进行代码测试，可以用debugger断点测试每一个生命周期函数，更好的理解生命周期函数

<body>
    <div id="app">
        <p>{{name}}</p>
        <button @click="changeName">将名字变成波妞</button>
        <button @click="bye">点我销毁vm</button>
    </div>
    <script>
        //1.理解vue的生命周期

        const vm = new Vue({
            el: "#app",
            data: {
                name: "憨瓜",
            },
            methods: {
                changeName() {
                    this.name = "波妞"
                },
                bye() {
                    this.$destroy()
                }
            },
            //这个阶段无法访问到data和methods
            beforeCreate() {
                console.log('beforeCreate函数被调用', this._data); //undefined
                //debugger断点测试
            },
            //这个阶段可以通过vm访问data中的数据和methods中方法
            created() {
                console.log('created函数被调用', this._data);
            },
            //这个阶段内存中已经存在编译过的DOM，但是页面中还没有显示，依然是假页面
            beforeMount() {
                console.log('beforeMount函数被调用');
            },
            //这个阶段页面展示经过编译的DOM，一般在这个阶段开启定时器
            mounted() {
                console.log('mounted函数被调用');
            },
            //这个阶段data中的数据已经更新，但是页面依然是旧页面
            beforeUpdate() {
                console.log('beforeUpdate函数被调用', this.name); //数据是波妞，但页面是憨瓜
            },
            //数据是新的，页面也是新数据，页面和数据保持同步
            updated() {
                console.log('updated函数被调用', this.name); //数据是波妞，页面也显示波妞
            },
            //vm实例被销毁，依然能访问到data和methods；对数据进行操作，数据不更新；自定义事件销毁，但原生DOM事件还在
            beforeDestroy() {
                console.log('beforeDestroy函数被调用');
            },
            destroyed() {
                console.log('destroy函数被调用');
            },
        })
    </script>
</body>

</html>

1、初始化页面时

依次调用了beforeCreate、created、beforeMount、mounted钩子
运行结果
在这里插入图片描述

2、点击更新数据时

依次调用了beforeUpdate、updated钩子
运行结果（点击左边按钮）
在这里插入图片描述

3、点击销毁实例

依次调用beforeDestroy、destroyed钩子
运行结果（点击右边按钮）
在这里插入图片描述
打开vue调试工具可以看到实例被销毁

4、细节

① 当我们先点击销毁按钮，再打开vue调试工具面板时，没有数据
② 当我们先打开vue调试工具面板，再点击销毁按钮时，数据存在，这个数据存在是因为页面没有刷新

五、总结

1、两个重要钩子

生命周期函数中两个比较重要的钩子：mounted和beforeDestroy

1、mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2、beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

2、关于销毁Vue实例

1、销毁后借助Vue开发者工具看不到任何信息；

2、销毁后自定义事件会失效，但原生DOM事件依然有效；

3、一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

六、进阶教程

1、el配置项

el配置项的作用

表明我们要将当前vue组件生成的实例插入到页面的哪个元素中

无el配置项

如果在实例化时存在这个选项，实例将立即进入编译过程；否则停止编译，也意味着暂时停止了生命周期，需要显式调用vm.$mount(el) 手动开启编译。

代码演示

new Vue({
    beforeCreate() {
        console.log('beforeCreate函数被调用');
    },
    created() {
        console.log('created函数被调用');
    },
    beforeMount () {
        console.log('beforeMount函数被调用');
    },
    mounted() {
        console.log('mounted函数被调用')
    }
})

运行结果
在这里插入图片描述

2、template与html的优先级

<body>
    <h2>测试优先级：结果如下</h2>
    <div id="app">
        <p>我是html渲染出来的，我的名字是：{{name}}</p>
    </div>
    <script>
         new Vue({
            el:"#app",
            data: {
                name: "憨瓜",
            },
            template:`<div><p>我是template渲染出来的，我的名字是：{{name}}</p></div>`
        })
    </script>
</body>