[JavaScript知识库]Vue2、Vue3响应式数据原理实现(双向绑定)

Vue2

let obj = {
        name: "张三",
        age: 22,
      };
      let obj = {};
      Object.defineProperty(obj, "name", {
        enumerable: true,
        configurable: true,
        get() {
          return obj.name;
        },
        set(value) {
          obj.name = value;
          console.log("val的值已经发生变化了" + val);
        },
      });

Vue3

<script>
export default {
  setup() {
    // ref和reactive底层实现
    // reactive
    function reactive(obj) {
      // 首先判断obj的类型
      if (typeof obj === "object") {
        if (obj instanceof Array) {
          // 如果是数组那么取出数组中的每一个元素，判断每一个元素是否又是对象，如果是对象也需要包装成Proxy
          obj.forEach((item) => {
            if (typeof (item, index) === "object") {
              item[index] = reactive(item);
            }
          });
        } else {
          // 如若是对象 取出对象中的每一个值 判断对象的属性的值是否又是对象，如果是也需要包装成Proxy
          for (let key in obj) {
            if (typeof obj[key] === "object") {
              obj[key] = reactive(obj[key]);
            }
          }
        }
      } else {
        console.warn(`您传入的内容: ${obj}不是一个对象`);
      }
      return new Proxy(obj, {
        //target 代表传入的obj对象
        get(target, key) {
          console.log(`有人读取了obj身上的${key}，我要去更新界面了`);
          return target[key];
        },
        set(target, key, value) {
          console.log( `有人改变了obj身上的${key}，我要去更新界面了`);
          target[key] = value;
          return true; // 表示当前操作成功 继续执行下一步
        },
        deleteProperty(target,key){
          console.log(`有人删除了obj身上的${key}，我要去更新界面了`);
          return delete target[key];
        },
      });
    }

    // ref
    function ref(val) {
      return reactive({ value: val });
    }

    let obj1 = {
      name1: "a",
      age: 18,
      children: {
        name2: "aa",
        age: 19,
        children: {
          name3: "aaa",
          age: 20,
        },
      },
    };
    let obj2 = {
      name: "du",
    };
    let state = reactive(obj1);
    let state2 = reactive(obj2);
    state2.name = "zhang";
    delete state.name

    state.name1 = "b";
    state.children.name2 = "bb";
    state.children.children.nae3 = "bbb";

    console.log(state);
    console.log(state2);
  },
};
</script>