const obj = {
  name: 'win'
}
const handler = {
  get: function(target, key){
    console.log('get--', key)
    return Reflect.get(...arguments)  
  },
  set: function(target, key, value){
    console.log('set--', key, '=', value)
    return Reflect.set(...arguments)
  }
}
const data = new Proxy(obj, handler)
data.name = 'ten'
console.log(data.name,'data.name22')

import { reactive } from "./reactive";
import { trackEffects, triggerEffects } from './effect'
export const isObject = (value) => {
    return typeof value === 'object' && value !== null
}
// 將對象轉(zhuǎn)化為響應(yīng)式的
function toReactive(value) {
    return isObject(value) ? reactive(value) : value
}
class RefImpl {
    public _value;
    public dep = new Set; // 依賴收集
    public __v_isRef = true; // 是ref的標(biāo)識
    // rawValue 傳遞進來的值
    constructor(public rawValue, public _shallow) {
        // 1、判斷如果是對象 使用reactive將對象轉(zhuǎn)為響應(yīng)式的
        // 淺ref不需要再次代理
        this._value = _shallow ? rawValue : toReactive(rawValue);
    }
    get value() {
        // 取值的時候依賴收集
        trackEffects(this.dep)
        return this._value;
    }
    set value(newVal) {
        if (newVal !== this.rawValue) {
            // 2、set的值不等于初始值 判斷新值是否是對象 進行賦值
            this._value = this._shallow ? newVal : toReactive(newVal);
            // 賦值完 將初始值變?yōu)楸敬蔚?
            this.rawValue = newVal
            triggerEffects(this.dep)
        }
    }
}

        const obj = {
            count: 1
        };
        const proxy = new Proxy(obj, {
            get(target, key, receiver) {
                console.log("這里是get");
                return Reflect.get(target, key, receiver);
            },
            set(target, key, value, receiver) {
                console.log("這里是set");
                return Reflect.set(target, key, value, receiver);
            }
        });
        
        console.log(proxy)
        console.log(proxy.count)

    const obj = {
            count: 1,
            b: {
                c: 2
            }
        };
     console.log(proxy.b)
     console.log(proxy.b.c)

    const obj = {
            a: {
                count: 1
            }
        };
        function reactive(obj) {
            return new Proxy(obj, {
                get(target, key, receiver) {
                    console.log("這里是get");
                    // 判斷如果是個對象在包裝一次，實現(xiàn)深層嵌套的響應(yīng)式
                    if (typeof target[key] === "object") {
                        return reactive(target[key]);
                    };
                    return Reflect.get(target, key, receiver);
                },
                set(target, key, value, receiver) {
                    console.log("這里是set");
                    return Reflect.set(target, key, value, receiver);
                }
            });
        };
        const proxy = reactive(obj);

       const obj = {
            a: {
                count: 1
            },
            b: 1
        };
            //reactive 是上文中的reactive
           const proxy = reactive(obj);
        const {
            a,
            b
        } = proxy;
        console.log(a)
        console.log(b)
        console.log(a.count)

   // 假設(shè)a是個響應(yīng)式對象
  const a={ b:1}
  // c 此時就是一個值跟當(dāng)前的a 已經(jīng)不沾邊了
  const c=a.b
// 你直接訪問c就相當(dāng)于直接訪問這個值 也就繞過了 a 對象的get ，也就像原文中說的失去響應(yīng)式

  // 假設(shè)a是個響應(yīng)式對象
 const a={ b:{c:3}}
 // 當(dāng)你訪問a.b的時候就已經(jīng)重新初始化響應(yīng)式了，此時的c就已經(jīng)是個代理的對象
 const c=a.b
// 你直接訪問c就相當(dāng)于訪問一個響應(yīng)式對象，所以并不會失去響應(yīng)式

 const vue = reactive({ a: 1 })
 vue = { b: 2 }

 // 當(dāng)reactive 之后返回一個代理對象的地址被vue 存起來，
 // 用一個不恰當(dāng)?shù)谋扔鱽碚f，就是這個地址具備響應(yīng)式的能力
 const vue = reactive({ a: 1 })
 //  而當(dāng)你對于vue重新賦值的時候不是將新的對象賦值給那個地址，而是將vue 換了個新地址
 // 而此時新地址不具備響應(yīng)式，可不就失去響應(yīng)式了嗎
 vue = { b: 2 }

import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    return {
      // 在 computed 函數(shù)中訪問 state
      count: computed(() => store.state.count),

      // 在 computed 函數(shù)中訪問 getter
      double: computed(() => store.getters.double)
    }
  }
}