vue原理--让每一个属性都可以被观测（Observer类实现）

自由的音符

已于 2022-05-23 15:55:27 修改

阅读量294

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-05-23 15:17:35 首次发布

本文链接：https://blog.csdn.net/weCat_s/article/details/124927862

版权

Vue 专栏收录该内容

48 篇文章 5 订阅

订阅专栏

html

<!--
 * @Autor: CQJ
 * @Date: 2022-05-23 14:59:59
 * @LastEditors: CQJ
 * @LastEditTime: 2022-05-23 15:09:49
 * @Description: 
-->
<!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需要声明引入的文件类型为module -->
    <script type="module">
        import { Observer } from './observer.js';
        let obj = new Observer({
            name: 'cqj',
            age: 18,
            demo: {
                a: '111',
                b: 2
           },
           arr:[1,2,3,4,5]
        });
        // console.log(obj.value.name);
        // obj.value.age = 23
        console.log(obj.value.demo.a);
        //没有递归调用的情况下是捕获不到的
        obj.value.demo.b = 23456
        obj.value.arr.push(12)
        console.log(obj.value.arr)
    </script>
</body>

</html>

observer

/*
 * @Autor: CQJ
 * @Date: 2022-05-23 15:00:20
 * @LastEditors: CQJ
 * @LastEditTime: 2022-05-23 15:53:12
 * @Description:对象里的任何一个数据发生变化都能监听到
 */
//vue原理 --变化侦测
export class Observer {
  constructor(value) {
    this.value = value;
    if (Array.isArray(value)) {
      //数组逻辑
      this.observeArray(value);
    } else {
      //对象逻辑
      this.walk(value);
    }
  }
  walk(obj) {
    //{name: 'cqj', age: 18}
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i]);
    }
  }
  observeArray(items) {
    console.log("items: ", items);
    for (let i = 0; i < items.length; i++) {
      observe(items[i]);
    }
  }
}
function observe(value) {
  if (!value || typeof value !== "object") {
    return;
  }
  return new Observer(value);
}
//循环，让每一个属性都变可侦测
//技巧：如果你的函数有且仅有两个参数，那么多出来的第三个参数可作为函数的返回值
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}`);
      newVal === val;
    },
  });
}

自由的音符

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue原理--让每一个属性都可以被观测（Observer类实现）

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equi
复制链接

扫一扫