详解Vue八大生命周期钩子函数
摘要:Vue为生命周期中的每个状态都设置了钩子函数(监听函数) 。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
本文分享自华为云社区《一文带你弄懂Vue八大生命周期钩子函数》,原文作者:北极光之夜。。
一.速识概念:
我们把一个对象从生成(new)到被销毁(destory)的过程,称为生命周期。而生命周期函数,就是在某个时刻会自动执行的函数。
按照官方的原话,就是每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
简单来说就是每个Vue实例在被创建时都要经过一系列的初始化过程:创建实例,装载模板,渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数) 。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
二.八大生命周期钩子函数:
函数 |
调用时间 |
beforeCreate |
vue实例初始化之前调用 |
created |
vue实例初始化之后调用 |
beforeMount |
挂载到DOM树之前调用 |
mounted |
挂载到DOM树之后调用 |
beforeUpdate |
数据更新之前调用 |
updated |
数据更新之后调用 |
beforeDestroy |
vue实例销毁之前调用 |
destroyed |
vue实例销毁之后调用 |
北极光之夜。 |
北极光之夜。 |
下面是官方文档里的生命周期图,英语好的同学可以看看:
三.结合代码了解:
先看案例基本代码如下,后面通过如下代码步骤演示一个对象从生成到被销毁的过程各阶段执行的生命周期函数。注意show函数的作用。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body><div id="app">{{information}}</div><script type="text/javascript">//创建vue实例var vm = new Vue({el: '#app',data: {information: '北极光之夜。' }})// 各个生命周期函数通过调用下面这个函数了解其所处的生命阶段function show(inf,obj){console.log(inf);console.log("------------------------------------------");console.log('获取vue实例data里的数据:');console.log(obj.information);console.log("------------------------------------------");console.log('挂载的对象,就是DOM:');console.log(obj.$el);console.log("------------------------------------------");console.log('页面上已经挂载的DOM:');console.log(document.getElementById('app').innerHTML);}</script>
1. beforeCreate:
这个阶段vue实例刚刚在内存中创建,此时data和methods这些都没初始化好。在案例中添加beforeCreate钩子函数:
var vm = new Vue({el: '#app',data: {information: '北极光之夜。' },beforeCreate: function(){// 传入该阶段简介与this,this就是该阶段的vue实例show('vue实例初始化之前',this);}})
看运行结果:
可以看到,此时vue实例刚刚在内存中创建,其它什么都undefined。
2.created:
这个阶段vue实例在内存中已经创建好了,data和methods也能够获取到了,但是模板还没编译。在案例中添加created钩子函数:
var vm = new Vue({el: '#app',data: {information: '北极光之夜。' },created: function(){show('vue实例初始化之后',this);}})
看结果:
看到没,已经知道data里的数据了。其它的话都没。
3.beforeMount:
这个阶段完成了模板的编译,但是还没挂载到页面上。在案例中添加钩子函数:
var vm = new Vue({el: '#app',data: {information: '北极光之夜。' },beforeMount: function(){show('挂载之前',this);}})
看结果:
看到没,要挂载的对象都编译好了,但是页面的DOM树还没挂上去,这个阶段页面还没能显示出来。
4.mounted:
这个阶段,模板编译好了,也挂载到页面中了,页面也可以显示了。在案例中添加钩子函数:
var vm = new Vue({el: '#app',data: {information: '北极光之夜。' },mounted: function(){show('挂载之后',this);}})
看结果:
5.beforeUpdate:
转态更新之前执行此函数,此时data中数据的状态值已经更新为最新的,但是页面上显示的数据还是最原始的,还没有重新开始渲染DOM树。
先改变data里数据:
vm.information = '南极光之夜';
在案例中添加钩子函数:
var vm = new Vue({el: '#app',data: {information: '北极光之夜。' },beforeUpdate: function(){show('更新之前',this);}})
看结果:
看到没,vue实例里的数据已经变成了南极光之夜。但是此阶段页面DOM节点上显示的还是初始的数据北极光之夜。
6.updated:
这个阶段是转态更新完成后执行此函数,此时data中数据的状态值是最新的,而且页面上显示的数据也是最新的,DOM节点已经被重新渲染了。在案例中添加钩子函数:
var vm = new Vue({el: '#app',data: {information: '北极光之夜。' },updated: function(){show('更新之后',this);}})
看运行结果:
更新了,全都更新了~
7.beforeDestroy:
beforeDestroy阶段处于vue实例被销毁之前,当然,这个阶段vue实例还能用。
销毁Vue实例:
vm.$destroy();
在案例中添加钩子函数:
var vm = new Vue({el: '#app',data: {information: '北极光之夜。' },beforeDestroy: function() {show('销毁之前',this);}})
看效果:
8.destroyed:
这个阶段在vue实例销毁后调用,此时所有实例指示的所有东西都会解除绑定,事件监听器也都移除,子实例也被销毁。
在案例中添加钩子函数:
var vm = new Vue({el: '#app',data: {information: '北极光之夜。' },destroyed: function() {show('销毁之后',this);}})
看结果:
点击关注,第一时间了解华为云新鲜技术~
详解Vue八大生命周期钩子函数相关推荐
- 不来看看这些 VUE 的生命周期钩子函数? | 原力计划
作者 | huangfuyk 责编 | 王晓曼 出品 | CSDN 博客 VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化.可以分为:创建.挂载.更新.销毁四 ...
- 实战 Vue 之生命周期钩子函数执行顺序
实战 Vue 之生命周期钩子函数执行顺序 生命周期钩子函数 父组件与子组件执行顺序 生命周期钩子函数 beforeCreate:实例刚被创建出来,data 数据和 methods 方法还未被初始化,不 ...
- Vue的生命周期钩子函数介绍
感谢内容提供者:金牛区吴迪软件开发工作室 Vue的生命周期钩子函数介绍 vue生命周期共分为四个阶段 一:实例创建 二:DOM渲染 三:数据更新 四:销毁实例 共有八个基本钩子函数 1.beforeC ...
- Vue的生命周期钩子函数
Vue的生命周期钩子函数 一.Vue的生命周期共分为四个阶段 1.创建实例 2.DOM渲染 3.数据更新 4.销毁实例 二.共有八个基本钩子函数 1.beforeCreate -创建前 触发的行为:V ...
- 教女朋友学习 vue的生命周期钩子函数
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...
- vue的生命周期钩子函数的作用
之前在大学学习Java的时候 笔试题的第一道题经常是你是怎么理解生命周期的 在vue的生命周期却又与Java不同的 一个java类的完整的生命周期会经历加载.连接.初始化.使用.和卸载五个阶段: 而v ...
- VUE页面生命周期钩子函数
预备知识: 1.vue的生命周期 生命周期函数,又叫钩子函数 生命周期钩子===生命周期函数===生命周期事件 2. 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据. ...
- Vue生命周期钩子函数理解与使用场景
Vue生命周期钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫 ...
- vue生命周期钩子函数的正确使用方式
对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题 在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ ...
最新文章
- linux proc/xx/maps文件分析
- oracle可以迁徙mysql吗_项目oracle迁徙到mysql的小总结
- mysql主从切换gtid不一致_GTID 复制、主从不一致跳过操作、快速切换master
- 我的世界服务器盖亚3缴械修改,[管理]BossColing — 植魔盖亚 | 凋零末影龙召唤冷却时间及血量设置[1.7.10-1.12.2]...
- uva 1626——Brackets sequence
- 【今日CS 视觉论文速览】3 Jan 2019
- 最小生成树之普里姆算法(Prim算法)
- 节日日历for Ubuntu18.04
- SDK Manager配置
- 项目详细设计开发文档
- idm6.40最新版exe下载器介绍
- 技术分享 | Online DDL 工具 gh-ost
- 一文了解上拉电阻和下拉电阻(二)
- 知识图谱——TransH模型原理
- Linux系统下操作Oracle数据库
- 华为AC忘记console密码
- JAVA计算机毕业设计大学餐厅菜品推荐和点评系统Mybatis+系统+数据库+调试部署
- EVT, DVT, MVT, PVT常见软件节点是什么意思
- pdf中怎么编辑修改内容
- newifi y1刷PandoraBox+突破校园网上网限制