Vue生命周期是Vue对象从无到有再到无的一个过程，我们又是不仅要明白一个对象的使用，
同时也要知道一个对象怎么创建了，就比如Spring的生命周期，往往不只是面试官的考点，
同时在项目中也也可能常常用到。
一共有：
- beforeCreate:此时只是创建了Vue对象，但是并没有对数据进行检测
- created：开始监控Data对象变化，并初始化事件
- beforeMount：编译模板，把data里面的数据和模板生成html
- mounted：替代掉el表达中的内容，选择加载相应dom
- beforeUpdate：监视数据发生变化，注意第一次加载dom并不会发生
- updated：实时更新数据，此发生发生在更新el之前
- beforeDestroy：子组件发生变化或者调用了$destroy()方法，
比如路由发生变化，重新加载了组件，这时组件也就注销了
- destroyed:实例销毁了，在新组件加载之前
下面是一个测试程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue2.0生命周期</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> </head>
<body>
<div id="box">
<input type="text" v-model="msg"><br>
<input type="button" value="销毁" @click="destroy">
我是输入信息==>{{msg}}
<ul >测试销毁
<li>1点击销毁程序</li>
<li>2.再去输入框输入，会发现输入并没有发生改变</li>
</ul> </body>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
msg:"hello"
},
methods:{
destroy:function(){
console.log(this);
this.$destroy();
}
},
beforeCreate:function(){
alert("创建之前");
},
created:function(){
alert("创建之后");
},
beforeMount:function(){
alert("挂载之前");
},
mounted:function(){
alert("挂载之后");
},
beforeUpdate:function(){
alert("更新之前");
},
updated:function(){
alert("更新之后");
},
beforeDestroy:function(){
alert("销毁之前");
},
destroyed:function(){
alert("销毁了");
} })
</script>
</html>
02Vue2.0+生命周期的更多相关文章
-
vue2.0 生命周期 简析
Vue2.0 生命周期钩子函数: <template> <div id='app'> {{message}} </div> </template> va ...
-
Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
-
thinkphp5.0生命周期
本篇内容我们对ThinkPHP5.0的应用请求的生命周期做大致的介绍,以便于开发者了解整个执行流程. 1.入口文件 用户发起的请求都会经过应用的入口文件,通常是 public/index.php文件. ...
-
Vue2.0生命周期和钩子函数的一些理解
转自:https://segmentfault.com/a/1190000008010666 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mount ...
-
Vue2.0 —生命周期和钩子函数
vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...
-
thinkphp5.0 生命周期
1.入口文件 // 应用入口文件 index.php // 定义项目路径 define('APP_PATH', __DIR__ . '/../application/'); // 加载框架引导文件 r ...
-
详解Vue2.0生命周期
网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...
-
vue1.0生命周期
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
-
ng4.0 生命周期
名称 时机 接口 范围 ngOnChanges 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前. OnChanges 指令和组件 ngOnInit 在第一轮 ngOn ...
随机推荐
-
iOS网络-05-AFNetwoking原理及常用操作
AFN的六大模块 NSURLConnection,主要对NSURLConnection进行了进一步的封装,包含以下核心的类: AFURLConnectionOperation AFHTTPReques ...
-
react编译器jsxTransformer,babel
1.JSX是什么JSX其实是JavaScript的扩展,React为了代码的可读性更方便地创建虚拟DOM等原因,加入了一些类似XML的语法的扩展. 2.编译器——jsxTransformerJSX代码 ...
-
8种方法提升windows 8使用方便-----Win+x 编辑菜单
在windows 8上,你可以同时按下windows键和x键或者右键点击屏幕左下角打开一个菜单名为电源菜单或者快速访问菜单,这个菜单包含快速访问系统的工具,如控制面板,命令提示符,任务管理器,资源管理 ...
-
MySQL存储过程权限分析
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://huanghualiang.blog.51cto.com/6782683/1216 ...
-
java web response提供文件下载功能
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
-
Caused by: org.springframework.beans.factory.BeanCreationException: Could not autowire field
1 错误描述 org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'com.s ...
-
LeetCode(39)-Intersection of Two Linked Lists
听歌曲初爱有感: 开头啰嗦两句,刚在做算法题目的时候,听到了杨宗纬的<初爱>,突然有了一种本科时候的感觉,想想自己现在研二了,青春喂了狗,我果断喝了一罐啤酒,循环这首歌到吐-.. 题目: ...
-
JQuery : 插件定义
来源:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"), ...
-
numpy版本查看以及升降
如题,参考:https://zhuanlan.zhihu.com/p/29026597 pip show numpy 查看numpy版本; pip install -U numpy==1.12.0, ...
-
【转】基于Selenium的web自动化框架(python)
1 什么是selenium Selenium 是一个基于浏览器的自动化工具,它提供了一种跨平台.跨浏览器的端到端的web自动化解决方案.Selenium主要包括三部分:Selenium IDE.Sel ...