<div id="app">{{ message }}</div>

render (h) {
  return h('div', {
     attrs: {
        id: 'app'
      },
  }, this.message)
}

// mian.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
  render: h => h(App),
}).$mount('#app')

// App.vue
<template>
    <div id="app">
      <p>{{ msg }}</p>
    </div>
</template>
<script>
    export default {
        name: 'App',
        data () {
            return {
                msg: 'hello world'
            }
        }
    }
</script>

{
    tag: 'vue-component-1-App',
    componentInstance: {組件實例},
    componentOptions: {Ctor, ..., }
}

{
    tag: 'div',
    {
        "attrs": {
            "id": "app"
        }
    },
    // 對應(yīng)占位符vnode: $vnode
    parent: {
        tag: 'vue-component-1-App',
        componentInstance: {組件實例},
        componentOptions: {Ctor, ..., }
    },
    children: [
        // 對應(yīng)p標簽
        { 
            tag: 'p',
            // 對應(yīng)p標簽內(nèi)的文本節(jié)點{{ msg }}
            children: [{ text: 'hello world' }]
        }, {
          // 如果還有組件VNode其實也是一樣的
          tag: 'vue-component-2-xxx'
        }              
    ]
}

// 案例
export default {
    name: 'App',
    data () {
        return {
            msg: 'hello world',
            arr = [1, 2, 3]
        }
    }
}

// 以下是initData調(diào)用的方法講解，排列遵循調(diào)用順序
function observe (value, asRootData) {
  if (!isObject(value)) return // 非對象則不處理
  // 實例化Observer對象
  var ob;
  ob = new Observer(value);
  return ob
}
function Observer (value) {
  this.value = value; // 保存當前的data
  this.dep = new Dep(); // 實例化dep，數(shù)組進行依賴收集的dep（對應(yīng)案例中的arr）
  def(value, '__ob__', this);    
  if (Array.isArray(value)) {
    if (hasProto) {
      // 這里會改寫數(shù)組原型。__proto__指向重寫數(shù)組方法的對象
      protoAugment(value, arrayMethods); 
    } else {
      copyAugment(value, arrayMethods, arrayKeys);
    }
    this.observeArray(value);
  } else {
    this.walk(value); 
  }
}
// 遍歷數(shù)組元素，執(zhí)行對每一項調(diào)用observe，也就是說數(shù)組中有對象會轉(zhuǎn)成響應(yīng)式對象
Observer.prototype.observeArray = function observeArray (items) {
  for (var i = 0, l = items.length; i < l; i++) {
    observe(items[i]);
  }
}
// 遍歷對象的全部屬性，調(diào)用defineReactive
Observer.prototype.walk = function walk (obj) {
  var keys = Object.keys(obj);
  // 如案例代碼，這里的 keys = ['msg', 'arr']
  for (var i = 0; i < keys.length; i++) {        
    defineReactive(obj, keys[i]);
  }
}

function defineReactive (obj, key, val) {
  // 產(chǎn)生一個閉包dep
  var dep = new Dep();
  // 如果val是object類型，遞歸調(diào)用observe，案例代碼中的arr會走這個邏輯
  var childOb = !shallow && observe(val);
  Object.defineProperty(obj, key, {    
    get: function reactiveGetter () { 
      // 求value的值
      var value = getter ? getter.call(obj) : val;
      if (Dep.target) { // Dep.target就是當前的Watcher
        // 這里是閉包dep
        dep.depend();
        if (childOb) {
          // 案例代碼中arr會走到這個邏輯
          childOb.dep.depend(); // 這里是Observer里的dep，數(shù)組arr在此依賴收集
          if (Array.isArray(value)) {
            dependArray(value);
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      // 下文派發(fā)更新里進行講解
    }
  });
}

// new Wathcer核心
function Watcher (vm, expOrFn, cb, options, isRenderWatcher) {
  if (typeof expOrFn === 'function') {
  // 渲染watcher中，這里傳入的expOrFn是updateComponent = vm.update(vm.render())
  // this.getter等價于vm.update(vm.render())
    this.getter = expOrFn; 
  } else {
    ...
  }
  // 這里進行判斷，lazy為true時(計算屬性)則什么都不執(zhí)行，否則執(zhí)行g(shù)et
  this.value = this.lazy
    ? undefined
    : this.get(); // 本次為渲染W(wǎng)atcher，執(zhí)行g(shù)et，繼續(xù)往下看～
}
// Watcher的get方法
Watcher.prototype.get = function get () {
  // 這里很關(guān)鍵，pushTarget就是把當前的Wather賦值給“Dep.target”
  pushTarget(this);
  var value;
  var vm = this.vm;
  try {
    // 1. 這里調(diào)用getter，也就是執(zhí)行vm.update(vm.render())
    // 2. 執(zhí)行vm.render函數(shù)就會訪問到響應(yīng)式數(shù)據(jù)，觸發(fā)get進行依賴收集
    // 3. 此時的Dep.target為當前的渲染W(wǎng)atcher，數(shù)據(jù)就可以理所應(yīng)當?shù)陌裌atcher加入自己的subs中
    // 4. 所以此時，Watcher就能監(jiān)測到數(shù)據(jù)變化，實現(xiàn)響應(yīng)式
    value = this.getter.call(vm, vm);
  } catch (e) {
    ...
  } finally {
    popTarget();
    /*
    * cleanupDeps是個優(yōu)化操作，會移除Watcher對本次render沒被使用的數(shù)據(jù)的觀測
    * 效果：處于v-if為false中的響應(yīng)式數(shù)據(jù)改變不會觸發(fā)Watcher的update
    * 感興趣的可以自己去debugger調(diào)試，這里就不展開了
    */
    this.cleanupDeps(); 
  }
  return value
}

...
Object.defineProperty (obj, key, {
    get () {...},
    set: function reactiveSetter (newVal) {
      var value = getter ? getter.call(obj) : val;
      // 判斷新值相比舊值是否已經(jīng)改變
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      // 如果新值是引用類型，則將其轉(zhuǎn)化為響應(yīng)式
      childOb = !shallow && observe(newVal);
      // 這里通知dep的所有watcher進行更新
      dep.notify();
    }
}        
...

// 數(shù)組方法改寫是在 Observer 方法中
function Observer () {
    if (hasProto) { 
        // 用案例講解，也就是this.arr.__proto__ = arrayMethods
        protoAugment(value, arrayMethods); 
    }
}   
// 以下是數(shù)組方法重寫的實現(xiàn)
var arrayProto = Array.prototype; // 保存真實數(shù)組的原型
var arrayMethods = Object.create(arrayProto); // 以真數(shù)組為原型創(chuàng)建對象
// 可以看成：arrayMethods.__proto__ = Array.prototype
var methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
];
// 一個裝飾器模型，重寫7個數(shù)組方法
methodsToPatch.forEach(function (method) {
  // 保存原生的數(shù)組方法
  var original = arrayProto[method];
  // 劫持arrayMethods對象中的數(shù)組方法
  def(arrayMethods, method, function mutator () {
    var args = [], len = arguments.length;
    while ( len-- ) args[ len ] = arguments[ len ];
    var result = original.apply(this, args);
    var ob = this.__ob__; // 當我門調(diào)用this.arr.push()，這里就能到數(shù)組對象的ob實例
    var inserted;
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args;
        break
      case 'splice':
        inserted = args.slice(2);
        break
    }
    if (inserted) { ob.observeArray(inserted); }
    // 由于數(shù)組對象在new Observer中實例化了一個dep，并通過childOb邏輯收集了依賴，這里就能在ob實例中拿到dep屬性
    ob.dep.notify();
    return result
  });
})

<template>
    <div id="app">
        {{ name }}
    </div>
</template>
<script>
export default {
    name: 'App',
    computed: {
      name () {
        return this.firstName + this.secondName
      }
    },
    data () {
        return {
            firstName: 'jing',
            secondName: 'boran'
        }
    }
}
</script>

// 訪問computed時觸發(fā)get的核心代碼 
function createComputedGetter (key) {
  return function computedGetter () {
    var watcher = this._computedWatchers && this._computedWatchers[key];
    if (watcher) {
      if (watcher.dirty) { // dirty第一次為true
        watcher.evaluate(); // 這里是對computed進行求值，對computed watcher執(zhí)行依賴收集
      }
      if (Dep.target) {
        watcher.depend(); // 這里是對渲染W(wǎng)atcher進行依賴收集
      }
      return watcher.value
    }
  }
}

Watcher.prototype.depend = function depend () {
  var i = this.deps.length;
  while (i--) {
    // 也就是調(diào)用Dep.depend => Watcher.addDep => dep.addSub
    this.deps[i].depend(); 
  }
}

// this.firstName和this.secondName的dep.subs
dep.subs: [name的computed watcher, App組件的渲染W(wǎng)atcher]

// 此時flag為true，也就是說msg2沒有渲染在頁面中
<div v-if="flag">{{ msg1 }}</div>
<div v-else>{{ msg2 }}</div>
<button @click=() => { this.msg2 = 'change' }>changeMsg2</button>

function cleanupDeps () {
  var i = this.deps.length;
  while (i--) {
    // 這里對watcher所觀測的響應(yīng)式數(shù)據(jù)的dep進行遍歷
    // 對的，這樣一來，是不是watcher中的deps就發(fā)揮作用了呢？
    var dep = this.deps[i];
    if (!this.newDepIds.has(dep.id)) {
      // 這里對當前渲染中沒有訪問到的響應(yīng)式數(shù)據(jù)進行依賴移除
      dep.removeSub(this); 
    }
  }
  ...
}

Watcher.prototype.update = function update () {      
  if (this.lazy) {
    this.dirty = true; // computed會走到這里，然后就結(jié)束了
  } else if (this.sync) {
    this.run();
  } else {
    queueWatcher(this); // 渲染watcher會走到這里
  }
}

// 沒錯，又是這段熟悉的代碼
this.value = this.lazy
  ? undefined
  : this.get(); // user Watcher和渲染 Watcher都在new Watcher階段執(zhí)行g(shù)et()

Vue.prototype.$watch = function (expOrFn, cb, options) {
  ...
  var watcher = new Watcher(vm, expOrFn, cb, options);
  if (options.immediate) {
    // immediate則會執(zhí)行我們傳入的callback
    try {
      cb.call(vm, watcher.value);
    } catch (error) {
    }
  }
  return function unwatchFn () {
    watcher.teardown();
  }
};

Watcher.prototype.update = function update () {
  if (this.lazy) {
    this.dirty = true; // 計算屬性
  } else if (this.sync) {
    this.run(); // 同步的user Wathcer
  } else {
    queueWatcher(this); // 普通user Watcher和渲染W(wǎng)atcher
  }
}