【Vue笔记】-- 详解vue生命周期
针对于Vue的生命周期进行详细的说明，方面加深对各个方法的引用。
引言：
正文：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命周期</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log(this.$el);
console.log(this.$data);
console.log(this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log(this.$el);
console.log(this.$data);
console.log(this.message)
}
}) </script>
</html>
结果显示如下：
ps：因为没有更新数据和销毁数据，所以beforeUpdate，updated，beforeDestroy和destroyed等钩子函数没有触发，只打印出beforeCreate，created，beforeMount和mounted的钩子函数情况。
在vue生命周期图例中可知，可以分为以下几个步骤：
一 beforeCreate—created间的生命周期
二 created—beforeMount间的生命周期
var vm = new Vue({
el: '#app',
template:'<h1 style="color:red">{{message}}</h1>',
data: {
message: 'Vue'
}
})
2 当无template时：
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
3 当两者存在时，会优先选择template渲染函数。
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
template:'<h1 style="color:red">{{message}}</h1>',
data: {
message: 'Vue'
}
})
</script>
4 两者不存在时，则不渲染也不报错。
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
template:'<h1 style="color:red">{{message}}</h1>',
render: function (createElement, context) {
return createElement('h1',`${this.message}1111`)
},
data: {
message: 'Vue'
},
})
</script>
三 beforeMount—mounted钩子函数的生命周期
通过打印结果可知：
四 beforeUpdate—updated间的生命周期
这一步是当vue的data数据发生改变，就会触发对应组件的重新渲染。然后依次触发beforeUpdate和update钩子函数。
<body>
<div id="app">
<!-- <h1>{{message}}</h1> -->
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
// template:'<h1 style="color:red">{{message}}</h1>',
data: {
message: 'Vue'
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
})
vm.message = 'aaaa';
</script>
结果可知：没有触发钩子函数。
当把template的注释去掉，结果如下：触发了更新前后的钩子函数。
五 beforeDestroy—destroyed间的生命周期
var vm = new Vue({
el: '#app',
template:'<h1 style="color:red">{{message}}</h1>',
data: {
message: 'Vue'
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log(this.$el);
console.log(this.$data);
console.log(this.message)
}
})
vm.$destroy();
vm.message='11111'
</script>
ps：因为只有$destroy()方法，所以没法判断beforeDestroy和destroyed的区别
结果如下：发现销毁之后，再重新给message赋值，没效果。可见destroyed钩子函数在$destroy()方法实行后会销毁和当前实例有关的东西，不会再次对该实例进行操作。
结尾：
以上都是自己对vue的生命周期的理解，从一开始懵懂，到依次开发vue项目，回头再看这生命周期，就有一种“原来如此”的感觉，感到vue强大之处。
我是17号小白，我把完整代码放到gitHub里了，有需要实践的请前往clone。地址：https://github.com/sqh17/notes/blob/master/ways/vueLifecycle.html。
以上若有不对的地方，请大家能及时私信我或者下方评论，我们一起加油进步。
参考文献：
【Vue笔记】-- 详解vue生命周期的更多相关文章
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- Vue入门系列（五）Vue实例详解与生命周期
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue实例详解与生命周期
http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...
- 【05】Vue 之 实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- 【Vue】详解Vue生命周期
Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期 在beforeCreate和created之 ...
- maven详解之生命周期与插件
Maven是一个优秀的项目管理工具,它能够帮你管理编译.报告.文档等. Maven的生命周期: maven的生命周期是抽象的,它本身并不做任何的工作.实际的工作都交由"插件"来完成 ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 自学vue笔记 (二) : 实例与生命周期
一: 什么是实例 我们说了,Vue 应用都应该从构建一个 Vue 实例开始.它管理着挂载在它身上的所有内容,因此实例是一个根实例, 所有的组件都应该挂载在根实例上面.创建一个 Vue 实例,需要通过 ...
- 详解Vue.js 技术
本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...
随机推荐
- vs编译OpenGL项目，出现无法打开 源 文件 "gl\glaux.h的解决办法
问题如图: 原因: 缺少编译OpenGL的头文件和库: 解决办法: 1.下载OpenGL的头文件和库: 下载地址:https://download.csdn.net/download/ssagnn23 ...
- 问题之Spring MVC配置后，可以打开jsp页面，但打不开html页面
一.配置Spring MVC 1.导入jar spring框架:http://repo.spring.io/release/org/springframework/spring/ spring-fra ...
- 我的 FPGA 学习历程（11）—— 实验：按键消抖
按键是一个输入设备,在理论上可以归为开关一类,理想的按键波形如下: 然而由于按键的机械特性,断开和闭合动作是不可能在一瞬间完成的,实际的波形如下: 抖动期间电平处于临界值,由于晶振的频率相当的高,数字 ...
- css3 图片阴影
box-shadow:1px 2px 4px #999999; 效果:
- 详解Session和cookie
1.cookie 1.1. 为什么会有cookie? 由于HTTP是无状态的,服务端并不记得你之前的状态.这种设计是为了HTTP协议的方便,但是也存在一些问题.比如我们登录一个购物网站,我们需要用户登 ...
- Github把自己的本地项目托管到git上
开篇之前说下题外话,之前写过一篇博客,IOS-一步一步教你自定义评分星级条RatingBar,群里有人想要源码,我上传到github上了,有需要的可以去看一下,github地址自定义评分星级条 言归正 ...
- 用挂载，使用NTFS移动硬盘，拷贝iPhone里的照片，拷到MAC
2. 写权限挂载移动硬盘 1) mount查看 2) diskutil umount /dev/disk2 3) sudo mount_ntfs -o rw,nobrowse /dev/disk2s1 ...
- 样式布局与 BFC
一.几类视图 内联视图:inline 单行 块级视图:block 换行,有高度 行内块级视图:inline-block 单行,有高度 二.几类布局 块级布局 换行,通过设置 margin 水平居中 & ...
- pymongo的操作
实例化和插入 from pymongo import MongoClient class TestMongo: def __init__(self): client = MongoClient(hos ...
- vue 登录跳转
前几次做登录处理,都是写一个公用方法,然后在对应的路由页面调用,即判断是不是处于登录状态,如果不是,就返回登录页面. let exit = (vm)=>{ let login = session ...