这个是要完成什么样的功能？

最新推荐文章于 2024-10-01 20:12:28 发布

hamimelon2020

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量60

点赞数

分类专栏： vue JavaScript 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_40945354/article/details/124271267

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

这篇博客通过一个Observer类展示了如何使用JavaScript实现响应式数据绑定。Observer类用于创建观察者对象，通过对对象进行遍历并定义getter和setter来实现数据的监听。当对象属性被读取或修改时，会触发相应的 console.log 输出。示例中创建了一个Observer实例，用于观察一个包含品牌和价格的对象。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    <head>
        <title>document.write() Example</title>
    </head>
    <body>
        <script type="text/javascript">
   export class Observer {
  constructor (value) {
    this.value = value
    // 给value新增一个__ob__属性，值为该value的Observer实例
    // 相当于为value打上标记，表示它已经被转化成响应式了，避免重复操作
    def(value,'__ob__',this)
    if (Array.isArray(value)) {
      // 当value为数组时的逻辑
      // ...
    } else {
      this.walk(value)
    }
  }

  walk (Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }
}
/**
 * 使一个对象转化成可观测对象
 * @param { Object } obj 对象
 * @param { String } key 对象的key
 * @param { Any } val 对象的某个key的值
 */
function defineReactive (obj,key,val) {
  // 如果只传了obj和key，那么val = obj[key]
  if (arguments.length === 2) {
    val = obj[key]
  }
  if(typeof val === 'object'){
      new Observer(val)
  }
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get(){
      console.log(`${key}属性被读取了`);
      return val;
    },
    set(newVal){
      if(val === newVal){
          return
      }
      console.log(`${key}属性被修改了`);
      val = newVal;
    }
  })
}
let car = new Observer({
  'brand':'BMW',
  'price':3000
})
             </script> 
    </body>

</html>