new Vue({ el: '#container', data: {  count: 100 }, ...});

// 這里的options就是上面聲明Vue對(duì)象的json對(duì)象Vue.prototype._init = function (options) { ... var vm = this; ... initLifecycle(vm); initEvents(vm); initRender(vm); callHook(vm, 'beforeCreate'); // 這里就是我們接下來要跟進(jìn)的初始化Vue參數(shù) initState(vm); initInjections(vm); callHook(vm, 'created'); ... };

function initState (vm) { vm._watchers = []; var opts = vm.$options; if (opts.props) { initProps(vm, opts.props); } if (opts.methods) { initMethods(vm, opts.methods); } // 我們的count在這里初始化 if (opts.data) { initData(vm); } else { observe(vm._data = {}, true /* asRootData */); } if (opts.computed) { initComputed(vm, opts.computed); } if (opts.watch) { initWatch(vm, opts.watch); }}

function initData (vm) { var data = vm.$options.data; data = vm._data = typeof data === 'function' ? data.call(vm) : data || {}; if (!isPlainObject(data)) { data = {}; } ... // observe data observe(data, true /* asRootData */);

/** * Attempt to create an observer instance for a value, * returns the new observer if successfully observed, * or the existing observer if the value already has one. */function observe (value, asRootData) { if (!isObject(value)) { return } var ob; if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) { ob = value.__ob__; } else if ( /* 為了防止value不是單純的對(duì)象而是Regexp或者函數(shù)之類的，或者是vm實(shí)例再或者是不可擴(kuò)展的 */ observerState.shouldConvert && !isServerRendering() && (Array.isArray(value) || isPlainObject(value)) && Object.isExtensible(value) && !value._isVue ) { ob = new Observer(value); } if (asRootData && ob) { ob.vmCount++; } return ob}

/** * Observer class that are attached to each observed * object. Once attached, the observer converts target * object's property keys into getter/setters that * collect dependencies and dispatches updates. */var Observer = function Observer (value) { this.value = value; this.dep = new Dep(); this.vmCount = 0; // def函數(shù)是defineProperty的簡(jiǎn)單封裝 def(value, '__ob__', this); if (Array.isArray(value)) { // 在es5及更低版本的js里，無法完美繼承數(shù)組，這里檢測(cè)并選取合適的函數(shù) // protoAugment函數(shù)使用原型鏈繼承，copyAugment函數(shù)使用原型鏈定義（即對(duì)每個(gè)數(shù)組defineProperty） var augment = hasProto  ? protoAugment  : copyAugment; augment(value, arrayMethods, arrayKeys); this.observeArray(value); } else { this.walk(value); }};

/** * Observe a list of Array items. */Observer.prototype.observeArray = function observeArray (items) { for (var i = 0, l = items.length; i < l; i++) { observe(items[i]); }};

/** * A dep is an observable that can have multiple * directives subscribing to it. */var Dep = function Dep () { this.id = uid$1++; this.subs = [];};

/** * Walk through each property and convert them into * getter/setters. This method should only be called when * value type is Object. */Observer.prototype.walk = function walk (obj) { var keys = Object.keys(obj); for (var i = 0; i < keys.length; i++) { defineReactive$$1(obj, keys[i], obj[keys[i]]); }};

/** * Define a reactive property on an Object. */function defineReactive$$1 (obj, key, val, customSetter) { var dep = new Dep(); var property = Object.getOwnPropertyDescriptor(obj, key); if (property && property.configurable === false) { return } // cater for pre-defined getter/setters var getter = property && property.get; var setter = property && property.set; var childOb = observe(val); 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 (Array.isArray(value)) {   dependArray(value);  }  }  return value }, set: function reactiveSetter (newVal) {  var value = getter ? getter.call(obj) : val;  // 臟檢查，排除了NaN !== NaN的影響  if (newVal === value || (newVal !== newVal && value !== value)) {  return  }  if (setter) {  setter.call(obj, newVal);  } else {  val = newVal;  }  childOb = observe(newVal);  dep.notify(); } });}

// the current target watcher being evaluated.// this is globally unique because there could be only one// watcher being evaluated at any time.Dep.target = null;Dep.prototype.depend = function depend () { if (Dep.target) { Dep.target.addDep(this); }};Dep.prototype.notify = function notify () { // stablize the subscriber list first var subs = this.subs.slice(); for (var i = 0, l = subs.length; i < l; i++) { subs[i].update(); }};

/** * Add a dependency to this directive. */Watcher.prototype.addDep = function addDep (dep) { var id = dep.id; if (!this.newDepIds.has(id)) { this.newDepIds.add(id); this.newDeps.push(dep); if (!this.depIds.has(id)) {  // 使用push()方法添加一個(gè)訂閱者  dep.addSub(this); } }};

/** * Collect dependencies on array elements when the array is touched, since * we cannot intercept array element access like property getters. */function dependArray (value) { for (var e = (void 0), i = 0, l = value.length; i < l; i++) { e = value[i]; e && e.__ob__ && e.__ob__.dep.depend(); if (Array.isArray(e)) {  dependArray(e); } }}

/* * not type checking this file because flow doesn't play well with * dynamically accessing methods on Array prototype */var arrayProto = Array.prototype;var arrayMethods = Object.create(arrayProto);['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(function (method) { // cache original method var original = arrayProto[method]; def(arrayMethods, method, function mutator () { var arguments$1 = arguments; // avoid leaking arguments: // http://jsperf.com/closure-with-arguments var i = arguments.length; var args = new Array(i); while (i--) {  args[i] = arguments$1[i]; } var result = original.apply(this, args); var ob = this.__ob__; var inserted; switch (method) {  case 'push':  inserted = args;  break  case 'unshift':  inserted = args;  break  case 'splice':  inserted = args.slice(2);  break } if (inserted) { ob.observeArray(inserted); } // notify change ob.dep.notify(); return result });});