vuesheng生命周期
对着官网的demo写例子，碰到了生命周期钩子方法，之前只是根据官网的图，了解了大概，
现在忍不住想去深扒一下，因此找了几个博客看了下，受益匪浅，故此笔记；
参考：http://www.cnblogs.com/duanyue/p/7088569.html
beforeCreate：
实例创建后，此时data observer和 event /watch等都为执行；data observer就是data中的所有数据，通过Object.defineProperty设置get 和set
此时 this.$el this.$data都是未初始化
created：
此时已经经过了data observer 和init event/watch等事件的初始化；但还未挂载，也就是还未和dom产生联系，个人觉得此阶段为数据准备阶段，故一些请求啥的可以放在这个阶段来做
此时this.$el 仍为undefined 而this.$data可用
beforeMount：
官方的这个阶段和上一个钩子（created）之间多的过程为：compile template into render function 和 compile el's outHTML as template ；
通过字面理解，为模板的编译过程，即如果有el选项，则对应id里面html拿出来，对其进行编译，期间会解析各种v-语法，形成各种模板关系。但此时并没有渲染html；所以打印出el中的内容，还是不变
此时this.$el可用；
mounted:
此时已经将各种解析后的模板，替换到el对应的内容中去
此时的this.$el和上面的beforeMount的this.$el值不一样，一个是编译前的，一个是编译后的
beforeUpdate：
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
理论上，此时只有对应的数据值变了，但是变化的值还没有作用到虚拟dom里去，更没有渲染到dom里去，故可以在此对数据进行二次加工。不会造成渲染浪费。
但是，实际打印此时的this.$el已经受影响被改变，只是这个改变还没被渲染到实际的dom中去，在这个方法里打断点，可以发现this.$el的内容和网页上展示的不一样。此点暂存疑惑，按照打印的结果，可以理解为，已经作用到虚拟dom了，更费解的是，加上断点一句句执行，结果又是符合预期的。如下图
未打断点的打印： 打断点执行的打印：
updated：
数据更新完成，虚拟dom和实际dom都被修改完成后调用。
理论上，该钩子里不可以继续修改数据，否则，会成为死循环。
该钩子在服务器端渲染时不被调用？暂时不解
beforeDestroy：
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。
测试代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body> <div id="app">
<p>{{ message }}</p>
</div> <script type="text/javascript"> var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
vuesheng生命周期的更多相关文章
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- 浅谈 Fragment 生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...
- C# MVC 5 - 生命周期（应用程序生命周期&请求生命周期）
本文是根据网上的文章总结的. 1.介绍 本文讨论ASP.Net MVC框架MVC的请求生命周期. MVC有两个生命周期,一为应用程序生命周期,二为请求生命周期. 2.应用程序生命周期 应用程序生命周期 ...
- UIViewController生命周期-完整版
一.UIViewController 的生命周期 下面带 (NSObject)的方法是NSObject提供的方法.其他的都是UIViewController 提供的方法. load (NSObje ...
- angular2系列教程（十一）路由嵌套、路由生命周期、matrix URL notation
今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:
- Spring中Bean的作用域、生命周期
Bean的作用域.生命周期 Bean的作用域 Spring 3中为Bean定义了5中作用域,分别为singleton(单例).protot ...
- Autofac - 生命周期
实例生命周期决定在同一个服务的每个请求的实例是如何共享的. 当请求一个服务的时候,Autofac会返回一个单例 (single instance作用域), 一个新的对象 (per lifetime作用 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- Xamarin.Android活动的生命周期
一.前言 用过Android手机的人一定会发现一种现象,当你把一个应用置于后台后,一段时间之后在打开就会发现应用重新打开了,但是之前的相关的数据却没有丢失.可以看出app的“生命”是掌握在系统手上的, ...
随机推荐
- computational biology | Bioinformatician | 开发者指南
对自己的定位要明确,不要定义为码农,我是computational biologist. 入了这一行就不要三心二意,这基本注定你未来10年都在干这个,就算要转行也要先把这个做好.其实大多数人最喜欢的肯 ...
- PaaS平台型IT运维＆运营模式能给企业带来什么？
关注嘉为科技,获取运维新知 什么是PaaS平台型IT自动化运维&运营模式 PaaS平台型IT运维和运维模式是指:将通用的运维能力与具体的运维场景解耦合,将能够复用的,具备独立功能的通用能力纳入 ...
- Vue音乐项目笔记（二）
1. Vuex https://blog.csdn.net/weixin_40814356/article/details/80347366 编写: 然后,在main.js中引入 在组件中改变stat ...
- Building Fire Stations ZOJ - 3820 (二分,树的直径)
大意: 给定树, 求两个点, 使得所有其他的点到两点的最短距离的最大值尽量小. 二分答案转为判定选两个点, 向外遍历$x$的距离是否能遍历完整棵树. 取直径两段距离$x$的位置bfs即可. #incl ...
- 伪分布式&&完全分布式&&高可用（zookeeper）的配置文件内容
[伪分布式] ①[core-site.xml] <configuration> <property> <name>fs.defaultFS</name> ...
- 1.两数之和(Two Sum) C++
暴力法可解决,速度很慢. 解决办法:哈希表 知识点: map的构造 遍历map使用迭代器,判断条件 插入 pair<int,int> 寻找key是否存在 class Solution { ...
- 类似“未能加载文件或程序集“tesseractengine3”或它的某一个依赖项”等一些问题的解决方案
有些时候我们引用了一些32位的dll,结果就会出现类似“未能加载文件或程序集“tesseractengine3”或它的某一个依赖项”这样的问题,原因是IIS的应用程序池的设置中默认是不启用32位的应用 ...
- Spring Cloud系列之客户端请求带“Authorization”请求头,经过zuul转发后丢失了
先摆解决方案: 方法一: 方法二: zuul.routes.<routeName>.sensitive-headers= zuul.routes.<routeName>.cus ...
- Python3模块-random、hashlib和base64
random模块 random.random()用于生成一个浮点数x,范围为0 =< x < 1 import random >>>print(random.random ...
- 【LeetCode】跳跃游戏
给定一组非负整数,初始时处于数组的第一位下标 0 的位置,数组的每个元素代表那个位置可以跳跃的最大长度.判断你是否能够到达数组的最后一位下标. e.g. A = [2, 3, 1, 1, 4],返回 ...