/ / 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
这里记录了上面所有的工具函数
来源: http://www.bubuko.com/infodetail-2569629.html