项目中涉及了json-server模拟get请求，用了vue-router；
关于Vue生命周期以及vue-router钩子函数详解
生命周期
1.0版本
1.哪些生命周期接口
init Created beforeCompile Compiled Ready Attatched Detached beforeDestory destoryed
2.执行顺序
1. 不具有keep-alive
进入：
init->create->beforeCompile->complied->attatched->ready
移出：
beforeDestory->detached->destoryed;
2. 具有keep-alive
第一次的时候
进入：
init->create->beforeCompile->complied->attatched->ready
移出：
detached；
之后的每次
进入：
attatched
移出：
detached
钩子函数
3.钩子函数有哪些
data
activete
deactivate
canactivate
candeactivate
4.执行顺序
进入：
canactivate->actiavte->date
移出：
candeactivate->deactiavte
两者一起出现
5.对于一个组件A里面有子组件B，当这个组件A进行移入和移出操作时，组件之间的生命周期喝钩子函数的执行顺序参考如下：
例如
A.vue
<div>
<B></B>
</div>
备注：下面括号里的是嵌套的子组件
1. 不具有keep-alive：
移入：
1. canActivate;
2. init;
3. create;
4. beforeCompile;
5. (嵌套子组件：init,create,beforeCompile,compile);
6. compile;
7. activate;
8. data;
9. attached;
10. (子组件attached);
11. (子组件ready);
12. ready;
移出：
13. canDeactivate;
14. deactivate;
15. beforeDestroy;
16. (子组件beforeDestroy);
17. (子组件destoryed);
18. detached;
19. (子组件detached);
20. destoryed;
2. 具有keep-alive：
移入：
1. canActivate;
2. activate;
3. data;
4. attached;
5. (子组件attached);
移出：
6. canDeactivate;
7. deactivate;
8. detached;
9. (子组件detached);
6.钩子函数activate和data的执行顺序
涉及钩子函数异步 resolve 规则：
1.如果钩子返回一个 Promise，则钩子何时 resolve 取决于该 Promise 何时 resolve。
2.如果钩子既不返回 Promise，也没有任何参数，则该钩子将被同步 resolve。
3.如果钩子不返回 Promise，但是有一个参数(transition)，则钩子会等到transition.next(),transition.abort()或是transition.redirect()之一被调用才 resolve。
4.在验证类的钩子，比如canActivate,canDeactivate以及全局 beforeEach 钩子中，如果返回值是一个布尔值 (Boolean)，也会使得钩子同步 resolve。
7.根据什么可以确保界面已经更新完成，也就是说挂在完成
执行生命周期attached说明已挂载
双向绑定与渲染机制
1.数据的监听和触发（订阅和发布observer）
src目录下observer:
1. array.js
2. dep.js;(实现一个发布订阅对象）
3. index.js；（利用Object.defineProperty这个API，并为此属性设计一个特殊的 getter/setter，然后在 setter 里触发一个函数，达到监听的效果）；
下面是这部分的源码
Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { var value = getter ? getter.call(obj) : val if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() } if (isArray(value)) { for (var e, i = 0, l = value.length; i < l; i++) { e = value[i] e && e.__ob__ && e.__ob__.dep.depend() } } } return value }, set: function reactiveSetter (newVal) { var value = getter ? getter.call(obj) : val if (newVal === value) { return } if (setter) { setter.call(obj, newVal) } else { val = newVal } childOb = observe(newVal) dep.notify() } })
简化上面的监听与触发代码如下：
function notidy(obj,key){ console.log(key+" has changed"); console.log(key+" now is: "+obj[key]); } function ToData(key,val){ var ob=this; Object.defineProperty(ob,key,{ enumerable:true, configurable:true, get:function(){ return val; }, set:function(newval){ if(newval==val){ return; } val=newval; notidy(this,key); } }) }
src目录下directive.js
在directive中可以看到一系列解析出来的属性，而directive的实例化可以在utils/lifecycle.js中看到。
下面这段代码在Directive.prototype._bind中