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 03 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 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
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
一些常用的Javascript函数
2006/12/22 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
通俗讲解python 装饰器
2020/09/07 Python
最新pycharm安装教程
2020/11/18 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
美国宠物商店:Wag.com
2016/10/25 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
个人自我鉴定范文
2013/10/04 职场文书
英语系毕业生自荐信
2013/10/31 职场文书
商场中秋节广播稿
2014/01/17 职场文书
超市周年庆活动方案
2014/08/16 职场文书
期末考试复习计划
2015/01/19 职场文书