总共分为8个阶段，创建前/后，载入前/后，更新前/后，销毁前/后；

创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有；

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染；

更新前/后：当data变化时，会触发beforeUpdate和updated方法；

销毁前/后：在执行destory方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在；

对vue生命周期的理解的更多相关文章

  1. vue生命周期的理解

    我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...

  2. 面试题之（vue生命周期）

    在面试的时候,vue生命周期被考察的很频繁. 什么是vue生命周期呢? Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这 ...

  3. 我理解的vue生命周期

    说些题外话,引出vue的生命周期. 比如人出生到寿终正寝,这是人的一个生命周期.他会经历出生,婴儿时期,童年时期,少年时期,青年,中年,老年,到 end.然后,每个时期都会有一定的历史任务在等着去完成 ...

  4. 自学vue第二天，从入门到放弃（生命周期的理解）

    生命周期的理解 beforeCreate 创建前 数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象 没有数据也没有方法 created 在创建后 数据和方法已经 data数据已经绑定好了 ...

  5. 详解vue生命周期

    vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...

  6. Vue生命周期，面试常见问题

    一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...

  7. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

  8. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  9. vue生命周期钩子

    转载自:https://segmentfault.com/a/1190000008010666?utm_source=tag-newest https://segmentfault.com/a/119 ...

随机推荐

  1. Gradle依赖的统一管理，解决依赖冲突

    看见别人在用implementation rootProject.ext.dependencies["xxxx"]不知道是什么意思,上网查了一下,原来是为了解决或者说预防gradl ...

  2. (原)测试 Java中Synchronized锁定对象的用法

    今天再android_serial_port中看到了关键字 synchronized;因为刚好在学java和android,所以就查了一下它的用法: 于是把代码中的一小段代码拿了出来,做了一下修改,测 ...

  3. 一、Bitcoin比特币与BlockChain区块链技术

    一.比特币历史 2008 年 10 月 31 日,一个网名叫中本聪(英文翻译过来滴)的家伙发布比特币唯一的白皮书:<Bitcoin:A Peer-to-PeerElectronic Cash S ...

  4. Ubuntu安装redis缓存数据库

    参考:http://blog.csdn.net/xiangwanpeng/article/details/54586087 1.在下载目录下 sudo wget http://download.red ...

  5. 公众平台返回原始数据为: 错误代码-40164，错误信息-invalid ip, not in whitelist hint

    1.登录公众平台,进入开发->基本配置页面 2.点击配置进入IP白名单设置页 3.填写微客助理IP地址:183.63.25.68 4.管理员扫码确认保存 5.设置成功后点击“关闭” 6.修改成功 ...

  6. 富可视M310刷机包 MIUIV5 红米开发版 闪光 美化 稳定

    ROM介绍 MIUI 开发版 4.10.2 ·A2版为功能版(功能比較多.带相机切换和相机声音开关) ·更新最新图库 ·更新最新miui6的720P背板 ·更新miui6最新开机动画 [刷机提示]: ...

  7. Web文件上传方法总结大全

    1. 表单上传 这是传统的form表单上传,使用form表单的input[type=”file”]控件,可以打开系统的文件选择对话框,从而达到选择文件并上传的目的,它的好处是多浏览器兼容,它是web开 ...

  8. Web 文件上传 目录

    0. SpringMVC -- 梗概--源码--贰--上传 1. Web上传文件的原理及实现 2. Web文件上传方法总结大全 3. SpringMVC 文件上传配置,多文件上传,使用的Multipa ...

  9. [原]Jenkins(七)---jenkins项目编译测试发布由maven构建的web项目

    /** * lihaibo * 文章内容都是根据自己工作情况实践得出. * 版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horizonli/p/533 ...

  10. 关于SMI、MSI、SCI、INTx各种中断小结【转】

    转载自http://blog.csdn.net/huangkangying/article/details/11178425 目录(?)[-] MSI VS INTxPin-based interru ...