Vue生命周期实例分析总结
更新时间:2022年10月03日 11:27:11 作者:月光晒了很凉快
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue()开始就是vue生命周期的开始。Vue实例有?个完整的?命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等?系列过程,称这是Vue的?命周期
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
1. 概述
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。
简单来说,生命周期钩子函数就是一堆回调函数,在我们创建实例时,这些回调函数按顺序执行。
2. 页面钩子函数
名称 | 作用 |
---|---|
beforeCreate | 在实例初始化之后,数据观测和事件配置之前被调用。此时 data 和 methods 以及页面的DOM结构都没有初始化,什么都做不了,执行1次 |
created | 在实例创建完成后被立即调用,此时data 和 methods 已经可以使用,但是页面还没有渲染出来,执行1次,用this对象 |
beforeMount | 在挂载开始之前被调用,此时页面上还看不到真实数据,只是一个模板页面而已,执行1次 |
mounted | el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面,可以进行数据请求等,执行1次 |
beforeUpdate | 数据更新时调用,页面上数据还是旧的 n次 |
updated | 由于数据更新完毕,页面上数据已经替换成最新的 n次 |
beforeDestroy | 实例销毁之前调用,执行1次 |
destroyed | 实例销毁后调用,执行1次 |
activated | keep-alive 组件激活时调用 |
deactivated | keep-alive 组件停用时调用 |
errorCaptured | 当捕获一个来自子孙组件的错误时被调用 |
3. 生命周期函数
下面我们用代码实现以下生命周期函数的执行顺序:
<div id="app"> <input type="text" v-model="username"> </div> <script> const vm = new Vue({ el: '#app', data: { username: '' }, // 初始化阶段生命周期 -- 它只都只执行1次 beforeCreate() { console.log('beforeCreate'); }, created() { console.log('created'); }, beforeMount() { console.log('beforeMount'); }, mounted() { console.log('mounted'); setTimeout(() => { // 销毁 this.$destroy() }, 2000); this.timer = setInterval(() => { console.log(111); }, 1000); }, // 更新阶段生命周期,它们会执行N次 beforeUpdate() { console.log('beforeUpdate'); }, updated() { console.log('updated'); }, // 销毁阶段 只执行1次 beforeDestroy() { clearInterval(this.timer) console.log('beforeDestroy'); }, destroyed() { console.log('destroyed'); } }) </script>
到此这篇关于Vue生命周期实例分析总结的文章就介绍到这了,更多相关Vue生命周期内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!
相关文章
elementui使用el-upload组件如何实现自定义上传
这篇文章主要介绍了elementui使用el-upload组件如何实现自定义上传,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08el-table表格动态合并相同数据单元格(可指定列+自定义合并)
工作时遇到的el-table合并单元格的需求,本文主要介绍了el-table表格动态合并相同数据单元格(可指定列+自定义合并),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-07-07
最新评论