Vue的生命周期一起来看看


Posted in Vue.js onFebruary 24, 2022

1. 生命周期(重要)

1.1 初步认识生命周期

  • 别名:生命周期回调函数、生命周期函数、生命周期钩子。
  • 生命周期是什么?Vue在关键时刻帮我们调用的一些特殊名称的函数。
  • 生命周期函数的名字不可更改,但函数内部的具体内容由程序员自行编写
  • 生命周期函数中的this指向也是vm 或 组件实例对象。

1.2 生命周期流程(8个)

1.初始化

​ 1.beforeCreate()

​ 2.created()

2.挂载(页面渲染)

​ 1.beforeMount()

​ 2.mounted()

3.更新

​ 1.beforeUpdate()

​ 2.updated()

4.销毁

​ 1.beforeDestory()

​ 2.destoryed()

1.3 生命周期详细流程图

Vue的生命周期一起来看看

1.4 常用的生命周期钩子:

beforeCreate():可以配置全局事件总线,后面会讲到先提一嘴

mounted(): 可以在此阶段发送ajax请求, 启动定时器、绑定自定义事件、订阅消息等异步任务【初始化操作】

beforeDestroy(): 在此阶段做收尾工作, 如: 清除定时器、解绑自定义事件、取消订阅消息等【首尾工作】

1.4.1 关于销毁

  • 销毁后借助Vue开发者工具看不到任何信息
  • 销毁后自定义事件会失效,但原生DOM事件依然有效
  • 一般不会在beforeDestroy操作数据,因为即使操作数据,也不会再触发更新流程了。

1.4.2 关于父子组件的生命周期 

1.加载渲染的过程

父beforeCreate ==> 父created ==> 父beforeMount ==> 子beforeCreate ==> 子created ==> 子beforeMount ==> 子mounted ==> 父mounted

2.更新的过程

父beforeUpdate ==> 子beforeUpdate ==> 子updated ==> 父updated

3.销毁过程

父beforeDestroy ==> 子beforeDestroy ==> 子destroyed ==> 父destroyed

1.5小案例

<div id="root">
        <!-- 让h3透明度产生过渡的效果 -->
        <h3 :style="{opacity:opacity}">欢迎学习Vue!</h3>
        <button @click="des">点击我销毁</button>
    </div>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                opacity: 1
            },
            methods: {  
                des(){
                    // 触发此函数必定调用,beforeDestroy(),destroyed()
                    this.$destroy()
                }
            },
            mounted() { //挂载
                /*
                		- 完成模板解析后并且将初始的真实的DOM元素挂载到页面后,才执行的函数
                			只会执行一次
                		- this指向Vue
                		- 开发中常用的方法,当我们想要读取某个属性但是读不到,就可以
                		  将该属性绑定到共同能够访问到的元素上,例如下面定时器的例子
                */
                this.timer = setInterval(() => {
                    this.opacity -= 0.01
                    if (this.opacity <= 0)
                        this.opacity = 1
                }, 10);
            },
            beforeDestroy() {
                console.log("beforeDestroy - 清除定时器");
                clearInterval(this.timer)
            },
            destroyed() {
                console.log("destroyed - 销毁完毕")
            },
        })
    </script>

1.6 代码举例说明生命周期钩子

<div id="root">
        <h3>n的值为:{{n}}</h3>
        <button @click="add">点击我n+1</button>
        <button @click="remove">点击销毁vm</button>
    </div>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                n:1
            },
            methods: {
                add(){
                    this.n++
                },
                remove(){
                    this.$destroy()
                }
            },
            beforeCreate() {
                /* 
                    此时初始化生命周期,事件等,数据代理还未开始
                    vm无法访问到data中的数据,methods中的方法
                */
                console.log("beforeCreate");
                //console.log(this.n);  //undefined
                // console.log(this.add()); // this.add is not a function
                // debugger
            },
            created() {
                /* 
                    已经完成了初始化的数据监视和数据代理
                    vm可以访问到data中的数据和methods的方法
                */
                console.log("created");
                // console.log(this.n);  // 1
                // console.log(this.add());  // undefined
                // debugger
            },
            beforeMount() {
                /*
                    挂载之前,也就是图中的判断框里执行的,此阶段是Vue
                    在解析模板并且生成虚拟DOM存储在内存当中,页面还不能
                    看到解析后的样子
                 */
                 console.log("beforeMount");
                //  debugger
            },
            mounted() {
                /* 
                    完成模板解析后并且将初始的真实的DOM元素挂载到页面后,才执行的函数
                    一般在此:开启一些定时器、发送网络请求、订阅消息、
                    绑定自定义事件等等初始化
                 */
                console.log("mounted");
                // debugger
            },
            beforeUpdate() {
                /* 
                    当数据发生更新后,此时数据已经更新完成,但是页面
                    还是未更新的。
                    也就是面试所问的:页面和尚未和数据保持同步的阶段
                 */
                console.log("beforeUpdate");
            },
            updated() {
                /* 
                    在这之前会进行新旧虚拟DOM比较,最终完成页面的更新
                    此阶段就是页面和数据保持同步
                 */
                 console.log("updated");
            },
            beforeDestroy() {
                /* 
                    当我们调用vm.$destroy时,才会执行下面两个函数,
                    马上要执行销毁阶段,一般在这个阶段做一些收尾操作
                    比如:关掉定时器,取消订阅,解绑自定义事件
                 */
                console.log("beforeDestroy");
            },
            destroyed() {
                /*
                    所有的指令,所有的自定义事件监听器都没了(只留下原生的dom的事件)
                 */
                console.log("destroyed");
            },
        })
    </script>

总结

以上就是今天要讲的内容,本文介绍了生命周期的相关知识,希望对大家有所帮助!

Vue.js 相关文章推荐
详解Vue中的自定义指令
Dec 07 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue中activated的用法
Jan 03 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
Vue的过滤器你真了解吗
Feb 24 #Vue.js
Vue监视数据的原理详解
Feb 24 #Vue.js
Vue的列表之渲染,排序,过滤详解
Vue3如何理解ref toRef和toRefs的区别
Feb 18 #Vue.js
Vue h函数的使用详解
Feb 18 #Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 #Vue.js
前端vue+express实现文件的上传下载示例
You might like
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
PHP 闭包详解及实例代码
2016/09/28 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
探究Python中isalnum()方法的使用
2015/05/18 Python
python中list常用操作实例详解
2015/06/03 Python
python生成随机图形验证码详解
2017/11/08 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python多线程扫描端口(线程池)
2019/09/04 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
Linux面试题LINUX系统类
2015/11/25 面试题
医学护理毕业生自荐信
2013/11/07 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
银行办理业务介绍信
2014/01/18 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
银行委托书范本
2014/04/04 职场文书
优秀教师演讲稿
2014/05/06 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript
工厂无线对讲系统解决方案
2022/02/18 无线电
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server