toRef 与 toRefs：响应式解构的秘密 ​

const state = reactive({
  name: 'John',
  age: 30
})

// 解构
let { name, age } = state

effect(() => {
  console.log(name, age)  // 不会再次执行
})

state.name = 'Jane'  // 不触发 effect
name = 'Bob'         // 这只是修改局部变量

let name = state.name  // 这只是 'John' 字符串

const state = reactive({
  name: 'John',
  age: 30
})

const nameRef = toRef(state, 'name')

console.log(nameRef.value)  // 'John'

// 修改 nameRef 会修改 state
nameRef.value = 'Jane'
console.log(state.name)  // 'Jane'

// 修改 state 也会更新 nameRef
state.name = 'Bob'
console.log(nameRef.value)  // 'Bob'

class ObjectRefImpl {
  public readonly __v_isRef = true
  
  constructor(
    private readonly _object,
    private readonly _key
  ) {}
  
  get value() {
    // 直接从源对象读取
    return this._object[this._key]
  }
  
  set value(newValue) {
    // 直接设置到源对象
    this._object[this._key] = newValue
  }
}

function toRef(object, key) {
  // 如果属性本身已经是 ref，直接返回
  const val = object[key]
  if (isRef(val)) {
    return val
  }
  
  return new ObjectRefImpl(object, key)
}

// RefImpl：存储自己的值
class RefImpl {
  private _value  // 自己存储值
  
  get value() {
    trackRefValue(this)  // 追踪自己
    return this._value
  }
  
  set value(newValue) {
    this._value = newValue
    triggerRefValue(this)  // 触发自己的依赖
  }
}

// ObjectRefImpl：代理到源对象
class ObjectRefImpl {
  // 不存储值，只存储引用
  
  get value() {
    // 读取源对象的属性
    // 如果源对象是 reactive，会触发源对象的 track
    return this._object[this._key]
  }
  
  set value(newValue) {
    // 设置源对象的属性
    // 如果源对象是 reactive，会触发源对象的 trigger
    this._object[this._key] = newValue
  }
}

const state = reactive({
  name: 'John',
  age: 30
})

const stateRefs = toRefs(state)
// {
//   name: ObjectRefImpl,
//   age: ObjectRefImpl
// }

// 现在可以安全解构
const { name, age } = stateRefs

// 保持响应式
effect(() => {
  console.log(name.value, age.value)
})

state.name = 'Jane'  // 触发 effect
name.value = 'Bob'   // 也触发 effect

function toRefs(object) {
  const ret = Array.isArray(object) 
    ? new Array(object.length) 
    : {}
  
  for (const key in object) {
    ret[key] = toRef(object, key)
  }
  
  return ret
}

// composable 返回响应式对象
function useMousePosition() {
  const state = reactive({
    x: 0,
    y: 0
  })
  
  onMounted(() => {
    window.addEventListener('mousemove', (e) => {
      state.x = e.clientX
      state.y = e.clientY
    })
  })
  
  // 返回 toRefs，让使用者可以解构
  return toRefs(state)
}

// 使用时可以安全解构
const { x, y } = useMousePosition()

// x 和 y 是 refs，保持响应式
watch([x, y], ([newX, newY]) => {
  console.log(newX, newY)
})

function useMousePosition() {
  const state = reactive({ x: 0, y: 0 })
  return state  // 返回 reactive
}

// 使用时解构会丢失响应式
const { x, y } = useMousePosition()  // ❌ x, y 不是响应式的

const props = defineProps(['name'])

// 当 props.name 为 undefined 时，使用默认值
const nameRef = toRef(props, 'name', 'Default Name')
console.log(nameRef.value)  // 'Default Name'

class ObjectRefImpl {
  constructor(
    private readonly _object,
    private readonly _key,
    private readonly _defaultValue?
  ) {}
  
  get value() {
    const val = this._object[this._key]
    return val === undefined ? this._defaultValue : val
  }
  
  set value(newValue) {
    this._object[this._key] = newValue
  }
}

function toRef(object, key, defaultValue) {
  const val = object[key]
  if (isRef(val)) return val
  
  return new ObjectRefImpl(object, key, defaultValue)
}

// 接受 ref 或普通值
function useFeature(maybeRef) {
  const value = toValue(maybeRef)  // 自动解包
  // 现在 value 是普通值
}

// 可以传入 ref
useFeature(ref(100))

// 也可以传入普通值
useFeature(100)

// 还可以传入 getter
useFeature(() => count.value * 2)

function toValue(source) {
  return typeof source === 'function' 
    ? source() 
    : unref(source)
}

const plainObj = { count: 0 }
const countRef = toRef(plainObj, 'count')

countRef.value = 1
console.log(plainObj.count)  // 1

const state = reactive({
  nested: { value: 1 }
})

// 这样不行
const valueRef = toRef(state.nested, 'value')

// 因为 state.nested 已经是普通对象（被 reactive 包装后访问时才代理）
// 应该这样
const nestedRef = toRef(state, 'nested')

const state = reactive({ list: [1, 2, 3] })
const { list } = toRefs(state)

list.value.push(4)  // 这样对吗？
list.value = [5, 6] // 这样对吗？