vue从使用到源码实现教程详解


Posted in Javascript onSeptember 19, 2016

搭建环境

项目github地址

项目中涉及了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。

vue从使用到源码实现教程详解 
vue从使用到源码实现教程详解 
vue从使用到源码实现教程详解

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中

var watcher = this._watcher = new Watcher(
this.vm,
this.expression,
this._update, // callback
{
filters: this.filters,
twoWay: this.twoWay,
deep: this.deep,
preProcess: preProcess,
postProcess: postProcess,
scope: this._scope
}
)
// v-model with inital inline value need to sync back to
// model instead of update to DOM on init. They would
// set the afterBind hook to indicate that.
if (this.afterBind) {
this.afterBind()
} else if (this.update) {
this.update(watcher.value)
}
Directive.prototype.set = function (value) {
/* istanbul ignore else */
if (this.twoWay) {
this._withLock(function () {
this._watcher.set(value)
})
} else if (process.env.NODE_ENV !== 'production') {
warn(
'Directive.set() can only be used inside twoWay' +
'directives.'
)
}
}

src目录下Watch.js:

从下面的代码可以找到watcher对象通过addDep方法实现订阅

Watcher.prototype.addDep = function (dep) {
var id = dep.id
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {
dep.addSub(this)
}
}
}

2.前面说那么多关于双向绑定,其实这也是VUE内部的渲染机制,总结如下

1. 通过 observer 对 data 进行了监听,并且提供订阅某个数据项的变化的能力

2. 把 template 解析成一段 document fragment,然后解析其中的 directive,得到每一个 directive 所依赖的数据项及其更新方法。比如 v-text="message" 被解析之后 (这里仅作示意,实际程序逻辑会更严谨而复杂):所依赖的数据项this.$data.message,以及相应的视图更新方法 node.textContent = this.$data.message

3. 通过 watcher 把上述两部分结合起来,即把 directive 中的数据依赖订阅在对应数据的 observer 上,这样当数据变化的时候,就会触发 observer,进而触发相关依赖对应的视图更新方法,最后达到模板原本的关联效果。

3.vue是如何改进了v-for具有相同数据渲染出错的?

数组的渲染

未使用track-by的数组渲染内部缓存的默认id是数组的值value,意味着如果数组中存在相同的值,通过id获取的是相同的一个fragement片段,最后通过insertBefore操作DOM由于是相同的一个实例,故不会生效。

<div>
<ul id='test'>
<li id="child1">child1</li>
<li id="child">child2</li>
</ul>
</div>
<script>
_element1=document.getElementById('child1');
_element2=document.getElementById('child2');
document.getElementById('test').insertBefore(_element1,_element2);
</script>

渲染的结果是child2在child1前面

使用track-by目的是自定义这个内部的id,使得数组中具有相同的值的几项都不会选择到相同的实例,对于使用track-by='$index'还是其他唯一区分的id值有一定的区别,各有好处。

使用$index使得反转的数据没有移动操作,而对于使用其他的id在顺序不一样的时候会有相应的移动操作。

对象的渲染

对象一般使用键作为内部缓存对象的id,通过track-by也可以自定义这个id提高性能。

vm.model = {
a: { id: 1, val: "model1"},
b: { id: 2, val: "model2"},
c: { id: 3, val: "model2"},
}

列表更新

vm.model = {
d: { id: 1, val: "model1"},
e: { id: 2, val: "model2"},
f: { id: 3, val: "model2"}
}

以上所述是小编给大家介绍的vue从使用到源码实现教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
js+css实现select的美化效果
Mar 24 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
vue路由跳转传参数的方法
May 06 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 #Javascript
jquery事件绑定解绑机制源码解析
Sep 19 #Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 #Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 #Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 #Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 #Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 #Javascript
You might like
discuz7 phpMysql操作类
2009/06/21 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
JS实现放大镜效果
2020/09/21 Javascript
Python request设置HTTPS代理代码解析
2018/02/12 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
详解django中使用定时任务的方法
2018/09/27 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
keras导入weights方式
2020/06/12 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
好矿嫂事迹材料
2014/01/21 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
财务会计实训报告
2014/11/05 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
班主任培训研修日志
2015/11/13 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
三下乡活动心得体会
2016/01/23 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书