vue觀察模式淺析

// 這個是 vue 綁定自動綁定事件的方法和觸發事件方法, 會把data函數返回的對象變量屬性，重寫對應屬性的 賦值 和獲取的操作。具體查看 （mdn Object.defineProperty api）
 Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: function reactiveGetter () {
 const value = getter ? getter.call(obj) : val
 // watcher 對象， 如果存在
 if (Dep.target) {
 // 把Watcher 實例 推入 Dep 實例的 subs 數組里， 這個就相當于 on
 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
 }
 /* eslint-enable no-self-compare */
 if (process.env.NODE_ENV !== 'production' && customSetter) {
 customSetter()
 }
 if (setter) {
 setter.call(obj, newVal)
 } else {
 val = newVal
 }
 childOb = !shallow && observe(newVal)
 // 通知 Dep 實例 中subs 里數組 中所有 Watcher 實例, 然后調用Watcher實例里的 update方法(), 這個就相當于 trigger。
 dep.notify()
 }
 })

// Watcher 構造函數 
 constructor (
 vm: Component,
 expOrFn: string | Function,
 cb: Function,
 options?: ?Object,
 isRenderWatcher?: boolean
 )

var vm = new Vue({
 data () {
 return {msg: '找個小姐姐！'}
 },
 // 相當于 exporFn
 render(h) {
 return h('h3', {},
 // 這里面就會調用 msg 對應的 getter方法
 this.msg
 )
 }
})