var vm = new Vue({
? el: '#example',
? data: {
? ? message: 'Hello'
? },
? computed: {
? ? // 計算屬性的 getter
? ? reversedMessage: function () {
? ? ? // `this` 指向 vm 實例
? ? ? return this.message.split('').reverse().join()
? ? }
? }
})

// src/core/instance/state.js
// 初始化組件的state
export function initState (vm: Component) {
? vm._watchers = []
? const opts = vm.$options
? if (opts.props) initProps(vm, opts.props)
? if (opts.methods) initMethods(vm, opts.methods)
? // 當組件存在data屬性
? if (opts.data) {
? ? initData(vm)
? } else {
? ? observe(vm._data = {}, true /* asRootData */)
? }
? // 當組件存在 computed屬性
? if (opts.computed) initComputed(vm, opts.computed)
? if (opts.watch && opts.watch !== nativeWatch) {
? ? initWatch(vm, opts.watch)
? }
}

// src/core/instance/state.js
function initData (vm: Component) {
? let data = vm.$options.data
? data = vm._data = typeof data === 'function'
? ? ? getData(data, vm)
? ? : data || {}
? // .....省略無關代碼
??
? // 將vue的data傳入observe方法
? observe(data, true /* asRootData */)
}
// src/core/observer/index.js
export function observe (value: any, asRootData: ?boolean): Observer | void {
? if (!isObject(value)) {
? ? return
? }
? let ob: Observer | void
? // ...省略無關代碼
? ob = new Observer(value)
? if (asRootData && ob) {
? ? ob.vmCount++
? }
? return ob
}

// src/core/observer/index.js
export class Observer {
? value: any;
? dep: Dep;
? vmCount: number; // number of vms that has this object as root $data
? constructor (value: any) {
? ? this.value = value
? ? // 關鍵代碼 new Dep對象
? ? this.dep = new Dep()
? ? this.vmCount = 0
? ? def(value, '__ob__', this)
? ? // ...省略無關代碼
? ? this.walk(value)
? }
? walk (obj: Object) {
? ? const keys = Object.keys(obj)
? ? for (let i = 0; i < keys.length; i++) {
? ? ? // 給data的所有屬性調用defineReactive
? ? ? defineReactive(obj, keys[i], obj[keys[i]])
? ? }
? }
}

// src/core/observer/index.js
export function defineReactive (
? obj: Object,
? key: string,
? val: any,
? customSetter?: ?Function,
? shallow?: boolean
) {
? // 重點，在給具體屬性調用該方法時，都會為該屬性生成唯一的dep對象
? const dep = new Dep()
? // 獲取該屬性的描述對象
? // 該方法會返回對象中某個屬性的具體描述
? // api地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
? const property = Object.getOwnPropertyDescriptor(obj, key)
? // 如果該描述不能被更改，直接返回，因為不能更改，那么就無法代理set和get方法，無法做到響應式
? if (property && property.configurable === false) {
? ? return
? }
? // cater for pre-defined getter/setters
? const getter = property && property.get
? const setter = property && property.set
? let childOb = !shallow && observe(val)
? // 重新定義data當中的屬性，對get和set進行代理。
? Object.defineProperty(obj, key, {
? ? enumerable: true,
? ? configurable: true,
? ? get: function reactiveGetter () {
? ? ? const value = getter ? getter.call(obj) : val
? ? ? // 收集依賴， reversedMessage為什么會跟著message變化的原因
? ? ? if (Dep.target) {
? ? ? ? dep.depend()
? ? ? ? if (childOb) {
? ? ? ? ? childOb.dep.depend()
? ? ? ? }
? ? ? ? if (Array.isArray(value)) {
? ? ? ? ? dependArray(value)
? ? ? ? }
? ? ? }
? ? ? return value
? ? },
? ? set: function reactiveSetter (newVal) {
? ? ? const value = getter ? getter.call(obj) : val
? ? ? /* eslint-disable no-self-compare */
? ? ? if (newVal === value || (newVal !== newVal && value !== value)) {
? ? ? ? return
? ? ? }
? ? ? if (setter) {
? ? ? ? setter.call(obj, newVal)
? ? ? } else {
? ? ? ? val = newVal
? ? ? }
? ? ? childOb = !shallow && observe(newVal)
? ? ? // 通知依賴進行更新
? ? ? dep.notify()
? ? }
? })
}

// src/core/observer/dep.js
export default class Dep {
? static target: ?Watcher;
? id: number;
? subs: Array<Watcher>;
? constructor () {
? ? this.id = uid++
? ? this.subs = []
? }
? addSub (sub: Watcher) {
? ? this.subs.push(sub)
? }
? removeSub (sub: Watcher) {
? ? remove(this.subs, sub)
? }
? depend () {
? ? if (Dep.target) {
? ? ? Dep.target.addDep(this)
? ? }
? }
? notify () {
? ? const subs = this.subs.slice()
? ? for (let i = 0, l = subs.length; i < l; i++) {
? ? ? // 更新 watcher 的值，與 watcher.evaluate() 類似，
? ? ? // 但 update 是給依賴變化時使用的，包含對 watch 的處理
? ? ? subs[i].update()
? ? }
? }
}
// 當首次計算 computed 屬性的值時，Dep 將會在計算期間對依賴進行收集
Dep.target = null
const targetStack = []
export function pushTarget (_target: Watcher) {
? // 在一次依賴收集期間，如果有其他依賴收集任務開始（比如：當前 computed 計算屬性嵌套其他 computed 計算屬性），
? // 那么將會把當前 target 暫存到 targetStack，先進行其他 target 的依賴收集，
? if (Dep.target) targetStack.push(Dep.target)
? Dep.target = _target
}
export function popTarget () {
? // 當嵌套的依賴收集任務完成后，將 target 恢復為上一層的 Watcher，并繼續(xù)做依賴收集
? Dep.target = targetStack.pop()
}

// src/core/instance/state.js
const computedWatcherOptions = { lazy: true }
function initComputed (vm: Component, computed: Object) {
? // 初始化watchers列表
? const watchers = vm._computedWatchers = Object.create(null)
? const isSSR = isServerRendering()
? for (const key in computed) {
? ? const userDef = computed[key]
? ? const getter = typeof userDef === 'function' ? userDef : userDef.get
? ? if (!isSSR) {
? ? ? // 關注點1，給所有屬性生成自己的watcher, 可以在this._computedWatchers下看到
? ? ? watchers[key] = new Watcher(
? ? ? ? vm,
? ? ? ? getter || noop,
? ? ? ? noop,
? ? ? ? computedWatcherOptions
? ? ? )
? ? }
? ? if (!(key in vm)) {
? ? ? // 關注點2
? ? ? defineComputed(vm, key, userDef)
? ? }
? }
}

// src/core/observer/watcher.js
constructor (
? ? vm: Component,
? ? expOrFn: string | Function,
? ? cb: Function,
? ? options?: Object
? ) {
? ? this.vm = vm
? ? vm._watchers.push(this)
? ? if (options) {
? ? ? this.deep = !!options.deep
? ? ? this.user = !!options.user
? ? ? this.lazy = !!options.lazy
? ? ? this.sync = !!options.sync
? ? } else {
? ? ? this.deep = this.user = this.lazy = this.sync = false
? ? }
? ? this.cb = cb
? ? this.id = ++uid // uid for batching
? ? this.active = true
? ? this.dirty = this.lazy // 如果初始化lazy=true時（暗示是computed屬性），那么dirty也是true,需要等待更新
? ? this.deps = []
? ? this.newDeps = []
? ? this.depIds = new Set()
? ? this.newDepIds = new Set()
? ? this.getter = expOrFn // 在computed實例化時，將具體的屬性值放入this.getter中
? ? // 省略不相關的代碼
? ? this.value = this.lazy
? ? ? ? undefined
? ? ? : this.get()
? }

this.dirty = this.lazy
this.getter = expOrFn

// src/core/instance/state.js
function createComputedGetter (key) {
? return function computedGetter () {
? ? const watcher = this._computedWatchers && this._computedWatchers[key]
? ? // 如果找到了該屬性的watcher
? ? if (watcher) {
? ? ? // 和上文對應，初始化時，該dirty為true,也就是說，當?shù)谝淮卧L問computed中的屬性的時候，會調用 watcher.evaluate()方法；
? ? ? if (watcher.dirty) {
? ? ? ? watcher.evaluate()
? ? ? }
? ? ? if (Dep.target) {
? ? ? ? watcher.depend()
? ? ? }
? ? ? return watcher.value
? ? }
? }
}

// src/core/instance/state.js
evaluate () {
? this.value = this.get()
? this.dirty = false
}
??
get () { ?
// 重點1，將當前watcher放入Dep.target對象
? pushTarget(this)
? let value
? const vm = this.vm
? try {
? ? // 重點2，當調用用戶傳入的方法時，會觸發(fā)什么？
? ? value = this.getter.call(vm, vm)
? } catch (e) {
? } finally {
? ? popTarget()
? ? // 去除不相關代碼
? }
? return value
}

get: function reactiveGetter () {
? ? ? const value = getter ? getter.call(obj) : val
? ? ? // 這個時候，有值了
? ? ? if (Dep.target) {
? ? ? ? // computed的watcher依賴了this.data的dep
? ? ? ? dep.depend()
? ? ? ? if (childOb) {
? ? ? ? ? childOb.dep.depend()
? ? ? ? }
? ? ? ? if (Array.isArray(value)) {
? ? ? ? ? dependArray(value)
? ? ? ? }
? ? ? }
? ? ? return value
? ? }

var vm = new Vue({
? el: '#example',
? data: {
? ? message: 'Hello'
? },
? computed: {
? ? // 計算屬性的 getter
? ? reversedMessage: function () {
? ? ? // `this` 指向 vm 實例
? ? ? return this.message.split('').reverse().join()
? ? }
? }
})
vm.reversedMessage // => ?olleH
vm.message = 'World' //?
vm.reversedMessage // => ?dlroW