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 相关文章推荐
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
Javascript call及apply应用场景及实例
Aug 26 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
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
用javascript作一个通用向导说明
2011/08/30 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
如何基于python生成list的所有的子集
2019/11/11 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
后勤主管工作职责
2013/12/07 职场文书
办公室经理岗位职责
2014/01/01 职场文书
黄金酒广告词
2014/03/21 职场文书
2015年度保密工作总结
2015/04/24 职场文书
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫