function initState(vm) {
 vm._watchers = [];
 var opts = vm.$options;
 if(opts.props) {
  initProps(vm, opts.props); //初始化props
 }
 if(opts.methods) {
  initMethods(vm, opts.methods); //初始化methods
 }
 if(opts.data) {
  initData(vm); //初始化data
 } else {
  observe(vm._data = {}, true /* asRootData */ );
 }
 if(opts.computed) {
  initComputed(vm, opts.computed); //初始化computed
 }
 if(opts.watch && opts.watch !== nativeWatch) {
  initWatch(vm, opts.watch); //初始化watch
 }
}

function initComputed(vm, computed) {
 var watchers = vm._computedWatchers = Object.create(null);

 for(var key in computed) {
  var userDef = computed[key];
  var getter = typeof userDef === 'function' ? userDef : userDef.get;

  //創(chuàng)建一個計算屬性 watcher
  watchers[key] = new Watcher(
   vm,
   getter || noop,
   noop,
   computedWatcherOptions
  );

  if(!(key in vm)) {
   //如果定義的計算屬性不在組件實例上，對屬性進(jìn)行數(shù)據(jù)劫持
   //defineComputed 很重要，下面我們再說
   defineComputed(vm, key, userDef);
  } else {
   //如果定義的計算屬性在data和props有，拋出警告
  }
 }
}

function initWatch(vm, watch) {
 //遍歷watch，為每一個屬性創(chuàng)建偵聽器
 for(var key in watch) {
  var handler = watch[key];
  //如果屬性值是一個數(shù)組，則遍歷數(shù)組，為屬性創(chuàng)建多個偵聽器
  //createWatcher函數(shù)中封裝了vm.$watch，會在vm.$watch中創(chuàng)建偵聽器
  if(Array.isArray(handler)) {
   for(var i = 0; i < handler.length; i++) {
    createWatcher(vm, key, handler[i]);
   }
  } else {
   //為屬性創(chuàng)建偵聽器
   createWatcher(vm, key, handler);
  }
 }
}

function createWatcher(vm, expOrFn, handler, options) {
 //如果屬性值是一個對象，則取對象的handler屬性作為回調(diào)
 if(isPlainObject(handler)) {
  options = handler;
  handler = handler.handler;
 }
 //如果屬性值是一個字符串，則從組件實例上尋找
 if(typeof handler === 'string') {
  handler = vm[handler];
 }
 //為屬性創(chuàng)建偵聽器
 return vm.$watch(expOrFn, handler, options)
}

function defineComputed(target, key, userDef) {
 //是不是服務(wù)端渲染
 var shouldCache = !isServerRendering();
 //如果我們把計算屬性的值寫成一個函數(shù)，這時函數(shù)默認(rèn)為計算屬性的get
 if(typeof userDef === 'function') {
  sharedPropertyDefinition.get = shouldCache ?
   //如果不是服務(wù)端渲染，則默認(rèn)使用緩存，設(shè)置get為createComputedGetter創(chuàng)建的緩存函數(shù)
   createComputedGetter(key) :
   //否則不使用緩存，直接設(shè)置get為userDef這個我們定義的函數(shù)
   userDef;
  //設(shè)置set為空函數(shù)
  sharedPropertyDefinition.set = noop;
 } else {
  //如果我們把計算屬性的值寫成一個對象，對象中可能包含set、get和cache三個字段
  sharedPropertyDefinition.get = userDef.get ?
   shouldCache && userDef.cache !== false ?
   //如果我們傳入了get字段，且不是服務(wù)端渲染，且cache不為false，設(shè)置get為createComputedGetter創(chuàng)建的緩存函數(shù)
   createComputedGetter(key) : 
   //如果我們傳入了get字段，但是是服務(wù)端渲染或者cache設(shè)為了false，設(shè)置get為userDef這個我們定義的函數(shù)
   userDef.get :
   //如果沒有傳入get字段，設(shè)置get為空函數(shù)
   noop;
  //設(shè)置set為我們傳入的傳入set字段或空函數(shù)
  sharedPropertyDefinition.set = userDef.set ?
   userDef.set :
   noop;
 }
 //雖然這里可以get、set都可以設(shè)置為空函數(shù)
 //但是在項目中，get為空函數(shù)對數(shù)據(jù)取值會報錯，set為空函數(shù)對數(shù)據(jù)賦值會報錯
 //而computed主要作用就是計算取值的，所以get字段是必須的
 //數(shù)據(jù)劫持
 Object.defineProperty(target, key, sharedPropertyDefinition);
}

function createComputedGetter(key) {
 return function computedGetter() {
  var watcher = this._computedWatchers && this._computedWatchers[key];
  if(watcher) {
   if(watcher.dirty) {
    //watcher.evaluate中更新watcher的值，并把watcher.dirty設(shè)置為false
    //這樣等下次依賴更新的時候才會把watcher.dirty設(shè)置為true，然后進(jìn)行取值的時候才會再次運行這個函數(shù)
    watcher.evaluate();
   }
   //依賴追蹤
   if(Dep.target) {
    watcher.depend();
   }
   //返回watcher的值
   return watcher.value
  }
 }
}
//對于計算屬性，當(dāng)取值計算屬性時，發(fā)現(xiàn)計算屬性的watcher的dirty是true
//說明數(shù)據(jù)不是最新的了，需要重新計算，這里就是重新計算計算屬性的值。
Watcher.prototype.evaluate = function evaluate() {
 this.value = this.get();
 this.dirty = false;
};
//當(dāng)一個依賴改變的時候，通知它update
Watcher.prototype.update = function update() {
 //三種watcher，只有計算屬性 watcher的lazy設(shè)置了true，表示啟用惰性求值
 if(this.lazy) {
  this.dirty = true;
 } else if(this.sync) {
  //標(biāo)記為同步計算的直接運行run，三大類型暫無，所以基本會走下面的queueWatcher
  this.run();
 } else {
  //將watcher推入觀察者隊列中，下一個tick時調(diào)用。
  //也就是數(shù)據(jù)變化不是立即就去更新的，而是異步批量去更新的
  queueWatcher(this);
 }
};