Vue源码阅读笔记,持续更新
Posted ztfjs
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue源码阅读笔记,持续更新相关的知识,希望对你有一定的参考价值。
/ / Vue.js v2.1.3 源码阅读记录 使用的文件为使用es2015的本地文件
2018年4月20日 14:06:30 */
第一章,Vuejs的整体架构
1. 入口
-
入口处使用一个闭包(function (global,factory) {factory()})(this,factory); 其中factory是工厂的意思,它的内部实现是一个工厂函数,其中直接声明的function为私有成员。
2. 生命周期的理解
-
理解vue的生命周期对通读vue源码的效率有较好的帮助,它的生命周期分为几步,也可以在官网查阅到.
- new Vue() 第一步,new一个Vue对象,这里在new Vue时触发beforeCreate事件
- Observe Data 这里,我的理解是创建一个观察者,观察new Vue时传入的data对象 3.
3. 工厂函数
知识点
# Object.create * 这个方法可以返回一个新的对象,可以为这个对象指定一个__proto__原型对象 - 这个方法可以接受两个参数: * 第一个参数为原型链对象,最后生成的对象的__proto__就是它 * 第二个参数可以指定对象的原始对象,加到新创建对象的可枚举属性 (即其自身定义的属性,而不是其原型链上的枚举属性)对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。 *常见使用场景是,继承,例如代码 ` function Person(){ } Person.prototype = { setName :function(name){ this.name = name; } } function People(){ } People.prototype = Object.create(Person.prototype); People.prototype.getName = function(){ this.setName(‘zhangtaifeng‘); alert(this.name); } new People().getName(); ` 这里需要注意的是this的指向。 ` setName :function(name){ this.name = name; //这里的this指向调用setName的对象。 } ` # Object.freeze - 这个方法可以冻结一个对象,冻结一个对象指的是,这个对象不可改变属性,删除属性,新增属性,不能修改可枚举型,可配置,可写
源码解析
-
大概在422行
var config = {}
- 这里应该是vue的初始配置处。
-
大概在663行
var Observer = function(Observer){}
- 这是vue中的观察者类,使用了观察者模式
-
大概在1418行发现一个{}包装起来的代码块,暂时未发现用处。 经过实验,在{}中声明变量作用域依旧在父级块中。
-
1860行 initData方法,传入了一个vm对象,通过对data的判断,对data的转换,调用observe方法观察data的变化,给data打上get set方法
- 1899行 initComputed 初始化计算属性
3197行 Vue.prototype._init方法
*
第二章,依据官网的教程示例,逐步理解分析
-
hello World实现解析 `
{{message}}`-
① 在 32767 行定义了一个Vue$3的构造函数,紧随着在它后面调用了initMixin stateMixin等混合方法,将各种系统混入或继承至构造函数中
② 合并策略对象mergeOptions
-
思维记录
- 第1368行
var util = Object.freeze
这里记录了上面所有的工具函数
以上是关于Vue源码阅读笔记,持续更新的主要内容,如果未能解决你的问题,请参考以下文章