如何深度监听data变化

如何深度监听data变化

代码演示

/* 模拟更新视图 */
function updateView() {
	console.log('视图更新')
}

/* 监听对象属性 */
function observer(target) {
	// 只监听对象和数组
  if (typeof target !== 'object' || target == null) {
  	return target
  }
  // 重新定义各个属性
  for (let key in target) {
  	defineReactive(target, key, target[key])
  }
}

/* 对属性重新定义，并且监听 */
function defineReactive(target, key, val) {
  // 深度监听
  observer(val) // 因为val不一定是值，也可能是一个对象或数组
  
	Object.defineProperty(target, key, {
  	get() {
    	return val
    },
    set(newVal) {
    	if (newVal !== val) {
        // 深度监听 新增加的如果是对象和数组也要加入监听
        observer(newVal)
        // 设置新值
      	val = newVal
      }
      // 更新视图
      updateView()
    }
  })
}

/* 测试 */
// 准备数据
const data = {
  name: 'zhangsan',
  age: 20,
  info: {
    address: '北京' // 需要深度监听
  }
}
data.name = 'lisi' // 会输出一次 视图更新
data.age = { num: 21 } // 会输出一次 视图更新，且num也被监听了
data.age.num = 22 // 会输出一次 视图更新
data.sex = 'male' // 啥也不会输出，因为没有对这样新增的属性进行监听
delete data.name // 同样什么也不会输出，因为核心API就没有这个功能

Object.defineProperty缺点

深度监听，需要递归到底，一次性计算量大

无法监听新增属性/删除属性（Vue.set Vue.delete）

无法原生监听数组，需要特殊处理

以上完成了对对象的监听，对数组的一些操作push，pop等则无效，因为核心API不具备对数组的监听