实现响应式的原理

首先创建一个名为kvue.js的文件

class Kvue {
  constructor(option) {
    // 获取data
    this._data = option.data
    // 获取data里面的对象-观察者
    this.observer(this._data)
  }
  observer(obj) {
    if(typeof obj !== 'object') return
    Object.keys(obj).forEach(key => this.defineReactive(obj, key, obj[key]))
  }
  cb() {
    console.log('更新数据')
  }
  defineReactive(obj, key, val) {
    this.observer(val)
    let staging = val
    let _this = this
    Object.defineProperty(obj, key, {
      get() {
        console.log(`获取${key}数据`)
        return staging
      },
      set(newVal) {
        staging = newVal
        // 如果newVal不等于val则表示数据更新了，相应的变化也要跟着数据的变化而变化
        if(newVal !== val) {
          console.log(`更新${key}数据`)
          _this.cb()
        }
      }
    })
  }
}

　　然后在一个html文件中引用这个js文件，并new这个kvue类

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="Kvue.js"></script>
  </head>
  <body>
  </body>
  <script>
    const kvue = new Kvue({
      data: {
          msg: {
            detail: "lll"
          },
          test: "2348"
        }
      })
    console.log(JSON.stringify(kvue._data), kvue._data.test)
    kvue._data.test = '测试'
    kvue._data.msg.detail = '12083'
    console.log(JSON.stringify(kvue._data), kvue._data.test)
    kvue._data.msg.detail = '12083'
    console.log(JSON.stringify(kvue._data), kvue._data.test)
  </script>
</html>

　　在浏览器中直接打开这个html文件可以看到打印情况

 

posted @ 2020-04-15 20:11  瑞瑞大人  阅读(288)  评论(0)    收藏  举报