数据响应Object.defineProperty

背景

   前端vue框架大火，面试时经常碰到，数据响应是这么实现的。今天快速简单带你实现数据响应

核心Object.defineProperty

let demoObj = {};
let descriptor = {
  configurable: false, // 该属性能否通过delete删除
  writable: false, // 是否可写
  enumerable: false, // 是否可枚举
  value: 'demoObj', // 属性值，默认undefined

  // 当 writable 为true是
  // get:function(){}
  // set:function(){}
}
Object.defineProperty(demoObj, 'demoprop', descriptor)

上代码

/**
 * @param {Object} obj
 * @param {String} key
 * @param {*} val
 * 数据响应式
 */
function defineReactive(obj, key, val) {
  // val 变量由于闭包的存在不会被销毁,一直保持在内存里面
  Object.defineProperty(obj, key, {
    // 获取key值时触发
    get() {
      console.log('get:', key)
      return val
    },
    // 设置key值时触发
    set (newVal) {
      if(newVal !== val){
        console.log('set:', key)
        val = newVal
      }
    }
  })
}

let obj = {}
defineReactive(obj, 'name', '张三')
obj.name  // 触发get
obj.name = '李四' // 触发set
console.log(obj)

创作、分享不易。收藏和点赞是最大的支持!