侦听器 vue中 Observer实现只针对对象

最新推荐文章于 2023-08-15 17:58:06 发布

徐嘉迪

最新推荐文章于 2023-08-15 17:58:06 发布

阅读量278

点赞数

分类专栏：经验分享文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/weixin_45917382/article/details/125824536

版权

经验分享专栏收录该内容

20 篇文章 0 订阅

订阅专栏

observer.js

export class Observer{
    constructor(value){
        this.value=value
        if (Array.isArray(value)) {
            //数组的逻辑
        }else{
            //对象的逻辑
            this.walk(value)
        }
    }
    walk(obj){
        const keys= Object.keys(obj)
        for(let i=0; i<keys.length;i++){
          defineReactive(obj,keys[i])
        }
    }

}


  function defineReactive(obj, key, val) {
    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){
            console.log(`${key}属性被修改了 ,新值是${newVal}`)
            val =newVal
        }
    
    })

}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      import { Observer } from "./observer.js";
      let obj = new Observer({
        name: "xiaomin",
        age: 12,
        demo: {
          a: "aaa",
          b: 12,
        },
      });
      console.log(obj.value.name);
      obj.value.age = 25;
      obj.value.demo.a='aaa'
    </script>
  </body>
</html>