vue.js数据响应式原理解析

const obj = {}
let value
Object.defineProperty(obj, 'a', {
  enumerable: true,
  configurable: true,
  get() {
    console.log('getter')
    return value
  },
  set(newValue) {
    value = newValue
    console.log('setter', newValue)
  }
})

const obj = {}
function defineReactive(data, key, value) {
  // 如果只传了两个参数，则让 value 直接等于 data[key]
  if (arguments.length === 2) value = data[key]

  Object.defineProperty(data, key, {
    enumerable: true, // 可被枚举(for...in 或 Object.keys 方法)
    configurable: true, // 可被配置，比如删除
    get() {
      console.log('查看了' + key + '属性')
      return value
    },
    set(newValue) {
      console.log('修改了' + key + '属性')
      value = newValue
    }
  })
}

defineReactive(obj, 'a', 10)
console.log(obj.a)
obj.a = 11
console.log(obj.a)

// index.js
import observe from './observe.js'
let obj = {
  a: {
    m: {
      n: 1
    }
  },
  b: 2
}
observe(obj)

// observe.js
import Observer from './Observer.js'
export default (value) => {
  if (typeof value !== 'object') return
  if (value.__ob__ !== undefined) {
    // 暂时留空
  } else {
    new Observer(value)
  }
}

// Observer.js
import { def } from './utils.js'
import defineReactive from './defineReactive.js'

export default class Observer {
  constructor(value) {
    def(value, '__ob__', this, false)
    this.walk(value)
  }
  // 处理对象，让对象的属性变为响应式
  walk(value) {
    for (let key in value) {
      defineReactive(value, key)
    }
  }
}

export const def = (obj, key, value, enumerable) => {
  Object.defineProperty(obj, key, {
    value,
    enumerable,
    writable: true,
    configurable: true
  })
}

// defineReactive.js
import observe from './observe.js'

export default function defineReactive(data, key, value) {
  if (arguments.length === 2) value = data[key]

  // 注意这里不是传 key 而是传 value，因为 key 只是一个字符串，value 才是 key 指向的对象
  observe(value)
  // 让 data 的 key 属性变为响应式属性
  Object.defineProperty(data, key, {
    enumerable: true, 
    configurable: true, 
    get() {
      console.log('查看了' + key + '属性')
      return value
    },
    set(newValue) {
      console.log('修改了' + key + '属性')
      value = newValue
      // 修改的属性也需要被观察，如果是对象需要被侦测
      observe(newValue)
    }
  })
}

// index.js
...省略前面的代码
obj.a.m = {
  y: 8
}
console.log(obj.a.m.y)

var num= {
    a: 2,
    get b(){
        return 2
    }
}