const reactive = (target) => {
  return new Proxy(target, {
    get(target, key) {
      // 依賴收集
      track(target, key)
      return Reflect.get(target, key)
    },
    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      if (oldValue !== value) {
        // 觸發(fā)更新
        trigger(target, key)
      }
      return result
    }
    // 其他攔截操作...
  })
}

targetMap = WeakMap({
  target: Map({
    key: Set(effect1, effect2, ...)
  })
});

class RefImpl {
  constructor(value) {
    this._value = isObject(value) ? reactive(value) : value;
    this.dep = new Set(); // 依賴集合
  }

  get value() {
    track(this.dep); // 依賴收集
    return this._value;
  }

  set value(newVal) {
    if (this._value !== newVal) {
      this._value = isObject(newVal) ? reactive(newVal) : newVal;
      trigger(this.dep); // 觸發(fā)更新
    }
  }
}

const ref = (value) => new RefImpl(value);

// 正確用法
const count = ref(0) // ? 自動(dòng)類型推斷為 Ref<number>

// 錯(cuò)誤嘗試
const count = reactive(0) // ? 參數(shù)必須是對(duì)象類型

// ref 處理對(duì)象（自動(dòng)解包）
const user = ref({
  name: 'John',
  address: {
    city: 'New York'
  }
})

// 等效于 reactive 寫法
const user = reactive({
  name: 'John',
  address: reactive({
    city: 'New York'
  })
})

// 訪問方式對(duì)比
console.log(user.value.name) // ref 需要 .value
console.log(user.name)        // reactive 直接訪問

// ref 數(shù)組
const listRef = ref([1, 2, 3])
listRef.value.push(4) // ? 正確修改方式

// reactive 數(shù)組
const listReactive = reactive([1, 2, 3])
listReactive.push(4) // ? 直接操作

// reactive 的解構(gòu)問題
const state = reactive({ count: 0 })
const { count } = state // ? 失去響應(yīng)性

// ref 的 解構(gòu)
const countRef = ref(0)
const count = countRef // ? 仍需通過 .value 訪問

// 正確解構(gòu)方式（reactive）
const state = reactive({ count: 0 })
const countRef = toRef(state, 'count') // ? 保持響應(yīng)

// ref 允許整體替換
const data = ref({ items: [] })
data.value = fetchData() // ? 響應(yīng)式更新

// reactive 需保持引用
const data = reactive({ items: [] })
Object.assign(data, fetchData()) // ? 正確方式
data = fetchData() ? 破壞響應(yīng)性

// 推薦返回 ref 保持靈活性
function useCounter(initial = 0) {
  const count = ref(initial)
  return { count }
}

// 復(fù)雜狀態(tài)使用 reactive + toRefs
function useUser() {
  const state = reactive({
    name: '',
    age: ''
  })
  return { ...toRefs(state) }
}

// 復(fù)雜表單使用 reactive
const form = reactive({
  username: '',
  password: '',
  preferences: {
    theme: 'light',
    notifications: true
  }
})

// 單個(gè)表單字段使用 ref
const searchQuery = ref('')

<script setup>

const inputRef = ref(null)
</script>

<templete>
  <div ref="inputRef"></div>
</templete>

// 需要保持引用的場景
const chartInstance = ref(null)

// 響應(yīng)式配置對(duì)象
const options = reacitve({
  title: { text: '熱銷' },
  series: [ ... ]
})

const state = reactive({
  count: ref(0), // 基礎(chǔ)類型 ref ，自動(dòng)解包
  user: ref<User>({ name: '' }) // 對(duì)象類型 ref ，自動(dòng)解包
})

state.count++ // 直接操作數(shù)字（等價(jià)于 state.count.value++）
state.user.name = 'john' // 直接操作對(duì)象（等價(jià)于 state.user.value.name）

const complexRef = ref({
  data: reactive({ /*...*/ }), // 嵌套 reactive 對(duì)象
  status: 'loading'  // 普通屬性（非響應(yīng)式）
})

complexRef.value.data.key = "value";  // 直接修改 reactive 對(duì)象
complexRef.value.status = "success";  // 修改普通屬性（非響應(yīng)式）

complexRef.value = {  // 替換整個(gè)對(duì)象（觸發(fā)響應(yīng)式更新）
  data: reactive({ /*...*/ }),
  status: 'success'
};