vue3源码：toRefs/ref干了什么

今天在项目里对vant的弹窗组件popup又包了一层作为子组件Child，以实现弹窗的定制化。
父组件Father传递数据到Child。

props: {
  showDialog: Boolean
}

props是一个proxy对象。子组件可以用computed计算属性对props.showDialog进行转换。

const visible = computed({
  get: ()=>props.showDialog,
  set: newVal=>{
    context.emit('toggleStatus', newVal)
  }
})

但今天主要是为了看看 ref 干了什么。

setup(props, context){
  const {showDialog} = toRefs(props)
  const visible = ref(showDialog)
  watch(()=>visible.value, newVal=>{
    context.emit('toggleStatus', newVal)
  })
  return {
    visible,
  }
}

对象结构会使之失去响应性，而toRefs包裹的对象可以避免这一点。
子组件创建visible变量，用来控制popup组件是否显示。
用ref接收showDailog属性，返回一个响应式且可变的ref对象。再通过监测visible.value值的变化，触发父组件showDialog更新值。嗯，看起来好像保持了对源头的响应式连接了！我的子组件肯定可以接收到Father的更新了！

但这样做有个问题。控制台很快报出⚠️

reactivity.esm-bundler.js:336 Set operation on key "showDialog" failed: target is readonly. Proxy {showDialog: true}

toRefs文档原文：

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。

那么，showDailog是怎么变成ref对象的呢？

toRefs方法遍历其参数object，给object的每个值加上__v_isRef = true属性：

class ObjectRefImpl {
  public readonly __v_isRef = true

  constructor(private readonly _object: T, private readonly _key: K) {}

  get value() {
    return this._object[this._key]
  }

  set value(newVal) {
    this._object[this._key] = newVal
  }
}

__v_isRef标记该对象为ref对象。
接下来看看ref方法的功能。

export function ref(value?: unknown) {
  return createRef(value)
}

function createRef(rawValue: unknown, shallow = false) {
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}

ref接收的showDailog，当判断是一个ref对象时，返回它自己。当弹窗组件被关闭，visible被直接赋值为false，实际上就是在挑战props的readonly属性。控制台警告，并且拒绝执行你的赋值操作。

既然如此，那就给visible初始化为false，再监测showDialog触发visible即可。

const visible = ref(false)
const toggle = (newVal: boolean)=>(visible.value=newVal)
watch(()=>showDialog.value, newVal=>{
  toggle(newVal)
})
watch(()=>visible.value, newVal=>{
  console.log('visible=------', visible)
  context.emit('toggleStatus', newVal)
})

问题还没结束。如果是ref函数接收的参数不是ref对象呢？换句话说，new RefImpl(rawValue, shallow)又干了啥？

class RefImpl {
  private _value: T

  public readonly __v_isRef = true

  constructor(private _rawValue: T, public readonly _shallow = false) {
    this._value = _shallow ? _rawValue : convert(_rawValue)
  }

  get value() {
    track(toRaw(this), TrackOpTypes.GET, 'value')
    return this._value
  }

  set value(newVal) {
    if (hasChanged(toRaw(newVal), this._rawValue)) {
      this._rawValue = newVal
      this._value = this._shallow ? newVal : convert(newVal)
      trigger(toRaw(this), TriggerOpTypes.SET, 'value', newVal)
    }
  }
}

主要看set value(newVal)这个方法。ref方法并没有传递shallow参数，convert方法将这个值转换为一个响应式的proxy对象。

const convert = (val: T): T =>
  isObject(val) ? reactive(val) : val

萌新上路，期待大佬们的斧正呀~