Vue入门指南-05 Vue实例的生命周期(快速上手vue)

生命周期钩子 = 生命周期函数 = 生命周期事件

实例创建期间的生命周期函数

// 刚初始化了一个空的实例对象, 这时候只有默认的一些生命周期函数和默认事件, 其他都未创建。
// 如果要调用 methods 中的方法, 或者操作 data 中的数据, 最早只能在 created 生命周期函数中操作
new Vue({el: "#app",// 在这个生命周期函数执行的时候,data和methods中的数据都还没有初始化beforeCreate () {}, // 表示实例完全被创建之前, 会执行这个函数// 在这个生命周期函数执行的时候,data和methods中的数据都已经初始化好了created () {} // 表示实例被创建之后, 会执行这个函数
})
复制代码

查看Vue生命周期图例, 这里表示Vue开始编译模板, 把Vue代码中的那些指令进行执行, 最终在内存中生成一个编译好的最终模板字符串, 然后把这个字符串渲染为内存中的DOM,此时, 只是在内存中渲染好了模板, 并没有把模板挂载到真正的页面中。

运行期间的生命周期函数

new Vue({el: "#app",// 在这个生命周期函数执行的时候,页面中的元素还没有被真正的替换过来,只是之前写的一些模板字符串beforeMounted () {}, // 表示模板已经编译完成,但是还没有把模板渲染到页面中// 表示模板已经编译完成,内存中的模板已经真实的渲染到了页面中去,已经可以看到渲染好的页面了// 注意: mounted是实例创建期间的最后一个生命周期函数,当执行完mounted生命周期函数就表示,// 实例已经被完全创建好了,此时如果没有其他操作的话,这个实例就在内存中一动不动// 注意: 如果要通过某些插件操作页面上的DOM节点,最早要在mounted生命周期中操作mounted () {} // 上面的是组件的创建阶段,接下来进入组件的运行阶段// 在这个生命周期函数执行的时候,页面中显示的数据还是旧的,但是data中的数据是最新的,// 页面尚未和最新的数据保持同步beforeUpdate () {} // 表示当前界面还没有被更新,数据肯定被更新了// 查看Vue生命周期图例,这里表示先根据data中最新的数据在内存中重新渲染出一份最新的内存DOM树当最新的// 内存DOM树更新之后会把最新的内存DOM树重新渲染到真实的页面中去这时候就完成了数据从data(model层)// 到view(视图层)的更新updated () {} // 表示当前页面和数据保持同步了,都是最新的
})
复制代码

销毁期间的生命周期函数

走到这里已经进入组件的销毁阶段了

new Vue({el: "#app",// 在这个生命周期函数执行的时候.实例身上所有的data和methods以及过滤器、指令等等都是可用状态,还没有真正的执行销毁的过程beforeDestroy () {}, // 表示Vue实例已经从运行阶段进入到销毁阶段// 在这个生命周期函执行的时候,组件中的data和methods以及过滤器、指令等等都已经不可用了destroyed(){} // 表示组件已经完全被销毁了
})
复制代码

关于Vue中的生命周期函数, 这里我尽可能的把我自己的理解和认知写了出来, 如果有不对或者不完善的地方请留言告知我。

Vue入门指南(快速上手vue)

Vue入门指南-05 Vue实例的生命周期(快速上手vue)相关推荐

7、Vue实例的生命周期钩子（created、mounted、updated、destoryed）
1.Vue实例 new Vue()创建一个Vue实例所有的组件其实都是Vue实例 2.Vue实例的生命周期钩子每个Vue实例在被创建时都要经过一系列的初始化过程初始化过程 created() 组 ...
关于Vue实例的生命周期created和mounted的区别
关于作者程序开发人员,不拘泥于语言与技术,目前主要从事PHP和前端开发,使用Laravel和VueJs,App端使用Apicloud混合式开发.合适和够用是最完美的追求. 个人网站:http://w ...
Vue实例的生命周期
vue实例的生命周期什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期函 ...
vue 加载时掉用mounted_Vue实例中生命周期created和mounted的区别详解
前言本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 生命周期先上图什么是生命周期 Vue ...
vue实例以及生命周期
1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) | |-------el (提供一个在页面上已存在的 DOM 元素作为 Vue ...
第五节：轻松掌握 vue 实例的生命周期
公众号后台收到不少同学催更新,马上来. 上两节我们都是讲vue的实例,简单创建和定义实例的4个常用选项,没看过的伙伴可以先去看上两节,按顺序学习比较容易掌握. 这一节我们学习vue实例的生命周期,没错 ...
java 实例的生命周期_[Java教程]Vue实例生命周期
[Java教程]Vue实例生命周期 0 2017-08-15 19:00:09 前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一 ...
vue 请求在子组件加载后了_从零单排vue第九课--Vue实例及生命周期
前期回顾上一节课我们重点学习了子组件如何与父组件通信,我们使用$emit方法在子组件中触发一个事件,然后在父组件中接收它.本节课我们来深入了解下vue实例以及它的生命周期是怎么样的? 创建一个Vue ...
Vue实例中生命周期created和mounted的区别(具体细节分析)。
最近刚好在学习Vue.js,在实敲轮播demo时发现了一个当时感觉很奇怪的问题: 初始化使用mounted钩子时,只调用了一次,之后就没有调用过了.害我一直以为是自己之后的代码书写有问题,结果自己再敲 ...

Vue入门指南-05 Vue实例的生命周期(快速上手vue)

实例创建期间的生命周期函数

运行期间的生命周期函数

销毁期间的生命周期函数

Vue入门指南-05 Vue实例的生命周期(快速上手vue)相关推荐

最新文章

热门文章