【Vue】实例对象的生命周期(方法详解)
通过前面的学习,我们知道使用Vue的时候必须创建一个Vue实例对象:var vm = new Vue({...})
,那么这个Vue实例的生命周期是怎么样的呢?本文我们就来详细的介绍下。
上图是Vue官方给出的生命周期的流程图,可先大概浏览一下,看不懂没关系,下面将为大家介绍生命周期中各个方法的具体作用。
1、beforeCreate
生命周期的第一个方法,表示实例被创建出来之前被调用。此时,此时Vue实例中的 data 和 methods的内容都还没有被加载。
<div id="app"></div>
<script>var vm = new Vue({el: "#app",data: {msg: 'ok'},methods: {show(){console.log("show方法执行了...")}},beforeCreate(){console.log(this.msg)this.show()}})
</script>
通过页面控制台可以看到 data 中的数据和 methods 中的方法都没有被初始化好。
2、created
实例已经在内存中创建完成,此时 data 和 methods 已经被初始化好了,但是还没有开始编译模板。
<div id="app"></div>
<script>var vm = new Vue({el: "#app",data: {msg: 'ok'},methods: {show(){console.log("show方法执行了...")}},created(){console.log(this.msg)this.show()}})
</script>
通过页面控制台可以看到 data 中的数据和 methods 中的方法都执行成功了。
3、beforeMount
此时已经完成了模板的编译,但是还没有挂载到页面中。
<div id="app">{{msg}}</div>
<script>var vm = new Vue({el: "#app",data: {msg: 'ok'},beforeMount(){console.log("页面中的值:",document.getElementById('app').innerHTML)console.log("内存中的值:",this.msg)}})
</script>
通过页面控制台可以看出 beforeMount 方法执行的时候,内存中的数据已经被改变了,但是页面中的数据还没有被渲染。
4、mounted
此时已经将编译好的模板,挂载到了页面指定的容器中显示。
<div id="app">{{msg}}</div>
<script>var vm = new Vue({el: "#app",data: {msg: 'ok'},mounted(){console.log("页面中的值:",document.getElementById('app').innerHTML)console.log("内存中的值:",this.msg)}})
</script>
通过页面控制台可以看出 mounted 方法执行的时候,内存和页面的数据都已经更新了。
注意: mounted 是实例创建期间的最后一个生命周期函数,执行完 mounted 时,实例已经被完全创建好了。此时,如果没有其它操作的话,这个实例,就静静的躺在我们的内存中,一动不动。
5、beforeUpdate
状态更新之前执行此函数,此时 data 中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染DOM节点。
<div id="app"><!-- 通过点击按钮来修改msg的值 --><button @click="msg='no'">修改</button><p id='val'>{{msg}}</p>
</div>
<script>var vm = new Vue({el: "#app",data: {msg: 'ok'},beforeUpdate(){console.log("页面中的值:",document.getElementById('val').innerHTML)console.log("内存中的值:",this.msg)}})
</script>
通过页面控制台我们可以看到,当beforeUpdate方法执行的时候,内存的数据被更新了,但是此时页面中的数据还没有被更新。
6、updated
实例更新完毕之后调用此函数,此时 data 中的状态值和界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了。
<div id="app"><!-- 通过点击按钮来修改msg的值 --><button @click="msg='no'">修改</button><p id='val'>{{msg}}</p>
</div>
<script>var vm = new Vue({el: "#app",data: {msg: 'ok'},updated(){console.log("页面中的值:",document.getElementById('val').innerHTML)console.log("内存中的值:",this.msg)}})
</script>
通过页面控制台可以看到,当 updated方法执行的时候,内存和页面中的数据都已经被更新了。
7、beforeDestory
实例销毁之前调用。在这一步,实例仍然完全可用。(大家记住这个即可,这里就不演示了。)
8、destoryed
实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁。
【Vue】实例对象的生命周期(方法详解)相关推荐
- Vue之MVVM、Vue实例对象、生命周期
1.初识Vue Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层(如何理解),不仅易于上手,还便于与第三方库或既有项目整合. 渐进式框架:渐进 ...
- android fragment 覆盖,Android Fragment 替换覆盖生命周期方法详解
FragMent add 与 replace 方法执行试图切换生命周期变化 Activity 生命周期中共有七个方法,Fragment 的生命周期方法 则有11个,一个Fragment 在Activi ...
- Vue的生命周期过程详解
Vue的生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的 ...
- Spring4.x(7)---对象的生命周期方法
对象的生命周期方法 Spring为了满足开发者在执行某方法之前或者在结束某个任务之前需要操作的一些业务,则提供了init-method和destroy-method 这两个属性,这两个属性需要加载在 ...
- Android Lifecycle 生命周期组件详解
转载请标明出处:https://blog.csdn.net/zhaoyanjun6/article/details/99695779 本文出自[赵彦军的博客] 一.Lifecycle简介 为什么要引进 ...
- python布尔类型运算_Python对象类型及其运算方法(详解)
基本要点: 程序中储存的所有数据都是对象(可变对象:值可以修改 不可变对象:值不可修改) 每个对象都有一个身份.一个类型.一个值 例: >>> a1 = 'abc' >> ...
- vue生命周期的详解
vue生命周期: 1. 创建阶段:beforeCreate():created() 2. 挂载阶段:beforeMount():mounted() 3. 更新阶段:beforeUpdate():upd ...
- vue 生命周期的详解
一.vue生命周期的解析 > 1>什么是vue生命周期 每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.详细来说,就是Vue实例从开始创建,初始化数据, ...
- 超详细vue生命周期解析(详解)
vue是每一个前端开发人员都绕不过的一个技术,在国内的市场占有量也是非常的大,我们大部分人用着vue, 却不知道他内部其实经历了一些什么.每个生命周期又是什么时候开始执行的.我们今天来详细的看一看 首 ...
最新文章
- 为 Kerberos 连接注册服务主体名称
- 【转】系统管理员之企业生存守则
- smarty变量调节器
- Scala学习之Option类
- Tcl Tutorial 笔记2 · set ““ {} [] \
- AutoCAD2006安装破解图文教程
- 导出手机缓存的B站视频或者在PC电脑端下载B站视频到本地
- acwing每日一题-战舰
- TEM测试常见问题及解答(五)
- 仿制苏宁易购—静态网页
- Geoserver通过SLD配置道路线样式,随着放大加粗
- 血污夜之仪式秘密巫师实验室收集策略
- 一文读懂 select count(*) 底层原理
- Trailing return types尾部返回类型
- 【Unity3D】选中物体描边特效
- 学习一下windows系统的的目录结构,对比一下Linux系统的目录结构
- CSS中visibility 属性
- 澳大利亚3-1逆转日本 狂斩日本,大家来支持一下,打倒日本,爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽
- matlab在图片上画标记然后整幅保存的方法
- 【Unity3DRPG入门学习笔记第七卷】Cinemachine Post Processing 摄像机跟踪和后处理
热门文章
- 收货详细假地址大全_【肖博数学】考生必看:高中数学三角函数公式大全(史上最全)...
- oracle查看表中记录数,Oracle 查询某一用户下所有表的记录数
- 华为搭载鸿蒙系统的手表,华为手表Watch 3即将发布:搭载鸿蒙系统
- vscode 开发vue必备插件_vsCode开发vue项目必备插件
- ES6-symbol-创建symbol
- 【咸鱼教程】置于后台停止计时,修改引擎源码解决。
- UML类图介绍及简单用法
- 我做的第二个正则转换工具
- centos7 安装小记
- 关于 nohup 执行命令以后 需要再按回车才能起效的解决办法