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 相关文章推荐
jquery实现心算练习代码
Dec 06 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
浅谈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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
原生JS实现留言板
2020/03/26 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
python最长回文串算法
2018/06/04 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
抄作业检讨书
2014/02/17 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
优秀教师演讲稿
2014/05/06 职场文书
离婚协议书怎么写
2014/09/12 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
青年文明号申报材料
2014/12/23 职场文书
导游词之广西漓江
2019/11/02 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
instantclient客户端 连接oracle数据库
2022/04/26 Oracle