不对劲，用了vue2.7 composition-api的 ref 方法，页面怎么不更新？

vue3发布挺久了，目前看在实际业务中使用问题不大，不过对于一些跑得好好的2.x老项目而言，很难直接升到3.x，在不升级 3.x的情况下还想使用 composition-api的话，有两种方式，一是使用 @vue/composition-api，二是直接升级 vue2.7，v2.7版本内置了 @vue/composition-api，所以不用手动引入了

本人参与的一个实际业务项目，引入了 vue2.7，但是在使用 ref等响应式 api的时候发现效果与预期不符合，例如下述基于 vue2.7 的代码

<template>
  <div>
    <p>{{ list[0] }}-{{ data }}</p>
    <button @click="add">Add</button>
  </div>
</template>

<script>
import { ref } from "vue"

export default {
  setup() {
    const list = ref([0])
    const data = ref(0)
    return {
      data,
      list,
      add() {
        list.value[0] = list.value[0] + 1
        data.value = data.value + 1
        conosle.log(list.value, data.value)
      }
    }
  }
}
</script>

当点击 Add按钮的时候，期望 list[0] 和 data 的值自增 1，且页面上展示的值也能同时更新，然而点击之后，控制台打印出来的 list.value、data.value都没啥问题，但页面上展示的值只有 data 更新了，list[0]却一直固定为初始值，展示出来的值依旧是之前的值，除非我将 list.value指向一个新的地址，页面才能正常更新

add() {
  list.value[0] = list.value[0] + 1
  // 重新指定引用地址
  list.value = list.value.slice()
}

鄙人不才，之前一直以为只要2.x项目引入了 @vue/composition-api，哪怕底层不一样，用法和表现应该是和 vue3.x差不多才对，但是碰到这个问题后我才意识到二者还是有差别的，因为我的这种写法是比较常见的，作为一个成熟的框架，vue3.x应该不会存在这种问题，然后试了下 vue3.x，相同的写法，确实如我所料，不需要重新指定 list.value的引用地址，页面也能正常更新

已经很长时间没看过源码了，正好借着这个问题简单看下，从源码上搞清楚区别

vue 2.7 的实现

ref 不起作用的原因

源码基于 v2.7.13

问题是由 ref引起的，那么就从它看起

// src/v3/reactivity/ref.ts
export function ref<T extends object>(
  value: T
): [T] extends [Ref] ? T : Ref<UnwrapRef<T>>
export function ref<T>(value: T): Ref<UnwrapRef<T>>
export function ref<T = any>(): Ref<T | undefined>
export function ref(value?: unknown) {
  return createRef(value, false)
}

ref 的类型声明有三个，第一个的意思是如果传入了一个 Ref 类型的参数，则返回这个参数的类型；第二个的意思是传入一个任意类型的参数，返回一个包装了此任意类型的 Ref类型，第三个的意思是可以不传入任何参数，这个时候 ts无法自动推导类型，但你可以传入一个类型来告诉 ts 这个值的类型是什么

// src/v3/reactivity/ref.ts
function createRef(rawValue: unknown, shallow: boolean) {
  if (isRef(rawValue)) {
    return rawValue
  }
  const ref: any = {}
  def(ref, RefFlag, true)
  def(ref, ReactiveFlags.IS_SHALLOW, shallow)
  def(
    ref,
    'dep',
    defineReactive(ref, 'value', rawValue, null, shallow, isServerRendering())
  )
  return ref
}

createRef中首先判断传入值是不是已经是一个 Ref类型的值了，如果是，则不做处理，直接将这个值返回 否则的话，连续调用三次 def 来处理传入的值

// src/core/util/lang.ts
export function def(obj: Object, key: string, val: any, enumerable?: boolean) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  })
}

def调用了 Object.defineProperty 来给对象的属性设置值

第三次调用时，又调用 defineReactive对 rawValue进行了预处理，在 ref上挂了一个 value属性

// src/core/observer/index.ts
export function defineReactive(
  obj: object,
  key: string,
  val?: any,
  customSetter?: Function | null,
  shallow?: boolean,
  mock?: boolean
) {
  const dep = new Dep()
  // ...
  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  // ...

  let childOb = !shallow && observe(val, false, mock)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      // ...
    },
    set: function reactiveSetter(newVal) {
      // ...
    }
  })

  return dep
}

defineReactive 又给 ref的 value属性定义了 getter、setter，当写入或读取 ref.value 的时候，就会触发这里定义的 getter、setter

get: function reactiveGetter() {
  const value = getter ? getter.call(obj) : val
  if (Dep.target) {
    if (__DEV__) {
      // ...
    } else {
      dep.depend()
    }
    // ...
  }
  return isRef(value) && !shallow ? value.value : value
}

get方法里的 Dep 是 vue2.x依赖收集的核心，我曾经也写过文章分析这块的实现，在本文这不是重点，就不多说了，get方法的最后有一个对当前获取的数据是否是 ref的判断，如果是，则返回value.value，这就是需要通过 ref.value来获取到我们设置在 ref里真实数据值的原因

设置值的时候肯定是触发 set 方法

// src/core/observer/index.ts
set: function reactiveSetter(newVal) {
  const value = getter ? getter.call(obj) : val
  if (!hasChanged(value, newVal)) {
    return
  }
  // ...
  if (setter) {
    setter.call(obj, newVal)
  } else if (getter) {
    // #7981: for accessor properties without setter
    return
  } else if (!shallow && isRef(value) && !isRef(newVal)) {
    value.value = newVal
    return
  } else {
    val = newVal
  }
  childOb = !shallow && observe(newVal, false, mock)
  if (__DEV__) {
    // ...
  } else {
    dep.notify()
  }
}

这是派发更新的那一套，最后的 dep.notify() 就用于重新渲染，但直到看到这里我也没看到哪里有对数组的子项设置值时的处理了，Object.defineProperty 只是设置 了ref.value 时的处理，ref.value[0]上并没有 set方法，所以设置 list.value[0] 值的时候，在数据层面确实可以设置成功，但并不会触发页面更新

不使用 composition-api的时候，如果 props或者data是一个数组，改变数组子项的时候，是可以触发页面更新的，这是因为 vue 专门对这种情况做了遍历处理，保证了数组子项也是被 Object.defineProperty处理过的，例如，对于 data来说，在初始化的时候会调用 initData，initData又会调用 observe，在 observe里就有对数组子项的遍历处理

// src/core/observer/index.ts
export class Observer {
  constructor(public value: any, public shallow = false, public mock = false) {
    // ...
    if (isArray(value)) {
      // ...
      for (let i = 0, l = arrayKeys.length; i < l; i++) {
        const key = arrayKeys[i]
        def(value, key, arrayMethods[key])
      }
      if (!shallow) {
        this.observeArray(value)
      }
    } else {
      // ...
    }
  }
}

解决方法

不过，虽然直接设置 ref.value的数组子项无法触发更新，但我们知道，vue2.x 是劫持了数组的 push、splice 等方法的，就是用于数组的更新，所以如果你实在是不想给 ref.value 换个地址又想在修改子项的时候触发页面更新，可以调用这些被劫持的方法来达到目的

// 第一种，修改 .value 地址
list.value[0] = list.value[0] + 1
list.value = list.value.slice()
// 第二种，调用 splice
list.value.splice(0, 1, list.value[0] + 1)

实际上，在对一个对象做响应式处理的时候更建议使用 reactive 而不是 ref，reactive就可以实现在数组子项修改的时候也触发更新，原理跟props、data类似，也是调用了 observe方法进行数组遍历

// src/v3/reactivity/reactive.ts

function reactive(target: object) {
  makeReactive(target, false)
  return target
}

function makeReactive(target: any, shallow: boolean) {
  // ...
  if (__DEV__) {
    if (isArray(target)) {
      warn(
        `Avoid using Array as root value for ${
          shallow ? `shallowReactive()` : `reactive()`
        } as it cannot be tracked in watch() or watchEffect(). Use ${
          shallow ? `shallowRef()` : `ref()`
        } instead. This is a Vue-2-only limitation.`
      )
    }
  }
  // ...
  const ob = observe(
    target,
    shallow,
    isServerRendering() /* ssr mock reactivity */
  )
  // ...
}

一开始我没用 reactive的原因是，如果写成 const list = reactive([0])，vue会报一个 warn，建议用 ref所以我听从建议用了 ref，只是没想到这个建议不是那么靠谱

reactive warn 的原因

看到这个 warn信息我又有点好奇了，为啥数组作为 reactive 的 root value，watch/watchEffect就会失效呢？还是看代码

// src/v3/apiWatch.ts
function doWatch(
  source: WatchSource | WatchSource[] | WatchEffect | object,
  cb: WatchCallback | null,
  {
    immediate,
    deep,
    flush = 'pre',
    onTrack,
    onTrigger
  }: WatchOptions = emptyObject
): WatchStopHandle {
  // ...
  if (isRef(source)) {
    // ...
  } else if (isReactive(source)) {
    getter = () => {
      ;(source as any).__ob__.dep.depend()
      return source
    }
    deep = true
  }
  // ...
}

watch会调用 doWatch，里面有对传入值类型的判断以调用不同的处理方法，当要 watch的值是 reactive的时候，会调用 depend方法，这是个依赖收集的方法，所以当修改watch的值的时候，会触发派发更新使得视图更新，但这里只是对 root值进行了依赖收集，如果传入的值是一个数组，并没有对数组的子项进行依赖收集，所以改变数组子项的时候，并不会被watch到，也不会触发响应式更新

这里没有主动对数组子项进行响应式包装，但如果数组的子项本来就是已经被响应式包装过的，那还是可以被 watch到的，比如子项已经是 ref类型数据了

setup() {
  const data1 = ref(0)
  const list = reactive([data1])

  watch(list, v => {
    console.log('list 改变', v)
  })
  
  return {
    list,
    add() {
      list[0].value = list[0].value + 1
    }
  }
}

不过这里 watch 响应的直接原因不是因为 list 的子项改变，按照常理，想要watch到数组子项改变，是需要第二个参数的deep: true参数的，这里是因为 data1的改变而触发的响应，所以不需要这个参数也可以

vue 3.x 的实现

源码基于 v3.2.41

// packages/reactivity/src/ref.ts
export function ref(value?: unknown) {
  return createRef(value, false)
}

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

初始化一个 RefImpl 实例作为 ref实例

// packages/reactivity/src/ref.ts

class RefImpl<T> {
  constructor(value: T, public readonly __v_isShallow: boolean) {
    this._rawValue = __v_isShallow ? value : toRaw(value)
    this._value = __v_isShallow ? value : toReactive(value)
  }
}

分别调用 toRaw 和 toReactive处理传入 value，并将处理后的结果设置到实例的两个内部属性上, this._rawValue 存储传入的值，用于后续的数值对比等，主要看 this._value，这才是我们想看的值

// packages/reactivity/src/reactive.ts
export const toReactive = <T extends unknown>(value: T): T => isObject(value) ? reactive(value) : value

如果传入的 value 是一个对象，那么调用 reactive方法处理，否则直接返回原值，这里可以看到，当 value 是一个对象的时候，ref 是借助了 reactive的，先看下如果不是一个对象的情况

RefImpl 上有 value 属性get 和 set 方法，先看 get

get value() {
  trackRefValue(this)
  return this._value
}

trackRefValue 用于依赖收集，这里不用管，最终是看到 get 是把 this._value 返回了的 再看 set

set value(newVal) {
  const useDirectValue =
    this.__v_isShallow || isShallow(newVal) || isReadonly(newVal)
  newVal = useDirectValue ? newVal : toRaw(newVal)
  if (hasChanged(newVal, this._rawValue)) {
    this._rawValue = newVal
    this._value = useDirectValue ? newVal : toReactive(newVal)
    triggerRefValue(this, newVal)
  }
}

设置value的时候，会看下新旧值是否一样，如果一样就不管了，否则会重置 this._value，然后重新依赖收集一下，这里对于 this._value的重新设置同样判断下是不是对象

当给 ref传入一个数组的时候，显然会走 toReactive，也就是会调用 reactive，reactive又调用了 createReactiveObject

// packages/reactivity/src/reactive.ts
export function reactive(target: object) {
  // ...
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
) {
  // ..
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
}

createReactiveObject 函数体前面一大段都是对合法性等判断不用看，最后是执行了 new Proxy，返回了一个 proxy 实例，也就是对 value进行了代理

看到 proxy就大概明白了，proxy 是可以监听到任意层级子级的 set 和 get的，且不需要额外的逻辑，就和监听其他属性一样，那么除非是故意写不处理数组子项的逻辑，否则默认就是契合这套基于 Proxy的响应式系统的

主要看第二个参数，如果 ref参数是一个正常数组的话，那么第二个参数就是 baseHandlers

// packages/reactivity/src/baseHandlers.ts
export const mutableHandlers: ProxyHandler<object> = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys
}

const set = /*#__PURE__*/ createSetter()

function createSetter(shallow = false) {
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    // ...
    const hadKey =
      isArray(target) && isIntegerKey(key)
        ? Number(key) < target.length
        : hasOwn(target, key)
    const result = Reflect.set(target, key, value, receiver)
    // don't trigger if target is something up in the prototype chain of original
    if (target === toRaw(receiver)) {
      if (!hadKey) {
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

最后会调用 trigger，trigger调用 triggerEffects->triggerEffect，触发 effect.run/effect.scheduler，这个方法就会触发组件的视图更新，这些就都是响应式的内容了，完全可以单开系列文章细说，本文就不再扩展了

function triggerEffect(
  effect: ReactiveEffect,
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  // ...
  if (effect.scheduler) {
    effect.scheduler()
  } else {
    effect.run()
  }
}

小结

本文是带着问题去看源码，只是为了弄清楚为什么 ref 跟我想象的运行结果不一致，所以其他不直接相关的代码我都是直接跳过，比如响应式系统，虽然跟ref确实有联系，但因为不是我所关注的，所以到底怎么个响应式法不需要去深入去看，知道有这么回事就行了，避免错综复杂的逻辑越绕越多，只看与我问题相关的逻辑，直到找出我想要的答案

当然了，如果你有时间精力的话，能把整个源码看完并串起来那最好不过了，但那毕竟是个系统性工程，还是得徐徐图之，无法快速得到一些针对性的答案