最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序结构梳理 Vue.js 是一个非常典型的 MVVM 的程序结构,整个程序从最上层大概分为 全局设计:包括全局接口.默认选项等 vm 实例设计:包括接口设计 (vm 原型).实例初始化过程设计 (vm 构造函数) 这里面大部分内容可以直接跟 Vue.js 的官方 API 参考文档对应起来,但文档里面没…

今天看了vue.js源码  发现非常不错,想一边看一遍写博客和大家分享 /** * Convert a value to a string that is actually rendered. *转换一个值为字符串 */ function _toString (val) { return val == null? '': typeof val === 'object'? JSON.stringify(val, null, 2): String(val)//如果该值是null则返回空字符串,如果该…

主体 实例方法归类:   先看个作者推荐, 清晰易懂的  23232 简易编译器   重点: 最简单的订阅者模式 // Observer class Observer { constructor (data) { this.walk(data) } walk (data) { // 遍历 let keys = Object.keys(data) for(let i = 0; i < keys.length; i++){ defineReactive(data, keys[i], data[key…

/* */ var arrayKeys = Object.getOwnPropertyNames(arrayMethods);//获取arrayMethods的属性名称 /** * By default, when a reactive property is set, the new value is//默认情况下,当一个响应的属性被设置,新的值也转换成响应的.然而当经过向下支撑时,我们不想促使转换,因为这值也许是一个嵌套值在一个冻结的数据结构,转换它时将会失去最优化 * also conve…

var _Set; /* istanbul ignore if */ if (typeof Set !== 'undefined' && isNative(Set)) { // use native Set when available.//当本地set有效时使用set _Set = Set; } else { // a non-standard Set polyfill that only works with primitive keys.//一个不标准的set只会和一些简单的键工作…

/* */ /* globals MutationObserver *///全局变化观察者 // can we use __proto__?//我们能用__proto__吗? var hasProto = '__proto__' in {}; // Browser environment sniffing//浏览器环境嗅探 var inBrowser = typeof window !== 'undefined';//是不是在浏览器中 var UA = inBrowser && windo…

解析神奇的 Object.defineProperty   几行代码看他怎么用   var a= {} Object.defineProperty( a, "b", { value:123 }); console.log(a.b); 很简单,它接受三个参数,而且都是必填的 等价于   var a= {} Object.defineProperty(a,"b",{ value:123, writable:false, enumerable:false, configu…

 1. this._eventsCount = { }    这是为了避免不必要的深度遍历: 在有广播事件到来时,如果当前 vm 的 _eventsCount 为 0, 则不必向其子 vm 继续传播该事件. 2. 数据更新的diff机制 视图更新效率的焦点问题: 大列表的更新 和 深层数据更新 而大列表较为常见 repeat.js 首先diff(data, oldVms) 大概是先比较 新旧两个列表 的vm的数据状态, 然后 差量更新DOM 步骤: 1.遍历 新列表里的 每一项, 如果 该项的v…

/* */ var uid$1 = 0; /** * A dep is an observable that can have multiple * directives subscribing() to it.//一个dep 是一个可观察到的,dep能有多样的订阅指示 */ var Dep = function Dep () { this.id = uid$1++; this.subs = []; }; Dep.prototype.addSub = function addSub (sub)…

//配置项var config = { /** * Option merge strategies (used in core/util/options)//选项合并策略 */ optionMergeStrategies: Object.create(null), /** * Whether to suppress warnings.//是否抑制警告 */ silent: false, /** * Show production mode//生产模式 tip message on boot?//…