VUE响应式原理-Observer类

2021-10-18 22:32:34 阅读：143 来源： 互联网

标签：VUE return observer Observer value 响应 key data newValue

class Observer{
  // 接受传入的对象，将这个对象转换为getter/setter  
  constructor(data) {
    this.data = data
    // 遍历数据
    this.walk(data)
  }
  // 封装用于数据遍历的方法
  walk(data) {
    // 将遍历后的数据都转换成getter/setter
    Object.keys(data).forEach(key => {
      this.convert(key, data[key])
    })
  }
  // 封装用于将对象转换成响应式的方法
  convert(key, value) {
   defineReactive(this.data, key, value)
  }
}

function defineReactive(data, key, value) {
  // 创建消息中心
  const dep = new Dep()
  observer(value)  
  // 进行数据劫持
  Object.defineProperty(data,key, {
    enumerable: true,
    configurable: true,
    get() {
      console.log("获取了属性")
      Dep.target && dep.addSub(Dep.target)
      return value
    },
    set(newValue) {
      if(newValue === value) return
      console.log("设置了属性")
      value = newValue
      observer(value)
      // 数据发生变化时 通知消息中心
      dep.notify()
    }
  })
}

function observer(value) {
    // 检测数据是否为对象,如果是对象，则创建一个新的observe进行管理
    if(typeof value === 'object' && value !== null) {
      return new Observer(value)
    }
}

标签：VUE,return,observer,Observer,value,响应,key,data,newValue
来源： https://blog.csdn.net/wangjiakang12306/article/details/120836287

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE响应式原理-Observer类