var $person1 = {}, person1 = { name: 'caaa' }

​

Object.defineProperty($person1, 'name', {

  get() { return person1.name },

  set(val) { person1.name = val; console.log('发生了更新') }

})

​

console.log('------使用 Object.defineProperty 为 $person1 添加响应式属性-------')

console.log(`$person1.name的值为: ${$person1.name}，`, `$person1.age是未定义的属性：${$person1.age}`)

​

console.log('\n------改变 $person1.name 为jack-------')

$person1.name = 'jack'

console.log(`$person1.name的新值为: ${$person1.name}，`, `person1.name的新值也变为: ${person1.name}`)

​

console.log('\n------改变 $person1.age 为18-------')

$person1.age = 18

console.log(`$person1.age的值为: ${$person1.age}，`, `但因为$person1.age未被setter追踪，所以person1.age并未被更新: ${person1.age}\n\n\n`)

​

​

/*******************/

​

​

var person2 = { name: 'caaa' }

​

var $person2 = new Proxy(person2, {

  get(target, key) {

    return target[key]

  },

  set(target, key, newVal) {

    console.log(`更新了${key}`)

    target[key] = newVal

  }

})

​

console.log('\n\n\n------使用 Proxy 为 $person2 添加响应式属性-------')

console.log(`$person2.name的值为: ${$person2.name}，`, `$person2.age是未定义的属性：${$person2.age}`)

​

console.log('\n------改变 $person2.name 为jack-------')

$person2.name = 'jack'

console.log(`$person2.name的新值为: ${$person2.name}，`, `person2.name的新值也变为: ${person2.name}`)

​

console.log('\n------改变 $person2.age 为18-------')

$person2.age = 18

console.log(`$person2.age的值为: ${$person2.age}，`, `此时即使person2.age此前未定义的值，也被更新为: ${person2.age}`)