// 利用ref将某一对象中的属性变成响应式数据，修改响应式数据是不会影响到原始数据的
  // let state5 = ref(obj.name);
  // 使用toRef 会影响响应式数据但不会更新界面
  let state5 = toRef(obj, 'name');

let obj = { name: "aaa", age: 24 };
  let state5 = toRefs(obj);
  let func5 = () => {
    // state5.value = 'dd';
    state5.age.value = 33;
    console.log(state5);
  };

let state = myRef("../public/data.json");
  let func = () => {
    state.value += 1;
  };
// setup外
function myRef(value) {
  return customRef((track, trigger) => {
    fetch(value)
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        value = data;
        trigger();
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
    return {
      get() {
        track(); // 需要追踪变化的
        // 不能读取数据
        return value;
      },
      set(newValue) {
        value = newValue;
        trigger(); // 触发界面更新
        console.log("set");
      },
    };
  });
}

<div ref="box">box</div>
let box = ref(null);
    onMounted(() => {
      console.log("onMounted", box.value);  // onMounted <div>box</div>
    });
    console.log(box.value);   //null 先执行
return {box}

let state1 = readonly({ id: 1, name: "ddd" });
  let state2 = shallowReadonly({ id: 1, son: { name: "yyy" } });
  let func = () => {
    state2.id = 2;
    state2.son.name = "2222";
    // shallowReadonly 只有第一层不可修改；但修改值后不触发界面更新
    console.log(state2); // id: 1 son: {name: "2222"}
    console.log(isReadonly(state1), isReadonly(state2)); // true true

const state3 = { id: 1, name: "ddd" };
  state3.id = 3;  //  属性赋值
    state3.name = '3333';
  state3.of = 'ff';
  //  state3 = 3; 直接赋值就不行
    console.log(state3);  // {id: 3, name: "3333", of: "ff"}

// vue3响应数据本质
let obj = { name: 'dy', age: 18 };
let state = new Proxy(obj, {
    get(obj, key) {
        console.log(obj, key); // { name: 'dy', age: 18 } name
        return Reflect.get(obj, key);
    },
    set(obj, key, value) {
        obj[key] = value;
        console.log(obj, key, value);
        return true; // 变量为数组时，需要返回true，表示上一次操作成功
    }
});
state.name = 'dddd';
console.log(state.name);

function shallowRef(val) {
    return shallowReactive({ value: val });
}
function shallowReactive(obj) {
    return new Proxy(obj, {
        get(obj, key) {
            console.log(obj, key);
            return obj[key];
        },
        set(obj, key, value) {
            obj[key] = value;
            console.log('数据修改了,更新页面');
            return true;
        }
    })
}

function ref(val) {
    return reactive({ value: val });
}
function reactive(obj) {
    if (typeof obj === 'object') {
        if (obj instanceof Array) {
            // 如果是一个数组，那么取出数组中的每一个元素
            // 再判断每个元素是否又是一个对象，如果是再包装成Proxy
            obj.forEach((item, index) => {
                if (typeof item === 'object') {
                    obj[index] = reactive(item);
                }
            })
        } else {
            // 对象，里面如果还是对象就再包装
            for (let key in obj) {
                let item = obj[key];
                if (typeof item === 'object') {
                    obj[key] = reactive(item);
                }
            }
        }
    }
    return new Proxy(obj, {
        get(obj, key) {
            console.log(obj[key]);
            return obj[key];
        },
        set(obj, key, value) {
            obj[key] = value;
            console.log('set');
            return true;
        }
    })
}

function shallowReadonly(obj) {
    return new Proxy(obj, {
        get(obj, key) {
            return obj[key];
        },
        set(obj, key, val) {
            // obj[key] = val;
            console.warn('只读，不能修改');
        }
    })
}
function readonly(obj) {
    if (typeof obj === 'object') {
        if (obj instanceof Array) {
            obj.forEach((item, index) => {
                if (typeof item === 'obj') {
                    obj[index] = readonly(item);
                }
            })
        } else {
            for (let key in obj) {
                let item = obj[key];
                if (typeof item === 'object') {
                    obj[key] = readonly(item);
                }
            }
        }
    }
    return new Proxy(obj, {
        get(obj, key) {
            return Reflect.get(obj, key);
        },
        set(obj, key, value) {
            // obj[key] = value;
            console.warn('只读，不能修改');
            return true;
        }
    })
}